Snake but he fond the food him self's game

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

No:39734

169

←

Prev Next

→

Snake but he fond the food him self
Developer User17462｜Date and time 24/1/30 1:21:42
Build time 20.702 sec｜Game capacity 4.342KB｜

Script

Sure! Here's an example of a Snake game implemented in a single HTML file using JavaScript. The game uses pictograms and can be played on a smartphone:

To play the game: 1. Copy the code into a new HTML file. 2. Open the HTML file in a browser. 3. Use the arrow keys to control the snake. 4. The snake should move around and eat the red food, growing in size. 5. If the snake collides with its own body, it will restart the game. Enjoy playing the Snake game on your smartphone!

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

Sure! Here's an example of a Snake game implemented in a single HTML file using JavaScript. The game uses pictograms and can be played on a smartphone:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Snake Game</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <script>
        // Snake Game Logic
        const canvas = document.getElementById("gameCanvas");
        const context = canvas.getContext("2d");
        const size = 20;

const snake = {
            x: 0,
            y: 0,
            dx: size,
            dy: 0,
            cells: [],
            maxCells: 4
        };

const food = {
            x: getRandomCoordinate(),
            y: getRandomCoordinate()
        };

function getRandomCoordinate() {
            return Math.floor(Math.random() * (canvas.width / size)) * size;
        }

function update() {
            snake.x += snake.dx;
            snake.y += snake.dy;

if (snake.x >= canvas.width) {
                snake.x = 0;
            } else if (snake.x < 0) {
                snake.x = canvas.width - size;
            }

if (snake.y >= canvas.height) {
                snake.y = 0;
            } else if (snake.y < 0) {
                snake.y = canvas.height - size;
            }

snake.cells.unshift({ x: snake.x, y: snake.y });

if (snake.cells.length > snake.maxCells) {
                snake.cells.pop();
            }

draw();
        }

function draw() {
            context.clearRect(0, 0, canvas.width, canvas.height);

context.fillStyle = "lime";
            snake.cells.forEach((cell, index) => {
                context.fillRect(cell.x, cell.y, size, size);
                if (cell.x === food.x && cell.y === food.y) {
                    snake.maxCells++;
                    food.x = getRandomCoordinate();
                    food.y = getRandomCoordinate();
                }

for (let i = index + 1; i < snake.cells.length; i++) {
                    if (cell.x === snake.cells[i].x && cell.y === snake.cells[i].y) {
                        snake.x = 0;
                        snake.y = 0;
                        snake.cells = [];
                        snake.maxCells = 4;
                        snake.dx = size;
                        snake.dy = 0;
                        food.x = getRandomCoordinate();
                        food.y = getRandomCoordinate();
                    }
                }
            });

context.fillStyle = "red";
            context.fillRect(food.x, food.y, size, size);
        }

function changeDirection(event) {
            const LEFT_KEY = "ArrowLeft";
            const RIGHT_KEY = "ArrowRight";
            const UP_KEY = "ArrowUp";
            const DOWN_KEY = "ArrowDown";

const keyPressed = event.key;

const goingUp = snake.dy === -size;
            const goingDown = snake.dy === size;
            const goingLeft = snake.dx === -size;
            const goingRight = snake.dx === size;

if (keyPressed === LEFT_KEY && !goingRight) {
                snake.dx = -size;
                snake.dy = 0;
            }
            if (keyPressed === UP_KEY && !goingDown) {
                snake.dx = 0;
                snake.dy = -size;
            }
            if (keyPressed === RIGHT_KEY && !goingLeft) {
                snake.dx = size;
                snake.dy = 0;
            }
            if (keyPressed === DOWN_KEY && !goingUp) {
                snake.dx = 0;
                snake.dy = size;
            }
        }

document.addEventListener("keydown", changeDirection);

setInterval(update, 100);
    </script>
</body>
</html>
```

To play the game:
1. Copy the code into a new HTML file.
2. Open the HTML file in a browser.
3. Use the arrow keys to control the snake.
4. The snake should move around and eat the red food, growing in size.
5. If the snake collides with its own body, it will restart the game.

Enjoy playing the Snake game on your smartphone!