diff --git a/SinglePlayer - Games/Pixel Painter/Images/ss1.png b/SinglePlayer - Games/Pixel Painter/Images/ss1.png new file mode 100644 index 00000000..5452499c Binary files /dev/null and b/SinglePlayer - Games/Pixel Painter/Images/ss1.png differ diff --git a/SinglePlayer - Games/Pixel Painter/Images/ss2.png b/SinglePlayer - Games/Pixel Painter/Images/ss2.png new file mode 100644 index 00000000..0a4cd902 Binary files /dev/null and b/SinglePlayer - Games/Pixel Painter/Images/ss2.png differ diff --git a/SinglePlayer - Games/Pixel Painter/index.html b/SinglePlayer - Games/Pixel Painter/index.html new file mode 100644 index 00000000..a7e961e0 --- /dev/null +++ b/SinglePlayer - Games/Pixel Painter/index.html @@ -0,0 +1,21 @@ + + + + + + Pixel Painter + + + +
+ + + +
+
+ +
+
+ + + diff --git a/SinglePlayer - Games/Pixel Painter/script.js b/SinglePlayer - Games/Pixel Painter/script.js new file mode 100644 index 00000000..27dbd4f2 --- /dev/null +++ b/SinglePlayer - 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/SinglePlayer - Games/Pixel Painter/styles.css b/SinglePlayer - Games/Pixel Painter/styles.css new file mode 100644 index 00000000..bdeddcc3 --- /dev/null +++ b/SinglePlayer - 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/additionalpage/game.html b/additionalpage/game.html index 5ed2183f..0b552282 100644 --- a/additionalpage/game.html +++ b/additionalpage/game.html @@ -4003,6 +4003,61 @@

Ping Pong

+ + + + + +
+
+ +
+ 241 + +
+
+
+ +
+
+

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.

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

29.07.2024

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ play now +
+
+
+
+ + diff --git a/assets/images/ss1.png b/assets/images/ss1.png new file mode 100644 index 00000000..5452499c Binary files /dev/null and b/assets/images/ss1.png differ