Click here for free DL of the app version that can save data.

No:10429

←

Prev Next

→

Etch a sketch
Developer Micah｜Date and time 23/7/31 11:15:04
Build time 18.569 sec｜Game capacity 2.394KB｜

Script

Sure! Here's an example of a simple Etch-a-Sketch game implemented in a single HTML file using JavaScript:

Etch-a-Sketch Game

To play the game, open this HTML file in a web browser (preferably on a smartphone for touch operation). It will present you with a grid of squares that represents the Etch-a-Sketch canvas. You can tap on any square to draw on it using the default color (black). To change the color, you would need to call the `changeColor` function from the browser console, passing the desired color as an argument (e.g., `changeColor('red')` for red color). To clear the sketch grid, you can call the `clearGrid` function from the browser console.

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

Click here for free DL of the app version that can save data.

Sure! Here's an example of a simple Etch-a-Sketch game implemented in a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Etch-a-Sketch Game</title>
    <style>
        /* CSS to style the game container */
        #game-container {
            display: flex;
            flex-wrap: wrap;
            width: 310px;
            height: 310px;
            border: 1px solid #000;
        }

/* CSS to style the squares on the Etch-a-Sketch */
        .square {
            width: 30px;
            height: 30px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <h1>Etch-a-Sketch Game</h1>
    <div id="game-container"></div>

// Create the game container and squares
        const gameContainer = document.getElementById('game-container');
        for (let i = 0; i < gridSize * gridSize; i++) {
            const square = document.createElement('div');
            square.className = 'square';
            gameContainer.appendChild(square);
        }

// Track the current drawing color
        let currentColor = 'black';

// Add event listeners to handle drawing on the squares
        const squares = document.querySelectorAll('.square');
        squares.forEach(square => {
            square.addEventListener('click', function() {
                this.style.backgroundColor = currentColor;
            });
        });

// Function to clear the sketch grid
        function clearGrid() {
            squares.forEach(square => {
                square.style.backgroundColor = '';
            });
        }

// Function to change the drawing color
        function changeColor(color) {
            currentColor = color;
        }
    </script>
</body>
</html>
```