AI game creator

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

No:48112

←

Prev Next

→

Snake.io
Developer User19107｜Date and time 24/3/1 9:10:46
Build time 6.591 sec｜Game capacity 1.598KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

<!DOCTYPE html>
<html>
<head>
<title>Snake.io</title>
<style>
    body {
        text-align: center;
    }
    canvas {
        border: 1px solid black;
        background-color: lightgrey;
    }
</style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="400"></canvas>

let snake = [
        { x: 10, y: 10 },
    ];
    let direction = 'right';

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

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

if (direction === 'right') head.x += 10;
        if (direction === 'left') head.x -= 10;
        if (direction === 'down') head.y += 10;
        if (direction === 'up') head.y -= 10;

snake.unshift(head);
        snake.pop();
    }

function changeDirection(e) {
        const keyPressed = e.keyCode;
        if (keyPressed === 37 && direction !== 'right') direction = 'left';
        if (keyPressed === 38 && direction !== 'down') direction = 'up';
        if (keyPressed === 39 && direction !== 'left') direction = 'right';
        if (keyPressed === 40 && direction !== 'up') direction = 'down';
    }

function gameLoop() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        drawSnake();
        moveSnake();
    }

document.addEventListener('keydown', changeDirection);
    setInterval(gameLoop, 100);
</script>
</body>
</html>