AI game creator

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

No:36833

←

Prev Next

→

Snake 2
Developer User16879｜Date and time 24/1/18 17:53:44
Build time 15.837 sec｜Game capacity 4.163KB｜

Script

Sure! Here's a simple implementation of the classic Snake game using JavaScript, enclosed in script tags within a single HTML file. The game will be playable on a smartphone and will use pictograms for a better user experience:

You can copy and paste the above code into a single HTML file (e.g., `snake.html`) and open it in any web browser to play the Snake game. The game canvas will have dimensions of 400x400 pixels, and you can control the snake's movement using the arrow keys on your smartphone's keyboard. The snake (represented by red squares) will grow in size when it eats the food (green square), and the game will end if the snake collides with the walls or itself. Enjoy playing the game!

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Snake Game</title>
    <style>
        * {
            box-sizing: border-box;
        }

canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

const tileSize = 20;
            const width = canvas.width / tileSize;
            const height = canvas.height / tileSize;

let snake = [{ x: 10, y: 10 }];
            let food = { x: getRandomNumber(width), y: getRandomNumber(height) };
            let dx = 0;
            let dy = 0;
            let score = 0;

// Generate a random number within a range
            function getRandomNumber(range) {
                return Math.floor(Math.random() * range);
            }

// Handle keyboard arrow key events
            function handleKeyboardEvents(event) {
                const keyCode = event.keyCode;
                if (keyCode === 37 && dx !== 1) { // Left arrow key
                    dx = -1;
                    dy = 0;
                } else if (keyCode === 38 && dy !== 1) { // Up arrow key
                    dx = 0;
                    dy = -1;
                } else if (keyCode === 39 && dx !== -1) { // Right arrow key
                    dx = 1;
                    dy = 0;
                } else if (keyCode === 40 && dy !== -1) { // Down arrow key
                    dx = 0;
                    dy = 1;
                }
            }

// Update the game state
            function update() {
                // Move the snake
                const head = { x: snake[0].x + dx, y: snake[0].y + dy };
                snake.unshift(head);

// Check for collision with the food
                if (head.x === food.x && head.y === food.y) {
                    score++;
                    food = { x: getRandomNumber(width), y: getRandomNumber(height) };
                } else {
                    snake.pop();
                }

// Check for collision with the walls or itself
                if (
                    head.x < 0 || head.x >= width ||
                    head.y < 0 || head.y >= height ||
                    snake.some((part, index) => index !== 0 && part.x === head.x && part.y === head.y)
                ) {
                    clearInterval(gameInterval);
                    alert("Game Over! Score: " + score);
                    return;
                }

// Draw the game elements
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                ctx.fillStyle = "#FF0000"; // Snake color
                snake.forEach((part) => {
                    ctx.fillRect(part.x * tileSize, part.y * tileSize, tileSize, tileSize);
                });

ctx.fillStyle = "#00FF00"; // Food color
                ctx.fillRect(food.x * tileSize, food.y * tileSize, tileSize, tileSize);
            }

// Start the game loop
            const gameInterval = setInterval(update, 100);

// Listen for keyboard arrow key events
            document.addEventListener("keydown", handleKeyboardEvents);
        };
    </script>
</body>
</html>
```