AI game creator

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

No:52318

112

←

Prev Next

→

make snake
Developer User21843｜Date and time 24/3/20 14:55:25
Build time 6.92 sec｜Game capacity 2.252KB｜

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"></canvas>

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

function drawSnakePart(snakePart) {
            ctx.fillStyle = 'green';
            ctx.fillRect(snakePart.x, snakePart.y, snakeSize, snakeSize);
            ctx.strokeStyle = 'darkgreen';
            ctx.strokeRect(snakePart.x, snakePart.y, snakeSize, snakeSize);
        }

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

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

function clearCanvas() {
            ctx.fillStyle = 'lightgrey';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
        }

function main() {
            setTimeout(function onTick() {
                clearCanvas();
                drawSnake();
                advanceSnake();
                main();
            }, 100);
        }

document.addEventListener('keydown', changeDirection);

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

if (event.keyCode === LEFT_KEY && dx === 0) {
                dx = -snakeSize;
                dy = 0;
            }

if (event.keyCode === RIGHT_KEY && dx === 0) {
                dx = snakeSize;
                dy = 0;
            }

if (event.keyCode === UP_KEY && dy === 0) {
                dx = 0;
                dy = -snakeSize;
            }

if (event.keyCode === DOWN_KEY && dy === 0) {
                dx = 0;
                dy = snakeSize;
            }
        }

main();
    </script>
</body>
</html>