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

No:34508

113

←

Prev Next

→

Snake Game
Developer User16273｜Date and time 24/1/11 0:09:04
Build time 24.742 sec｜Game capacity 5.289KB｜

Script

Sure! Here's an example of a simple Snake game implemented as a single HTML file using JavaScript:

Snake Game

You can copy the above code and save it as a .html file. Then, you can open it in a web browser (preferably on your smartphone) to play the Snake game. The game board is displayed as a 300x300 px area, and the snake is represented by green squares while the food is represented by a red square. Use the arrow keys on your smartphone keyboard to control the snake and eat the food while avoiding collisions with the walls or itself. Have fun!

←

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 as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Snake Game</title>
    <style>
        #game-board {
            position: relative;
            width: 300px;
            height: 300px;
            border: 1px solid black;
        }

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

.snake {
            background-color: green;
        }

.food {
            background-color: red;
        }
    </style>
</head>
<body>
    <h1>Snake Game</h1>
    <div id="game-board"></div>

// Game variables
        let snake = [{ x: 7, y: 7 }];
        let direction = 'right';
        let food = generateFood();
        let score = 0;
        let speed = INITIAL_SPEED;
        let interval;

// Initialize game
        function init() {
            drawSnake();
            drawFood();

interval = setInterval(moveSnake, speed);

// Keyboard event listener
            document.addEventListener('keydown', handleKeyDown);
        }

// Draw the snake on the game board
        function drawSnake() {
            const gameBoard = document.getElementById('game-board');
            gameBoard.innerHTML = '';

snake.forEach(segment => {
                const snakeElement = document.createElement('div');
                snakeElement.className = 'snake';
                snakeElement.style.left = segment.x * CELL_SIZE + 'px';
                snakeElement.style.top = segment.y * CELL_SIZE + 'px';
                gameBoard.appendChild(snakeElement);
            });
        }

// Draw the food on the game board
        function drawFood() {
            const gameBoard = document.getElementById('game-board');

const foodElement = document.createElement('div');
            foodElement.className = 'food';
            foodElement.style.left = food.x * CELL_SIZE + 'px';
            foodElement.style.top = food.y * CELL_SIZE + 'px';
            gameBoard.appendChild(foodElement);
        }

// Generate a random position for the food
        function generateFood() {
            return {
                x: Math.floor(Math.random() * BOARD_SIZE),
                y: Math.floor(Math.random() * BOARD_SIZE)
            };
        }

// Update the snake's position and check for collision
        function moveSnake() {
            const 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;
            }

snake.unshift(head);

// Check if the snake collided with the food
            if (head.x === food.x && head.y === food.y) {
                score += 10;
                speed -= 5;

food = generateFood();
                drawFood();

clearInterval(interval);
                interval = setInterval(moveSnake, speed);
            } else {
                snake.pop();
            }

// Check if the snake collided with the walls or itself
            if (head.x < 0 || head.x >= BOARD_SIZE || head.y < 0 || head.y >= BOARD_SIZE || checkCollision()) {
                clearInterval(interval);
                alert('Game over! Your score is ' + score);
            }

drawSnake();
        }

// Check if the snake collided with itself
        function checkCollision() {
            const head = snake[0];

return snake.some((segment, index) => {
                if (index !== 0 && segment.x === head.x && segment.y === head.y) {
                    return true;
                }
            });
        }

// Handle keydown events to change the direction of the snake
        function handleKeyDown(event) {
            const key = event.key;

if (key === 'ArrowUp' && direction !== 'down') {
                direction = 'up';
            } else if (key === 'ArrowDown' && direction !== 'up') {
                direction = 'down';
            } else if (key === 'ArrowLeft' && direction !== 'right') {
                direction = 'left';
            } else if (key === 'ArrowRight' && direction !== 'left') {
                direction = 'right';
            }
        }

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