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
+
+
+
+
+ Clear
+ Undo
+
+
+
+
+
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 611dfbc0..0c6b522e 100644
--- a/additionalpage/game.html
+++ b/additionalpage/game.html
@@ -4003,6 +4003,14 @@
Ping Pong
@@ -4022,6 +4030,14 @@ 
+
