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

No:10012

←

Prev Next

→

Snake Game
Developer User4463｜Date and time 23/7/28 20:18:59
Build time 24.369 sec｜Game capacity 3.426KB｜

Script

Sure! Here's a simple implementation of the classic Snake Game using JavaScript and HTML:

Snake Game

You can copy and save the above code as a standalone HTML file. When you open the file in a web browser, you'll see a simple Snake Game. Use the arrow keys to control the direction of the snake and try to eat as much food as possible without colliding with the edges of the game board or the snake's own body. The game will display your score and end when you collide with something. Enjoy playing!

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's a simple implementation of the classic Snake Game using JavaScript and HTML:

```html
<!DOCTYPE html>
<html>
<head>
    <style>
        #game-board {
            width: 400px;
            height: 400px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <h1>Snake Game</h1>
    <div id="game-board"></div>

const canvas = document.getElementById("game-board");
        const context = canvas.getContext("2d");

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

function getRandomNumber() {
            return Math.floor(Math.random() * (canvas.width / tileSize));
        }

function drawSnake() {
            snake.forEach((segment) => {
                context.fillStyle = "#000";
                context.fillRect(segment.x * tileSize, segment.y * tileSize, tileSize, tileSize);
            });
        }

function drawFood() {
            context.fillStyle = "#F00";
            context.fillRect(food.x * tileSize, food.y * tileSize, tileSize, tileSize);
        }

function moveSnake() {
            const head = { x: snake[0].x + dx, y: snake[0].y + dy };
            snake.unshift(head);

if (snake[0].x === food.x && snake[0].y === food.y) {
                score++;
                food = { x: getRandomNumber(), y: getRandomNumber() };
            } else {
                snake.pop();
            }
        }

function checkCollision() {
            if (
                snake[0].x < 0 ||
                snake[0].y < 0 ||
                snake[0].x >= canvas.width / tileSize ||
                snake[0].y >= canvas.height / tileSize ||
                snake.slice(1).some((segment) => segment.x === snake[0].x && segment.y === snake[0].y)
            ) {
                clearInterval(gameLoop);
                alert("Game Over! Your score is: " + score);
            }
        }

function clearCanvas() {
            context.clearRect(0, 0, canvas.width, canvas.height);
        }

function drawGame() {
            clearCanvas();
            drawSnake();
            drawFood();
            moveSnake();
            checkCollision();
        }

const gameLoop = setInterval(drawGame, speed);

document.addEventListener("keydown", handleKeydown);
    </script>
</body>
</html>
```