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

No:37491

snake but you get longer. and go slow
Developer User17003｜Date and time 24/1/21 4:28:42
Build time 16.114 sec｜Game capacity 5.564KB｜

Script

Sure! Here's a simple implementation of the classic game Snake using JavaScript. It's designed to be played on a smartphone and uses pictograms for the snake and food.

Snake Game

You can copy and paste the above code into a single HTML file and open it on your smartphone to play the game. The snake starts moving automatically, and you can control its direction using the arrow keys. The snake grows longer each time it eats the food. The game ends if the snake hits the wall or itself. You can adjust the speed by changing the timeout value in the game loop (`setTimeout`).

←

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 game Snake using JavaScript. It's designed to be played on a smartphone and uses pictograms for the snake and food.

```html
<!DOCTYPE html>
<html>
<head>
    <title>Snake Game</title>
    <style>
        body {
            font-size: 2em;
            text-align: center;
            margin-top: 50px;
        }
        
        canvas {
            border: 2px solid #000;
            background-color: #f1f1f1;
            margin: 20px auto;
        }
    </style>
</head>
<body>
    <h1>Snake Game</h1>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <script>
        // Game configuration
        const canvas = document.getElementById("gameCanvas");
        const context = canvas.getContext("2d");
        const gridSize = 20;
        const snakeColor = "#000";
        const foodColor = "#ff0000";
        
        // Snake data
        let snake = [{ x: 10, y: 10 }];
        let dx = 0;
        let dy = gridSize;
        let food = getRandomFood();
        
        // Game loop
        function main() {
            setTimeout(function onTick() {
                clearCanvas();
                drawFood();
                moveSnake();
                drawSnake();
                
                if (isGameOver()) {
                    endGame();
                    return;
                }
                
                // Repeat the game loop
                main();
            }, 500); // Adjust the timeout to control the speed (slower is better).
        }
        
        // Event handling for arrow key presses
        document.addEventListener("keydown", changeDirection);
        
        // Change direction based on arrow key press
        function changeDirection(event) {
            const LEFT_KEY = 37;
            const RIGHT_KEY = 39;
            const UP_KEY = 38;
            const DOWN_KEY = 40;
            
            const keyPressed = event.keyCode;
            
            if (keyPressed === LEFT_KEY && dx !== gridSize) {
                dx = -gridSize;
                dy = 0;
            }
            
            if (keyPressed === RIGHT_KEY && dx !== -gridSize) {
                dx = gridSize;
                dy = 0;
            }
            
            if (keyPressed === UP_KEY && dy !== gridSize) {
                dx = 0;
                dy = -gridSize;
            }
            
            if (keyPressed === DOWN_KEY && dy !== -gridSize) {
                dx = 0;
                dy = gridSize;
            }
        }
        
        // Clear the game canvas
        function clearCanvas() {
            context.fillStyle = "#f1f1f1";
            context.fillRect(0, 0, canvas.width, canvas.height);
        }
        
        // Draw the snake on the canvas
        function drawSnake() {
            snake.forEach(function (segment) {
                context.fillStyle = snakeColor;
                context.fillRect(segment.x, segment.y, gridSize, gridSize);
            });
        }
        
        // Move the snake
        function moveSnake() {
            const head = {
                x: snake[0].x + dx,
                y: snake[0].y + dy
            };
            
            snake.unshift(head);
            
            if (head.x === food.x && head.y === food.y) {
                // The snake eats the food, so we generate a new food
                food = getRandomFood();
            } else {
                // The snake moves, so we remove the tail segment
                snake.pop();
            }
        }
         
        // Draw the food on the canvas
        function drawFood() {
            context.fillStyle = foodColor;
            context.fillRect(food.x, food.y, gridSize, gridSize);
        }
        
        // Generate random coordinates for a new food
        function getRandomFood() {
            return {
                x: Math.floor(Math.random() * (canvas.width / gridSize)) * gridSize,
                y: Math.floor(Math.random() * (canvas.height / gridSize)) * gridSize
            };
        }
        
        // Check if the game is over (snake hits the wall or itself)
        function isGameOver() {
            const head = snake[0];
            
            // Check collision with walls
            if (
                head.x < 0 ||
                head.y < 0 ||
                head.x >= canvas.width ||
                head.y >= canvas.height
            ) {
                return true;
            }
            
            // Check collision with itself
            for (let i = 1; i < snake.length; i++) {
                if (head.x === snake[i].x && head.y === snake[i].y) {
                    return true;
                }
            }
            
            return false;
        }
        
        // Game over screen
        function endGame() {
            clearCanvas();
            context.font = "30px Arial";
            context.fillStyle = "#000";
            context.fillText("Game Over", canvas.width / 2 - 90, canvas.height / 2);
        }
        
        // Start the game when the page loads
        main();
    </script>
</body>
</html>
```