AI game creator

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

No:26303

←

Prev Next

→

Snake Game
Developer User12991｜Date and time 23/11/28 21:54:43
Build time 109.764 sec｜Game capacity 5.504KB｜

Script

Sure! Here's a simple implementation of the Snake Game in a single HTML file using JavaScript:

To play the game, you can open the HTML file in a web browser (preferably on a smartphone) and use the arrow keys to control the snake. The objective is to eat the red food items, growing the snake body, and avoid hitting the boundaries or the snake's own body.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's a simple implementation of the Snake Game in a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
    <style>
        #game-board {
            border: 1px solid #000;
            width: 200px;
            height: 200px;
            position: relative;
            overflow: hidden;
        }

.snake, .food {
            width: 10px;
            height: 10px;
            position: absolute;
        }

.snake {
            background: #000;
        }

.food {
            background: #f00;
        }
    </style>
</head>
<body>
    <div id="game-board"></div>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const gameBoard = document.getElementById('game-board');
            const blockSize = 10; // size of each block in pixels

const state = {
                snake: [{ x: 0, y: 0 }], // initial snake position
                food: { x: 0, y: 0 }, // initial food position
                direction: 'right', // initial direction
                intervalId: null, // interval ID for game loop
            };

function generateFood() {
                const x = Math.floor(Math.random() * (gameBoard.clientWidth / blockSize));
                const y = Math.floor(Math.random() * (gameBoard.clientHeight / blockSize));
                state.food = { x, y };
                createFood();
            }

function moveSnake() {
                const head = { ...state.snake[0] };
                switch (state.direction) {
                    case 'up':
                        head.y -= 1;
                        break;
                    case 'down':
                        head.y += 1;
                        break;
                    case 'left':
                        head.x -= 1;
                        break;
                    case 'right':
                        head.x += 1;
                        break;
                }

state.snake.unshift(head);
                if (head.x === state.food.x && head.y === state.food.y) {
                    gameBoard.removeChild(gameBoard.lastChild);
                    generateFood();
                } else {
                    state.snake.pop();
                }
            }

function render() {
                // Remove old snake and food elements
                while (gameBoard.firstChild) {
                    gameBoard.removeChild(gameBoard.firstChild);
                }

// Create new snake and food elements
                createSnake();
                createFood();
            }

function startGame() {
                generateFood();
                state.intervalId = setInterval(() => {
                    moveSnake();
                    checkCollision();
                    render();
                }, 200); // game loop interval
            }

document.addEventListener('keydown', handleKeyDown);
            startGame();
        });
    </script>
</body>
</html>
```