AI game creator

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

No:34107

←

Prev Next

→

Make snake
Developer User16048｜Date and time 24/1/8 9:15:59
Build time 33.663 sec｜Game capacity 4.307KB｜

Script

Sure! Here's a simple implementation of the classic game "Snake" in a single HTML file using JavaScript and pictograms. Remember to save the file with a ".html" extension and open it in a web browser to play.

To play the game, you can use the arrow keys on your smartphone's keyboard to control the movement of the snake. The goal is to eat the fruit and grow your snake without hitting the walls or yourself. Note that you may need to customize the styling and pictograms as per your preference. You can modify this implementation further to enhance gameplay or add more features.

←

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-board {
            width: 300px;
            height: 300px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <div id="game-board"></div>

// Game Initialization
        function init() {
            snake = [{ x: 5, y: 5 }, { x: 4, y: 5 }, { x: 3, y: 5 }]; // Initial position of the snake
            fruit = { x: Math.floor(Math.random() * canvasSize), y: Math.floor(Math.random() * canvasSize) }; // Random position for the fruit
            score = 0;

draw();
            setTimeout(gameLoop, 200);
        }

// Game Loop
        function gameLoop() {
            update();
            draw();

setTimeout(gameLoop, 200);
        }

// Update Game State
        function update() {
            var head = { x: snake[0].x, y: snake[0].y };

if (direction === "right") {
                head.x++;
            } else if (direction === "left") {
                head.x--;
            } else if (direction === "up") {
                head.y--;
            } else if (direction === "down") {
                head.y++;
            }

snake.unshift(head);

if (head.x === fruit.x && head.y === fruit.y) {
                score++;
                fruit = { x: Math.floor(Math.random() * canvasSize), y: Math.floor(Math.random() * canvasSize) };
            } else {
                snake.pop();
            }

if (head.x < 0 || head.y < 0 || head.x >= canvasSize || head.y >= canvasSize || checkCollision(head)) {
                alert("Game Over! Your Score: " + score);
                init();
                return;
            }
        }

// Draw Game Board
        function draw() {
            var canvas = document.getElementById("game-board");
            var context = canvas.getContext("2d");

context.clearRect(0, 0, canvas.width, canvas.height);

// Draw Snake
            snake.forEach(function (segment) {
                context.fillStyle = "#000";
                context.fillRect(segment.x * cellSize, segment.y * cellSize, cellSize, cellSize);
            });

// Draw Fruit
            context.fillStyle = "#f00";
            context.fillRect(fruit.x * cellSize, fruit.y * cellSize, cellSize, cellSize);

// Draw Score
            context.font = "20px Arial";
            context.fillText("Score: " + score, 10, canvas.height - 10);
        }

// Handle Keyboard Input
        document.addEventListener("keydown", function (event) {
            if (event.keyCode === 37 && direction !== "right") {
                direction = "left";
            } else if (event.keyCode === 38 && direction !== "down") {
                direction = "up";
            } else if (event.keyCode === 39 && direction !== "left") {
                direction = "right";
            } else if (event.keyCode === 40 && direction !== "up") {
                direction = "down";
            }
        });

// Check Collision with Snake Body
        function checkCollision(head) {
            for (var i = 1; i < snake.length; i++) {
                if (snake[i].x === head.x && snake[i].y === head.y) {
                    return true;
                }
            }
            return false;
        }

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

Note that you may need to customize the styling and pictograms as per your preference. You can modify this implementation further to enhance gameplay or add more features.