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

No:27215

←

Prev Next

→

Snake Game
Developer User13528｜Date and time 23/12/5 5:12:50
Build time 71.641 sec｜Game capacity 5.076KB｜

Script

Snake Game

←

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>
        #game-board {
            width: 300px;
            height: 300px;
            border: 1px solid black;
            position: relative;
            background-color: white;
        }

.snake {
            width: 20px;
            height: 20px;
            position: absolute;
            border: 1px solid black;
            background-color: green;
        }

.food {
            width: 20px;
            height: 20px;
            position: absolute;
            border: 1px solid black;
            background-color: red;
        }
    </style>
</head>
<body>
<h1> Snake Game </h1>
<div id="game-board">
    
</div>

function createSnakeElement(x, y) {
            const snakeElement = document.createElement('div');
            snakeElement.className = 'snake';
            snakeElement.style.left = x + 'px';
            snakeElement.style.top = y + 'px';
            gameBoard.appendChild(snakeElement);
        }

function createFoodElement(x, y) {
            const foodElement = document.createElement('div');
            foodElement.className = 'food';
            foodElement.style.left = x + 'px';
            foodElement.style.top = y + 'px';
            gameBoard.appendChild(foodElement);
        }

function updateScore() {
            document.getElementById('score').textContent = score;
        }

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

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

snake.unshift(head);

if (head.x === food.x && head.y === food.y) {
                score++;
                updateScore();
                generateFood();
            } else {
                snake.pop();
            }

renderSnake();
            handleCollision();
        }

function renderSnake() {
            gameBoard.innerHTML = '';

for (let i = 0; i < snake.length; i++) {
                createSnakeElement(snake[i].x, snake[i].y);
            }

createFoodElement(food.x, food.y);
        }

function handleDirection(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;
            }
        }

function handleCollision() {
            const head = snake[0];

// Check if snake hits the borders
            if (
                head.x < 0 ||
                head.x >= gameBoard.offsetWidth ||
                head.y < 0 ||
                head.y >= gameBoard.offsetHeight
            ) {
                clearInterval(interval);
                alert('Game Over! Your score is ' + score);
                resetGame();
                return;
            }

// Check if snake hits itself
            for (let i = 1; i < snake.length; i++) {
                if (head.x === snake[i].x && head.y === snake[i].y) {
                    clearInterval(interval);
                    alert('Game Over! Your score is ' + score);
                    resetGame();
                    return;
                }
            }
        }

function generateFood() {
            food.x = Math.floor(Math.random() * (gameBoard.offsetWidth / 20)) * 20;
            food.y = Math.floor(Math.random() * (gameBoard.offsetHeight / 20)) * 20;
        }

document.addEventListener('keydown', handleDirection);
        resetGame();
    });
</script>
</body>
</html>