Snake game 2's game | AI game creator

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

No:52578

280

Snake game 2
Developer Winnerweiner2113｜Date and time 24/3/23 6:42:01
Build time 14.55 sec｜Game capacity 3.216KB｜

→ 　

0　

1　

　
　
　
　

[PR]現在の本の売れ筋ランキング

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
<head>
    <title>Snake Game</title>
    <style>
        #game-board {
            width: 300px;
            height: 300px;
            border: 1px solid black;
            position: relative;
        }
        .snake {
            width: 10px;
            height: 10px;
            background-color: green;
            position: absolute;
        }
        #food {
            width: 10px;
            height: 10px;
            background-color: red;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="game-board"></div>
    <script>
        let snake = [{x: 10, y: 10}];
        let dx = 0;
        let dy = 0;
        let foodX = Math.floor(Math.random() * 30) * 10;
        let foodY = Math.floor(Math.random() * 30) * 10;
        let gameBoard = document.getElementById('game-board');

function drawSnake() {
            gameBoard.innerHTML = '';
            snake.forEach(segment => {
                let snakeSegment = document.createElement('div');
                snakeSegment.className = 'snake';
                snakeSegment.style.left = `${segment.x}px`;
                snakeSegment.style.top = `${segment.y}px`;
                gameBoard.appendChild(snakeSegment);
            });
        }

function drawFood() {
            let food = document.createElement('div');
            food.id = 'food';
            food.style.left = `${foodX}px`;
            food.style.top = `${foodY}px`;
            gameBoard.appendChild(food);
        }

function moveSnake() {
            let head = {x: snake[0].x + dx, y: snake[0].y + dy};
            snake.unshift(head);
            if (head.x === foodX && head.y === foodY) {
                foodX = Math.floor(Math.random() * 30) * 10;
                foodY = Math.floor(Math.random() * 30) * 10;
            } else {
                snake.pop();
            }
        }

function checkCollision() {
            if (snake[0].x < 0 || snake[0].x >= 300 || snake[0].y < 0 || snake[0].y >= 300) {
                clearInterval(gameInterval);
                alert('Game Over! Your score was ' + (snake.length - 1));
            }
            for (let i = 1; i < snake.length; i++) {
                if (snake[i].x === snake[0].x && snake[i].y === snake[0].y) {
                    clearInterval(gameInterval);
                    alert('Game Over! Your score was ' + (snake.length - 1));
                }
            }
        }

function updateGame() {
            moveSnake();
            checkCollision();
            drawSnake();
            drawFood();
        }

document.addEventListener('keydown', e => {
            if (e.key === 'ArrowUp' && dy !== 10) {
                dx = 0;
                dy = -10;
            } else if (e.key === 'ArrowDown' && dy !== -10) {
                dx = 0;
                dy = 10;
            } else if (e.key === 'ArrowLeft' && dx !== 10) {
                dx = -10;
                dy = 0;
            } else if (e.key === 'ArrowRight' && dx !== -10) {
                dx = 10;
                dy = 0;
            }
        });

let gameInterval = setInterval(updateGame, 100);
    </script>
</body>
</html>