Merge pull request #3863 from Aditi22Bansal/main

Solved issue # 3742 - Added pixel painter game
kunjgit · May 30, 2024 · af5e7cc · af5e7cc
2 parents bd64ba3 + 0c67199
commit af5e7cc
Show file tree

Hide file tree

Showing 6 changed files with 169 additions and 5 deletions.
diff --git a/Games/pixel_painter/README.md b/Games/pixel_painter/README.md
@@ -0,0 +1,41 @@
+# Pixel Painter
+
+Pixel Painter is an interactive web-based drawing application that allows users to create pixel art. It features a canvas for drawing, a color picker, an undo functionality, and a clear button. The interface includes smooth animations and an intuitive user experience.
+
+## How to Play
+
+### Drawing
+
+1. **Select a Color**: Use the color picker in the toolbar to choose your desired drawing color.
+2. **Start Drawing**: Click and hold the left mouse button on the canvas to start drawing. Move the mouse to draw.
+3. **Stop Drawing**: Release the left mouse button to stop drawing.
+
+### Clear the Canvas
+
+- **Clear Button**: Click the "Clear" button in the toolbar to erase the entire canvas and start fresh.
+
+### Undo
+
+- **Undo Button**: Click the "Undo" button to revert to the previous state. The application maintains a stack of up to 10 previous states.
+
+## Features
+
+- **Color Picker**: Allows you to select any color for drawing.
+- **Clear Canvas**: Clears all drawings on the canvas, providing a blank slate.
+- **Undo Functionality**: Reverts the canvas to the previous state, allowing for correction of mistakes.
+- **Grid Overlay**: A grid is displayed over the canvas to help with pixel alignment and precision.
+- **Smooth Animations**: Buttons and color picker have smooth transition animations for an enhanced user experience.
+
+## File Structure
+
+- `index.html`: The main HTML file containing the structure of the application.
+- `styles.css`: The CSS file for styling the application, including the toolbar, buttons, and canvas.
+- `script.js`: The JavaScript file containing the logic for drawing, color selection, clearing the canvas, and undo functionality.
+
+## Usage
+
+- **Drawing**: Select a color and start drawing on the canvas.
+- **Clearing**: Click the "Clear" button to reset the canvas.
+- **Undoing**: Click the "Undo" button to revert to the previous state.
+
+Enjoy creating your pixel art with Pixel Painter!
diff --git a/Games/pixel_painter/index.html b/Games/pixel_painter/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Pixel Painter</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div id="toolbar">
+        <input type="color" id="colorPicker" value="#000000">
+        <button id="clearButton">Clear</button>
+        <button id="undoButton">Undo</button>
+    </div>
+    <div id="canvasContainer" style="position: relative;">
+        <canvas id="pixelCanvas" width="600" height="600"></canvas>
+        <div id="grid"></div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Games/pixel_painter/script.js b/Games/pixel_painter/script.js
@@ -0,0 +1,53 @@
+// script.js
+document.addEventListener('DOMContentLoaded', () => {
+    const canvas = document.getElementById('pixelCanvas');
+    const ctx = canvas.getContext('2d');
+    const colorPicker = document.getElementById('colorPicker');
+    const clearButton = document.getElementById('clearButton');
+    const undoButton = document.getElementById('undoButton');
+    let drawing = false;
+    let color = colorPicker.value;
+    let undoStack = [];
+
+    // Initialize canvas
+    ctx.fillStyle = '#fff';
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+    canvas.addEventListener('mousedown', () => drawing = true);
+    canvas.addEventListener('mouseup', () => drawing = false);
+    canvas.addEventListener('mousemove', draw);
+    colorPicker.addEventListener('input', (e) => {
+        color = e.target.value;
+        colorPicker.style.borderColor = color;
+    });
+    clearButton.addEventListener('click', clearCanvas);
+    undoButton.addEventListener('click', undo);
+
+    canvas.addEventListener('mousedown', saveState);
+
+    function draw(event) {
+        if (!drawing) return;
+        const rect = canvas.getBoundingClientRect();
+        const x = event.clientX - rect.left;
+        const y = event.clientY - rect.top;
+        ctx.fillStyle = color;
+        ctx.fillRect(Math.floor(x / 10) * 10, Math.floor(y / 10) * 10, 10, 10);
+    }
+
+    function clearCanvas() {
+        ctx.fillStyle = '#fff';
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+    }
+
+    function saveState() {
+        undoStack.push(ctx.getImageData(0, 0, canvas.width, canvas.height));
+        if (undoStack.length > 10) undoStack.shift(); // Limit stack size
+    }
+
+    function undo() {
+        if (undoStack.length > 0) {
+            const imgData = undoStack.pop();
+            ctx.putImageData(imgData, 0, 0);
+        }
+    }
+});
diff --git a/Games/pixel_painter/styles.css b/Games/pixel_painter/styles.css
@@ -0,0 +1,52 @@
+/* styles.css */
+body {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-color: #f0f0f0;
+    font-family: Arial, sans-serif;
+}
+
+#toolbar {
+    margin: 20px;
+}
+
+button {
+    transition: background-color 0.3s, transform 0.3s;
+}
+
+button:hover {
+    background-color: #ddd;
+    transform: scale(1.1);
+}
+
+#colorPicker {
+    transition: box-shadow 0.3s;
+}
+
+#colorPicker:focus {
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+}
+
+#canvasContainer {
+    position: relative;
+}
+
+#pixelCanvas {
+    border: 1px solid #000;
+    background-color: #fff;
+    cursor: crosshair;
+    position: relative;
+}
+
+#grid {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    background: linear-gradient(90deg, rgba(0,0,0,0.1) 1px, transparent 1px),
+                linear-gradient(rgba(0,0,0,0.1) 1px, transparent 1px);
+    background-size: 10px 10px;
+}
diff --git a/README.md b/README.md
@@ -283,11 +283,8 @@ This repository also provides one such platforms where contributers come over an
 | [Block Building](https://github.com/kunjgit/GameZone/tree/main/Games/Block_Building)                                 |
 |[Ping_Pong_Singleplayer](https://github.com/kunjgit/GameZone/tree/main/Games/Ping_Pong_Singleplayer)                  |
 | [MazeRunner](https://github.com/kunjgit/GameZone/tree/main/Games/MazeRunner)                                          |
-
-
-
-
-| [NewsJunction](https://github.com/kunjgit/GameZone/tree/main/Games/NewsJunction)                  |
+| [NewsJunction](https://github.com/kunjgit/GameZone/tree/main/Games/NewsJunction)                  
+| [Pixel Painter](https://github.com/kunjgit/GameZone/tree/main/Games/pixel_painter)                                 |
 
 
  </center>

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