AI game creator

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

No:46215

111

←

Prev Next

→

Snake Game
Developer User18896｜Date and time 24/2/24 1:28:26
Build time 11.92 sec｜Game capacity 2.894KB｜

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>
    <style>
        canvas {
            border: 1px solid black;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

const gridSize = 20;
        const snakeColor = '#00ff00';
        const fruitColor = '#ff0000';

let snake = [{x: 200, y: 200}];
        let direction = 'right';
        let fruitPos = {x: 100, y: 100};

function drawSnake() {
            ctx.fillStyle = snakeColor;
            snake.forEach(segment => {
                ctx.fillRect(segment.x, segment.y, gridSize, gridSize);
            });
        }

function drawFruit() {
            ctx.fillStyle = fruitColor;
            ctx.fillRect(fruitPos.x, fruitPos.y, gridSize, gridSize);
        }

function updateGame() {
            const head = {...snake[0]};

if (direction === 'left') {
                head.x -= gridSize;
            } else if (direction === 'up') {
                head.y -= gridSize;
            } else if (direction === 'right') {
                head.x += gridSize;
            } else if (direction === 'down') {
                head.y += gridSize;
            }

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

checkCollision();
        }

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

drawSnake();
            drawFruit();
        }

function changeDirection(e) {
            const keyPressed = e.key;

if ((keyPressed === 'ArrowLeft' || keyPressed === 'a') && direction !== 'right') {
                direction = 'left';
            } else if ((keyPressed === 'ArrowUp' || keyPressed === 'w') && direction !== 'down') {
                direction = 'up';
            } else if ((keyPressed === 'ArrowRight' || keyPressed === 'd') && direction !== 'left') {
                direction = 'right';
            } else if ((keyPressed === 'ArrowDown' || keyPressed === 's') && direction !== 'up') {
                direction = 'down';
            }
        }

function gameLoop() {
            updateGame();
            drawGame();
        }

setInterval(gameLoop, 100);

document.addEventListener('keydown', changeDirection);
    </script>

</body>
</html>