amfoss · Pavan2shiva · Oct 17, 2025 · Nov 6, 2025
diff --git a/.DS_Store b/.DS_Store
diff --git a/3-typing-game/Typing-Game/index.html b/3-typing-game/Typing-Game/index.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Pixel Art Drawing Game</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="game-container">
+        <h1> Pixel Art Drawing Game</h1>
+        <p class="subtitle">Use WASD to move and ENTER to draw!</p>
+
+        <div class="coordinates">
+            Current Position: <span id="position">(8, 8)</span>
+        </div>
+
+        <div class="canvas-container">
+            <div id="container" class="container"></div>
+        </div>
+
+        <div class="controls">
+            <button id="reset" onclick="reset()">Reset Canvas</button>
+            <button id="toggleDraw" onclick="toggleDrawMode()">Draw Mode: ON</button>
+        </div>
+
+        <div class="instructions">
+            <h3>Controls</h3>
+            <div class="key-group">
+                <div class="key-item">
+                    <div class="key">W</div>
+                    <div class="key-description">Move Up</div>
+                </div>
+                <div class="key-item">
+                    <div class="key">A</div>
+                    <div class="key-description">Move Left</div>
+                </div>
+                <div class="key-item">
+                    <div class="key">S</div>
+                    <div class="key-description">Move Down</div>
+                </div>
+                <div class="key-item">
+                    <div class="key">D</div>
+                    <div class="key-description">Move Right</div>
+                </div>
+                <div class="key-item">
+                    <div class="key">ENTER</div>
+                    <div class="key-description">Draw/Erase</div>
+                </div>
+                <div class="key-item">
+                    <div class="key">SPACE</div>
+                    <div class="key-description">Toggle Draw</div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/3-typing-game/Typing-Game/script.js b/3-typing-game/Typing-Game/script.js
@@ -0,0 +1,154 @@
+// Game variables
+const arr = [];
+let currentRow = 8;
+let currentCol = 8;
+let drawMode = true;
+const container = document.getElementById('container');
+const positionElement = document.getElementById('position');
+const toggleDrawButton = document.getElementById('toggleDraw');
+
+// Initialize the pixel grid
+function initializeGrid() {
+    for (let i = 0; i < 16; i++) {
+        const row = document.createElement('div');
+        const rowArr = [];
+
+        for (let j = 0; j < 16; j++) {
+            const pixel = document.createElement('div');
+            pixel.className = 'pixel';
+            pixel.dataset.row = i;
+            pixel.dataset.col = j;
+
+            // Add click event for manual drawing
+            pixel.addEventListener('click', () => {
+                moveToPosition(i, j);
+                changeColor(i, j);
+            });
+
+            row.appendChild(pixel);
+            rowArr.push(pixel);
+        }
+
+        arr.push(rowArr);
+        container.appendChild(row);
+    }
+
+    // Set initial focus
+    focusOn(currentRow, currentCol);
+    updatePositionDisplay();
+}
+
+// Move cursor to specific position
+function moveToPosition(row, col) {
+    unFocus(currentRow, currentCol);
+    currentRow = row;
+    currentCol = col;
+    focusOn(currentRow, currentCol);
+    updatePositionDisplay();
+}
+
+// Change color of a pixel
+function changeColor(row, col) {
+    const pixel = arr[row][col];
+    if (drawMode) {
+        pixel.style.background = 'black';
+    } else {
+        pixel.style.background = 'white';
+    }
+}
+
+// Focus on a specific pixel
+function focusOn(row, col) {
+    const pixel = arr[row][col];
+    pixel.classList.add('focused');
+}
+
+// Remove focus from a pixel
+function unFocus(row, col) {
+    const pixel = arr[row][col];
+    pixel.classList.remove('focused');
+}
+
+// Update position display
+function updatePositionDisplay() {
+    positionElement.textContent = `(${currentRow}, ${currentCol})`;
+}
+
+// Toggle draw/erase mode
+function toggleDrawMode() {
+    drawMode = !drawMode;
+    toggleDrawButton.textContent = `Draw Mode: ${drawMode ? 'ON' : 'OFF'}`;
+    toggleDrawButton.style.background = drawMode ? '#28a745' : '#6c757d';
+}
+
+// Reset the canvas
+function reset() {
+    arr.forEach(row => {
+        row.forEach(pixel => {
+            pixel.style.background = 'white';
+        });
+    });
+
+    // Reset focus to center
+    unFocus(currentRow, currentCol);
+    currentRow = 8;
+    currentCol = 8;
+    focusOn(currentRow, currentCol);
+    updatePositionDisplay();
+
+    // Reset draw mode
+    drawMode = true;
+    toggleDrawButton.textContent = 'Draw Mode: ON';
+    toggleDrawButton.style.background = '#28a745';
+
+    // Remove focus from reset button
+    const resetElement = document.getElementById('reset');
+    resetElement.blur();
+}
+
+// Keyboard event handler
+document.addEventListener('keydown', (e) => {
+    const key = e.key.toLowerCase();
+
+    switch (key) {
+        case 'w':
+            if (currentRow > 0) {
+                moveToPosition(currentRow - 1, currentCol);
+            }
+            break;
+
+        case 's':
+            if (currentRow < 15) {
+                moveToPosition(currentRow + 1, currentCol);
+            }
+            break;
+
+        case 'a':
+            if (currentCol > 0) {
+                moveToPosition(currentRow, currentCol - 1);
+            }
+            break;
+
+        case 'd':
+            if (currentCol < 15) {
+                moveToPosition(currentRow, currentCol + 1);
+            }
+            break;
+
+        case 'enter':
+            changeColor(currentRow, currentCol);
+            break;
+
+        case ' ':
+            e.preventDefault(); // Prevent space from scrolling
+            toggleDrawMode();
+            break;
+
+        case 'r':
+            reset();
+            break;
+    }
+});
+
+// Initialize the game when page loads
+window.addEventListener('load', initializeGrid);
diff --git a/3-typing-game/Typing-Game/style.css b/3-typing-game/Typing-Game/style.css
@@ -0,0 +1,114 @@
+body {
+    margin: 0;
+    padding: 0;
+    font-family: Arial, sans-serif;
+    background-color: #f4f4f9;
+    text-align: center;
+}
+
+h1 {
+    color: #333;
+    margin-top: 20px;
+}
+
+.subtitle {
+    color: #666;
+    font-size: 14px;
+}
+
+.game-container {
+    max-width: 600px;
+    margin: 0 auto;
+    padding: 20px;
+    background: white;
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0,0,0,0.1);
+}
+
+.coordinates {
+    margin: 10px 0;
+    font-weight: bold;
+}
+
+.canvas-container {
+    display: flex;
+    justify-content: center;
+    margin: 15px 0;
+}
+
+.container {
+    display: grid;
+    grid-template-columns: repeat(16, 20px);
+    grid-template-rows: repeat(16, 20px);
+    gap: 2px;
+    background-color: #ddd;
+    padding: 5px;
+    border: 2px solid #333;
+}
+
+.pixel {
+    width: 20px;
+    height: 20px;
+    background-color: white;
+    border: 1px solid #ccc;
+    cursor: pointer;
+    transition: background 0.2s;
+}
+
+.focused {
+    border: 2px solid red;
+}
+
+.controls {
+    margin-top: 10px;
+}
+
+button {
+    padding: 8px 15px;
+    margin: 5px;
+    border: none;
+    border-radius: 5px;
+    background-color: #28a745;
+    color: white;
+    font-size: 14px;
+    cursor: pointer;
+}
+
+button:hover {
+    opacity: 0.9;
+}
+
+.instructions {
+    margin-top: 20px;
+    text-align: left;
+}
+
+.instructions h3 {
+    margin-bottom: 10px;
+    color: #333;
+}
+
+.key-group {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+}
+
+.key-item {
+    text-align: center;
+    margin: 5px;
+}
+
+.key {
+    display: inline-block;
+    background-color: #eee;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    padding: 5px 10px;
+    font-weight: bold;
+}
+
+.key-description {
+    font-size: 12px;
+    color: #555;
+}