From 4af2ad7201ec82479bdcf6b77d965706e577ba0d Mon Sep 17 00:00:00 2001 From: Aditi Bansal <142652964+Aditi22Bansal@users.noreply.github.com> Date: Wed, 29 May 2024 12:10:40 +0530 Subject: [PATCH 1/6] Create index.html --- Games/pixel_painter/index.html | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 Games/pixel_painter/index.html diff --git a/Games/pixel_painter/index.html b/Games/pixel_painter/index.html new file mode 100644 index 0000000000..a7e961e0e1 --- /dev/null +++ b/Games/pixel_painter/index.html @@ -0,0 +1,21 @@ + + + + + + Pixel Painter + + + +
+ + + +
+
+ +
+
+ + + From 161e20ec48f4e2c6dc31cb564adc58f6f89b0bd8 Mon Sep 17 00:00:00 2001 From: Aditi Bansal <142652964+Aditi22Bansal@users.noreply.github.com> Date: Wed, 29 May 2024 12:11:14 +0530 Subject: [PATCH 2/6] Create styles.css --- Games/pixel_painter/styles.css | 52 ++++++++++++++++++++++++++++++++++ 1 file changed, 52 insertions(+) create mode 100644 Games/pixel_painter/styles.css diff --git a/Games/pixel_painter/styles.css b/Games/pixel_painter/styles.css new file mode 100644 index 0000000000..bdeddcc366 --- /dev/null +++ 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; +} From ef146e1d85101f126118cef4cb482d69e6e97a87 Mon Sep 17 00:00:00 2001 From: Aditi Bansal <142652964+Aditi22Bansal@users.noreply.github.com> Date: Wed, 29 May 2024 12:11:43 +0530 Subject: [PATCH 3/6] Create script.js --- Games/pixel_painter/script.js | 53 +++++++++++++++++++++++++++++++++++ 1 file changed, 53 insertions(+) create mode 100644 Games/pixel_painter/script.js diff --git a/Games/pixel_painter/script.js b/Games/pixel_painter/script.js new file mode 100644 index 0000000000..27dbd4f2e2 --- /dev/null +++ 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); + } + } +}); From d0a5de5d281abea4c0b8c55db112b4949e9d4cca Mon Sep 17 00:00:00 2001 From: Aditi Bansal <142652964+Aditi22Bansal@users.noreply.github.com> Date: Wed, 29 May 2024 12:12:23 +0530 Subject: [PATCH 4/6] Create README.md --- Games/pixel_painter/README.md | 41 +++++++++++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) create mode 100644 Games/pixel_painter/README.md diff --git a/Games/pixel_painter/README.md b/Games/pixel_painter/README.md new file mode 100644 index 0000000000..f62b776e39 --- /dev/null +++ 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! From 33a43aa088e5cc593f52a7842d5882722a4edaff Mon Sep 17 00:00:00 2001 From: Aditi Bansal <142652964+Aditi22Bansal@users.noreply.github.com> Date: Wed, 29 May 2024 12:13:19 +0530 Subject: [PATCH 5/6] Add files via upload --- assets/images/pixel_painter.png | Bin 0 -> 17473 bytes 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 assets/images/pixel_painter.png diff --git a/assets/images/pixel_painter.png b/assets/images/pixel_painter.png new file mode 100644 index 0000000000000000000000000000000000000000..a778aeef8ad528b579b3cee959b1d8e237e49e7d GIT binary patch literal 17473 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 literal 0 HcmV?d00001 From 43eb4b15432bd3e9c4ad6a6827775f5255c1dd08 Mon Sep 17 00:00:00 2001 From: Aditi Bansal <142652964+Aditi22Bansal@users.noreply.github.com> Date: Wed, 29 May 2024 12:18:37 +0530 Subject: [PATCH 6/6] Update README.md --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index aba398f819..98e0fbb367 100644 --- a/README.md +++ b/README.md @@ -279,6 +279,7 @@ This repository also provides one such platforms where contributers come over an | [Catch_Stars](https://github.com/Kunjgit/GameZone/tree/main/Games/Catch_Stars) | | [LaserDarts] (https://github.com/Jagpreet153/GameZone/tree/main/Games/LaserDarts) | [Block Building](https://github.com/kunjgit/GameZone/tree/main/Games/Block_Building) | +| [Pixel Painter](https://github.com/kunjgit/GameZone/tree/main/Games/pixel_painter) |