AI game creator

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

No:45868

←

Prev Next

→

Snake Game
Developer User18896｜Date and time 24/2/21 23:04:39
Build time 16.499 sec｜Game capacity 3.482KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

```
<!DOCTYPE html>
<html>
<head>
    <title>Snake Game</title>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400" style="border:1px solid black;"></canvas>
    
    <script>
        const canvas = document.getElementById("gameCanvas");
        const ctx = canvas.getContext("2d");

const snakeSize = 10;
        let snake = [
            { x: 200, y: 200 },
            { x: 190, y: 200 },
            { x: 180, y: 200 }
        ];

let dx = 10;
        let dy = 0;

let foodX;
        let foodY;

function drawSnakePart(part) {
            ctx.fillStyle = "green";
            ctx.fillRect(part.x, part.y, snakeSize, snakeSize);
        }

function drawSnake() {
            snake.forEach(drawSnakePart);
        }

function drawFood() {
            ctx.fillStyle = "red";
            ctx.fillRect(foodX, foodY, snakeSize, snakeSize);
        }

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

snake.unshift(head);

const didEatFood = snake[0].x === foodX && snake[0].y === foodY;
            if (didEatFood) {
                generateFood();
            } else {
                snake.pop();
            }
        }

function changeDirection(event) {
            const LEFT_KEY = 37;
            const RIGHT_KEY = 39;
            const UP_KEY = 38;
            const DOWN_KEY = 40;

const keyPressed = event.keyCode;
            const goingUp = dy === -10;
            const goingDown = dy === 10;
            const goingRight = dx === 10;
            const goingLeft = dx === -10;

if (keyPressed === LEFT_KEY && !goingRight) {
                dx = -10;
                dy = 0;
            }

if (keyPressed === UP_KEY && !goingDown) {
                dx = 0;
                dy = -10;
            }

if (keyPressed === RIGHT_KEY && !goingLeft) {
                dx = 10;
                dy = 0;
            }

if (keyPressed === DOWN_KEY && !goingUp) {
                dx = 0;
                dy = 10;
            }
        }

function drawGame() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawFood();
            drawSnake();
            moveSnake();

const didEatSelf = snake.slice(1).some(
                (part) => part.x === snake[0].x && part.y === snake[0].y
            );

if (didEatSelf || snake[0].x >= canvas.width || snake[0].x < 0 || snake[0].y >= canvas.height || snake[0].y < 0) {
                alert("Game Over!");
                snake = [
                    { x: 200, y: 200 },
                    { x: 190, y: 200 },
                    { x: 180, y: 200 }
                ];
                dx = 10;
                dy = 0;
            }

setTimeout(() => {
                requestAnimationFrame(drawGame);
            }, 100);
        }

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