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

No:26940

←

Prev Next

→

Snake Game
Developer User13334｜Date and time 23/12/3 9:18:31
Build time 49.566 sec｜Game capacity 4.65KB｜

Script

Sure! Here's a simple implementation of the classic Snake game using JavaScript and HTML, enclosed in script tags within a single HTML file.

Snake Game

To play the game, simply save the above code in an HTML file (e.g., "snake_game.html") and open it in a web browser (preferably on your smartphone). The game will start automatically, and you can use the arrow keys to control the direction of the snake. The objective is to eat the food and avoid collision with the walls or the snake's body. Have fun playing the Snake game!

←

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 classic Snake game using JavaScript and HTML, enclosed in script tags within a single HTML file.

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

const DIRECTIONS = {
            37: { x: -1, y: 0 }, // Left
            38: { x: 0, y: -1 }, // Up
            39: { x: 1, y: 0 }, // Right
            40: { x: 0, y: 1 }  // Down
        };

let snake = [];
        let direction = DIRECTIONS[39]; // Initial direction (right)
        let food = {};
        let gameLoop;

function createGameBoard() {
            const gameBoard = document.getElementById("game-board");
            gameBoard.style.cssText = `width: ${boardSize * 20}px; height: ${boardSize * 20}px;`;

for (let y = 0; y < boardSize; y++) {
                for (let x = 0; x < boardSize; x++) {
                    const cell = document.createElement("div");
                    cell.classList.add("cell");
                    gameBoard.appendChild(cell);
                }
            }
        }

function startGame() {
            createGameBoard();
            createSnake();
            createFood();

gameLoop = setInterval(moveSnake, 200);
        }

snake.forEach(segment => getCell(segment.x, segment.y).classList.add("snake"));
        }

function createFood() {
            const x = getRandomPosition();
            const y = getRandomPosition();
            food = { x, y };
            getCell(x, y).classList.add("food");
        }

function getRandomPosition() {
            return Math.floor(Math.random() * boardSize);
        }

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

// Check for collision with walls or snake body
            if (newHead.x < 0 || newHead.x >= boardSize || newHead.y < 0 || newHead.y >= boardSize ||
                snake.some(segment => segment.x === newHead.x && segment.y === newHead.y)) {
                clearInterval(gameLoop);
                alert("Game Over!");
                return;
            }

snake.unshift(newHead);

if (newHead.x === food.x && newHead.y === food.y) {
                getCell(food.x, food.y).classList.remove("food");
                createFood();
            } else {
                const removedSegment = snake.pop();
                getCell(removedSegment.x, removedSegment.y).classList.remove("snake");
            }

snake.forEach(segment => getCell(segment.x, segment.y).classList.add("snake"));
        }

function getCell(x, y) {
            const cellIndex = y * boardSize + x;
            return document.getElementsByClassName("cell")[cellIndex];
        }

function changeDirection(event) {
            const newDirection = DIRECTIONS[event.keyCode];
            if (newDirection) {
                // Prevent opposite direction change
                if (direction.x + newDirection.x !== 0 || direction.y + newDirection.y !== 0) {
                    direction = newDirection;
                }
            }
        }

// Start the game when the page finishes loading
        window.addEventListener("DOMContentLoaded", startGame);

// Listen for arrow key presses to change direction
        window.addEventListener("keydown", changeDirection);
    </script>
</body>
</html>
```