AI game creator

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

No:23233

←

Prev Next

→

Snake Game
Developer User10763｜Date and time 23/10/29 6:56:02
Build time 63.274 sec｜Game capacity 4.457KB｜

Script

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

This implementation will create a canvas-based game board with a snake and a food item represented by colors. You can control the snake using the arrow keys on your smartphone's virtual keyboard. The objective is to eat the food and avoid colliding with the snake's body or the board boundaries.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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>
    <title>Snake Game</title>
    <style>
        #game-board {
            width: 400px;
            height: 400px;
            border: 1px solid #000;
            position: relative;
        }

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

.snake {
            background-color: #000;
        }

.food {
            background-color: #f00;
        }
    </style>
</head>
<body>
    <div id="game-board"></div>

const board = document.getElementById("game-board");
            const ctx = board.getContext("2d");
            const snake = [];
            let food = {};

const direction = {
                x: 1,
                y: 0
            };

function createSnake() {
                for (let i = initialSnakeLength - 1; i >= 0; i--) {
                    snake.push({ x: i, y: 0 });
                }
            }

function createFood() {
                food = {
                    x: Math.floor(Math.random() * (boardWidth / blockSize)),
                    y: Math.floor(Math.random() * (boardHeight / blockSize))
                }
            }

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

snake.unshift(head);

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

function collisionDetection() {
                const head = snake[0];

if (
                    head.x < 0 ||
                    head.x >= boardWidth / blockSize ||
                    head.y < 0 ||
                    head.y >= boardHeight / blockSize ||
                    snake.some((part, index) => index !== 0 && part.x === head.x && part.y === head.y)
                ) {
                    clearInterval(game);
                    alert("Game Over!");
                    location.reload(); // restart the game
                }
            }

function draw() {
                ctx.clearRect(0, 0, boardWidth, boardHeight);

snake.forEach((part) => {
                    ctx.fillStyle = "#000";
                    ctx.fillRect(part.x * blockSize, part.y * blockSize, blockSize, blockSize);
                });

ctx.fillStyle = "#f00";
                ctx.fillRect(food.x * blockSize, food.y * blockSize, blockSize, blockSize);
            }

function update() {
                moveSnake();
                collisionDetection();
                draw();
            }

function handleKeyPress(event) {
                const keyPressed = event.keyCode;

if (keyPressed === 37 && direction.x !== 1) { // Left arrow
                    direction.x = -1;
                    direction.y = 0;
                } else if (keyPressed === 38 && direction.y !== 1) { // Up arrow
                    direction.x = 0;
                    direction.y = -1;
                } else if (keyPressed === 39 && direction.x !== -1) { // Right arrow
                    direction.x = 1;
                    direction.y = 0;
                } else if (keyPressed === 40 && direction.y !== -1) { // Down arrow
                    direction.x = 0;
                    direction.y = 1;
                }
            }

createSnake();
            createFood();

document.addEventListener("keydown", handleKeyPress);
            const game = setInterval(update, gameSpeed);
        });
    </script>
</body>
</html>
```