Added a new game

kunjgit · Oct 13, 2023 · f1167d3 · f1167d3
1 parent b3f6e00
commit f1167d3
Show file tree

Hide file tree

Showing 9 changed files with 213 additions and 0 deletions.
diff --git a/Games/Pixel_Art_Maker/Images/Screenshot_Final.png b/Games/Pixel_Art_Maker/Images/Screenshot_Final.png
diff --git a/Games/Pixel_Art_Maker/Images/Screenshot_Primary.png b/Games/Pixel_Art_Maker/Images/Screenshot_Primary.png
diff --git a/Games/Pixel_Art_Maker/README.md b/Games/Pixel_Art_Maker/README.md
@@ -0,0 +1,36 @@
+# **Game_Name** 
+
+Pixel_Art_Maker
+
+<br>
+
+## **Description 📃**
+<!-- add your game description here  -->
+- This is a game, where one can easily create any pixelated art using various colours.
+
+## **functionalities 🎮**
+<!-- add functionalities over here -->
+- This game features a customisable grid, where the user can choose the number of rows and columns for their art. This customisability helps users to create pixel-arts as per their choice neatly.
+- This game also features a color-picker, with the help of which, a user can very easily customise the color to be used in their painting.
+- There is also a clear button, which helps the user to create as many pixel-art as wanted in a single go only.
+<br>
+
+## **How to play? 🕹️**
+<!-- add the steps how to play games -->
+- The user has to enter the number of rows and columns that they would require in their art and then click the create-grid button.
+- A blank grid appears.
+- The user now has to click on the black color-picker box under the grid.
+- A color-picker box appears, the user can choose any color from the spectrum.
+- On pressing the clear button, th art is removed and the user gets back the original blank screen.
+
+<br>
+
+## **Screenshots 📸**
+
+<br>
+<!-- add your screenshots like this -->
+<!-- ![image](url) -->
+![image](Screenshot_first_look.png)
+![image](Screenshot_final.png)
+
+<br>
diff --git a/Games/Pixel_Art_Maker/index.html b/Games/Pixel_Art_Maker/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>PixArtMaker</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+<h1>Pixel Art Maker</h1>
+<p><br>
+<!-- Create input elements for the user to enter the number of rows and columns -->
+<label for="rows">Enter the number of rows (Between 1 to 15, inclusive):</label>
+<input type="number" id="rows" min="1" max="15">
+<br>
+<label for="cols">Enter the number of columns (Between 1 to 15, inclusive):</label>
+<input type="number" id="cols" min="1" max="15">
+<br>
+<!-- Create a button element with id create-grid to allow the user to create the grid -->
+<button id="create-grid">Create Grid</button>
+<p>
+<!-- Create a table element with id grid to hold the grid of squares -->
+<table id="grid">
+  <!-- The rows and columns will be created here -->
+</table>
+<br>
+Please choose the color according to your choice from the color-picker below: <p>
+<!-- Create an input element with type color and id color-picker to allow the user to select a color -->
+<input type="color" id="color-picker">
+
+<!-- Create button elements with id clear, save, and share to allow the user to clear, save, and share their pixel art -->
+<button id="clear">Clear</button>
+
+<!-- Link the JS file to the HTML file -->
+<script src="script.js"></script>
+
+</body>
+</html>
diff --git a/Games/Pixel_Art_Maker/script.js b/Games/Pixel_Art_Maker/script.js
@@ -0,0 +1,80 @@
+// Get the grid element
+var grid = document.getElementById("grid");
+
+// Get all the squares in the grid
+var squares = grid.getElementsByTagName("td");
+
+// Declare a variable to store the current color
+var currentColor = "white";
+
+// Get the create-grid button element
+var createGrid = document.getElementById("create-grid");
+
+// Add an event listener to the create-grid button
+createGrid.addEventListener("click", function() {
+  // Clear the previous grid
+  grid.innerHTML = "";
+
+  // Get the user's input values for rows and columns
+  var rows = document.getElementById("rows").value;
+  var cols = document.getElementById("cols").value;
+
+  // Loop through the rows
+  for (var i = 0; i < rows; i++) {
+    // Create a new row element
+    var row = document.createElement("tr");
+
+    // Loop through the columns
+    for (var j = 0; j < cols; j++) {
+      // Create a new cell element
+      var cell = document.createElement("td");
+
+      // Append the cell to the row
+      row.appendChild(cell);
+    }
+
+    // Append the row to the grid
+    grid.appendChild(row);
+  }
+
+  // Update the squares variable to include the new squares
+  squares = grid.getElementsByTagName("td");
+
+  // Loop through all the squares in the grid
+  for (var k = 0; k < squares.length; k++) {
+    // Add an event listener to each square
+    squares[k].addEventListener("click", function() {
+      // Change the square's background color to the currentColor
+      this.style.backgroundColor = currentColor;
+
+      // Log the square's color for debugging purposes
+      console.log(this.style.backgroundColor);
+    });
+  }
+});
+
+// Get the color picker element
+var colorPicker = document.getElementById("color-picker");
+
+// Add an event listener to the color picker
+colorPicker.addEventListener("change", function() {
+  // Store the color picker's value in the currentColor variable
+  currentColor = colorPicker.value;
+
+  // Log the currentColor for debugging purposes
+  console.log(currentColor);
+});
+// Get the clear button element
+var clear = document.getElementById("clear");
+
+// Add an event listener to the clear button
+var clear = document.getElementById("clear");
+
+// Add an event listener to the clear button
+clear.addEventListener("click", function() {
+  // Loop through all the squares in the grid
+  for (var i = 0; i < squares.length; i++) {
+    // Change the square's background color to white
+    squares[i].style.backgroundColor = "white";
+  }
+});
diff --git a/Games/Pixel_Art_Maker/spl.jpg b/Games/Pixel_Art_Maker/spl.jpg
diff --git a/Games/Pixel_Art_Maker/style.css b/Games/Pixel_Art_Maker/style.css
@@ -0,0 +1,58 @@
+body{
+    font-size: x-large;
+    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+    display: grid;
+    place-items: center;
+    text-align: center; 
+    background-image: url(spl.jpg); 
+  }
+  table {
+    border-collapse: collapse;
+  }
+
+  td {
+    place-content: center;
+    width: 20px;
+    height: 20px;
+    border: 2.5px solid rgb(16, 16, 16);
+    background-color: white;
+  }
+
+  input[type="number"] {
+    width:350px;
+    font-weight: bold;
+    align-items: center;
+    border: 2.5px solid rgb(16, 16, 16);
+  }
+
+  input[type="color"] {
+    width: 50px;
+    height: 25px;
+  }
+  #rows{
+    border: 2.5px solid rgb(16, 16, 16);
+  }
+  #cols{
+    border: 2.5px solid rgb(16, 16, 16);
+  }
+  button {
+    width: 90px;
+    height: 35px;  
+    border: 2.5px solid rgb(16, 16, 16);
+  }
+  #create-grid{
+    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+    font-size: small;
+  }
+  #clear{  
+    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
+    font-size: medium;
+    width: 75px;
+    height: 40px;
+    border: 2px solid rgb(8, 5, 18);
+  }
+  #color-picker {
+    width: 75px;
+    height: 40px;
+    border: 2.5px solid rgb(8, 5, 18);
+  }
diff --git a/README.md b/README.md
@@ -495,6 +495,7 @@ This repository also provides one such platforms where contributers come over an
 | 383 | [Puzzel_Winner](https://github.com/kunjgit/GameZone/tree/main/Games/Puzzel_Winner)|
 | 384 | [Emoji_Intruder](https://github.com/kunjgit/GameZone/tree/main/Games/Emoji_Intruder)|
 | 385 | [Guess The Weapon](https://github.com/kunjgit/GameZone/tree/main/Games/Guess_The_Weapon)|
+| 386 | [Pixel_Art_Maker](https://github.com/kunjgit/GameZone/tree/main/Games/Pixel_Art_Maker)|
 
  </center>
 

diff --git a/assets/images/Pixel_Art_Maker.png b/assets/images/Pixel_Art_Maker.png