AI game creator

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

No:52231

←

Prev Next

→

Snake Game
Developer Rb｜Date and time 24/3/19 10:20:38
Build time 9.013 sec｜Game capacity 2.375KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Snake Game</title>
<style>
    canvas {
        border: 1px solid black;
        display: block;
        margin: 0 auto;
    }
</style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="400"></canvas>
<script>
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");

const box = 20;
let snake = [{x: 200, y: 200}];
let fruit = {x: 0, y: 0};
let direction = "right";

function drawSnake() {
    ctx.fillStyle = "green";
    snake.forEach(segment => {
        ctx.fillRect(segment.x, segment.y, box, box);
    });
}

function drawFruit() {
    ctx.fillStyle = "red";
    ctx.fillRect(fruit.x, fruit.y, box, box);
}

function generateFruit() {
    fruit.x = Math.floor(Math.random() * 20) * box;
    fruit.y = Math.floor(Math.random() * 20) * box;
}

function updateGame() {
    const head = {x: snake[0].x, y: snake[0].y};

switch(direction) {
        case "up":
            head.y -= box;
            break;
        case "down":
            head.y += box;
            break;
        case "left":
            head.x -= box;
            break;
        case "right":
            head.x += box;
            break;
    }

if (head.x === fruit.x && head.y === fruit.y) {
        generateFruit();
    } else {
        snake.pop();
    }

snake.unshift(head);

if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height || snake.some(segment => segment.x === head.x && segment.y === head.y)) {
        clearInterval(gameLoop);
        alert("Game Over!");
        location.reload();
    }

ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawFruit();
    drawSnake();
}

generateFruit();
let gameLoop = setInterval(updateGame, 100);

document.addEventListener("keydown", event => {
    switch(event.key) {
        case "ArrowUp":
            if (direction !== "down") direction = "up";
            break;
        case "ArrowDown":
            if (direction !== "up") direction = "down";
            break;
        case "ArrowLeft":
            if (direction !== "right") direction = "left";
            break;
        case "ArrowRight":
            if (direction !== "left") direction = "right";
            break;
    }
});
</script>
</body>
</html>