Snake Also works on the phone's game

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

No:32004

←

Prev Next

→

Snake Also works on the phone
Developer User15294｜Date and time 23/12/29 5:12:19
Build time 21.781 sec｜Game capacity 3.966KB｜

Script

Sure! Here's an example of a simple Snake game implemented as a single HTML file using JavaScript. It should work on smartphones, using pictograms to represent the snake and food. Just copy the code into an HTML file and open it in a web browser:

Feel free to customize the code to add more features, improve the graphics, or change the gameplay. Enjoy playing Snake on your smartphone!

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Snake Game</title>
    <style>
        #game-container {
            margin: auto;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }
        #game-canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <canvas id="game-canvas" width="300" height="300"></canvas>
    </div>

const gridSize = 10;
            const canvasSize = 300;

const snake = {
                body: [
                    { x: 150, y: 150 },
                    { x: 140, y: 150 },
                    { x: 130, y: 150 }
                ],
                direction: "right"
            };

let food = { x: 0, y: 0 };

function getRandomPosition() {
                return Math.floor(Math.random() * (canvasSize / gridSize)) * gridSize;
            }

function update() {
                const head = { x: snake.body[0].x, y: snake.body[0].y };

switch (snake.direction) {
                    case "up":
                        head.y -= gridSize;
                        break;
                    case "down":
                        head.y += gridSize;
                        break;
                    case "left":
                        head.x -= gridSize;
                        break;
                    case "right":
                        head.x += gridSize;
                        break;
                }

snake.body.unshift(head);

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

function draw() {
                context.clearRect(0, 0, canvasSize, canvasSize);

snake.body.forEach(segment => {
                    context.fillStyle = "black";
                    context.fillRect(segment.x, segment.y, gridSize, gridSize);
                });

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

function generateFood() {
                food.x = getRandomPosition();
                food.y = getRandomPosition();
            }

function handleKeydown(event) {
                const direction = event.key.replace("Arrow", "").toLowerCase();

if (direction === "up" && snake.direction !== "down") {
                    snake.direction = "up";
                } else if (direction === "down" && snake.direction !== "up") {
                    snake.direction = "down";
                } else if (direction === "left" && snake.direction !== "right") {
                    snake.direction = "left";
                } else if (direction === "right" && snake.direction !== "left") {
                    snake.direction = "right";
                }
            }

function gameLoop() {
                update();
                draw();
                setTimeout(gameLoop, 100); // Speed of the snake (higher value => slower)
            }

generateFood();

document.addEventListener("keydown", handleKeydown);
            gameLoop();
        });
    </script>
</body>
</html>
```

Feel free to customize the code to add more features, improve the graphics, or change the gameplay. Enjoy playing Snake on your smartphone!