AI game creator

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

No:23556

←

Prev Next

→

Snake Game
Developer helloworld｜Date and time 23/11/1 20:32:21
Build time 74.986 sec｜Game capacity 4.097KB｜

Script

Sure! Here's a simple implementation of the classic Snake game using HTML, CSS, and JavaScript:

To play the game, save the above code into a single HTML file (e.g., `snake.html`) and open it using a web browser on your smartphone. The game will start automatically, and you can use the arrow keys on your keyboard or the touch gestures on your smartphone to control the snake and eat the red food. The score will be displayed at the top-left corner of the canvas. Note: This game is designed to be played on a web browser and may not work optimally on a smartphone. It's recommended to play it on a desktop or laptop computer for the best experience.

←

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 classic Snake game using HTML, CSS, and JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Snake Game</title>
    <style>
        canvas {
            background-color: black;
            border: 1px solid #ccc;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400" tabindex="1"></canvas>
    <script>
        document.addEventListener("DOMContentLoaded", function () {

// Get canvas and context
            var canvas = document.getElementById("gameCanvas");
            var context = canvas.getContext("2d");

// Initial snake position and size
            var snakeSize = 20;
            var snakeX = (canvas.width / 2) - snakeSize;
            var snakeY = (canvas.height / 2) - snakeSize;

// Initial movement direction
            var direction = "right";

// Initial food position
            var foodX;
            var foodY;

// Initial score
            var score = 0;

// Function to generate random food position
            function generateFood() {
                foodX = Math.floor(Math.random() * (canvas.width / snakeSize)) * snakeSize;
                foodY = Math.floor(Math.random() * (canvas.height / snakeSize)) * snakeSize;
            }

// Function to draw snake and food
            function draw() {
                // Clear canvas
                context.clearRect(0, 0, canvas.width, canvas.height);

// Draw snake
                context.fillStyle = "white";
                context.fillRect(snakeX, snakeY, snakeSize, snakeSize);

// Draw food
                context.fillStyle = "red";
                context.fillRect(foodX, foodY, snakeSize, snakeSize);

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

// Function to update snake position and check for collisions
            function update() {
                // Update snake position based on movement direction
                if (direction === "up") snakeY -= snakeSize;
                if (direction === "down") snakeY += snakeSize;
                if (direction === "left") snakeX -= snakeSize;
                if (direction === "right") snakeX += snakeSize;

// Check if snake hits the food
                if (snakeX === foodX && snakeY === foodY) {
                    score++;
                    generateFood();
                }

// Draw snake and food
                draw();

// Call update function again
                setTimeout(update, 100);
            }

// Function to handle keyboard input
            function handleInput(event) {
                var key = event.keyCode;

if (key === 37 && direction !== "right") direction = "left";
                else if (key === 38 && direction !== "down") direction = "up";
                else if (key === 39 && direction !== "left") direction = "right";
                else if (key === 40 && direction !== "up") direction = "down";
            }

// Start the game
            generateFood();
            update();

// Event listener for keyboard input
            document.addEventListener("keydown", handleInput);

});
    </script>
</body>
</html>
```

Note: This game is designed to be played on a web browser and may not work optimally on a smartphone. It's recommended to play it on a desktop or laptop computer for the best experience.