AI game creator

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

No:10011

←

Prev Next

→

Snake Game
Developer User4463｜Date and time 23/7/28 20:18:46
Build time 26.537 sec｜Game capacity 4.401KB｜

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

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

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

function initializeGame() {
            createSnake();
            createFood();
            interval = setInterval(moveSnake, 150);
        }

function createSnake() {
            snake.forEach(segment => {
                var snakeSegment = document.createElement('div');
                snakeSegment.classList.add('snake');
                snakeSegment.style.left = segment.x * blockSize + 'px';
                snakeSegment.style.top = segment.y * blockSize + 'px';
                gameBoard.appendChild(snakeSegment);
            });
        }

function createFood() {
            var foodElement = document.createElement('div');
            foodElement.classList.add('food');
            foodElement.style.left = food.x * blockSize + 'px';
            foodElement.style.top = food.y * blockSize + 'px';
            gameBoard.appendChild(foodElement);
        }

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

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

if (head.x === food.x && head.y === food.y) {
                snake.push({});
                createFood();
            }

if (
                head.x < 0 ||
                head.x >= gridSize ||
                head.y < 0 ||
                head.y >= gridSize ||
                checkCollision(head)
            ) {
                clearInterval(interval);
                alert('Game Over');
                return;
            }

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

updateSnake();
        }

function updateSnake() {
            var snakeSegments = gameBoard.getElementsByClassName('snake');
            for (var i = 0; i < snake.length; i++) {
                snakeSegments[i].style.left = snake[i].x * blockSize + 'px';
                snakeSegments[i].style.top = snake[i].y * blockSize + 'px';
            }
        }

initializeGame();
        document.addEventListener('keydown', handleKeyPress);
    </script>
</body>
</html>