AI game creator

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

No:24047

←

Prev Next

→

Snake Game
Developer User11275｜Date and time 23/11/5 13:51:40
Build time 124.388 sec｜Game capacity 4.587KB｜

Script

Sure, here's an example of a simple Snake Game implemented in a single HTML file using JavaScript:

To play the game, simply copy the above code into a new HTML file and open it in a web browser. The game will start immediately and you can control the snake using the arrow keys on your smartphone. The objective of the game is to eat the red food squares without colliding with the boundaries or yourself. Enjoy playing the Snake Game!

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

Sure, here's an example of a simple Snake Game implemented in a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Snake Game</title>
    <style>
        #game-board {
            width: 200px;
            height: 200px;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div id="game-board"></div>

// Setup the game
        function startGame() {
            createFood();
            setInterval(moveSnake, gameSpeed);
        }

// Create random food position
        function createFood() {
            food = {
                x: Math.floor(Math.random() * canvasSize),
                y: Math.floor(Math.random() * canvasSize)
            };
        }

// Move the snake
        function moveSnake() {
            // Update snake position based on the direction
            var head = { x: snake[0].x, y: snake[0].y };
            if (direction === 'right') head.x++;
            else if (direction === 'left') head.x--;
            else if (direction === 'up') head.y--;
            else if (direction === 'down') head.y++;

// Check if snake hits the boundary or itself
            if (head.x < 0 || head.y < 0 || head.x >= canvasSize || head.y >= canvasSize || isCollision(head)) {
                alert('Game Over');
                location.reload();  // Restart the game
                return;
            }

snake.unshift(head);  // Add new head to the snake

// Check if snake eats the food
            if (head.x === food.x && head.y === food.y) {
                createFood();  // Create new food
            } else {
                snake.pop();  // Remove tail if no food eaten
            }

drawGame();
        }

// Draw the game board
        function drawGame() {
            var gameBoard = document.getElementById('game-board');
            gameBoard.innerHTML = '';

// Draw the snake
            snake.forEach(function (segment) {
                var square = document.createElement('div');
                square.style.width = square.style.height = canvasSize + 'px';
                square.style.background = 'black';
                square.style.position = 'absolute';
                square.style.left = (segment.x * canvasSize) + 'px';
                square.style.top = (segment.y * canvasSize) + 'px';
                gameBoard.appendChild(square);
            });

// Draw the food
            var foodSquare = document.createElement('div');
            foodSquare.style.width = foodSquare.style.height = canvasSize + 'px';
            foodSquare.style.background = 'red';
            foodSquare.style.position = 'absolute';
            foodSquare.style.left = (food.x * canvasSize) + 'px';
            foodSquare.style.top = (food.y * canvasSize) + 'px';
            gameBoard.appendChild(foodSquare);
        }

// Check for collision with itself
        function isCollision(head) {
            for (var i = 1; i < snake.length; i++) {
                if (snake[i].x === head.x && snake[i].y === head.y) {
                    return true;
                }
            }
            return false;
        }

// Handle keyboard input to change snake direction
        document.addEventListener('keydown', function (event) {
            if (event.key === 'ArrowUp' && direction !== 'down') {
                direction = 'up';
            } else if (event.key === 'ArrowDown' && direction !== 'up') {
                direction = 'down';
            } else if (event.key === 'ArrowRight' && direction !== 'left') {
                direction = 'right';
            } else if (event.key === 'ArrowLeft' && direction !== 'right') {
                direction = 'left';
            }
        });

startGame();  // Start the game
    </script>
</body>
</html>
```