Snake Also works on the phone And if he hits the wall, the game restarts and there should be a score in the upper left corner's game

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

No:32005

←

Prev Next

→

Snake Also works on the phone And if he hits the w..ALL
Developer User15294｜Date and time 23/12/29 5:14:59
Build time 39.084 sec｜Game capacity 7.246KB｜

Script

Sure! Here's a simple implementation of the classic Snake game using JavaScript, HTML, and pictograms. Copy the code below and save it as a single HTML file to play the game:

To play the game, open the HTML file in a web browser (preferably on a smartphone). The game initializes with an empty canvas, and you can control the snake's movement using the arrow keys (up, down, left, right). The objective is to eat the food (represented by 🍎) and grow the snake without colliding with itself or the walls. The game will restart if the snake hits a wall or collides with itself, and your score will be displayed in the upper left corner. Enjoy the game!

←

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 JavaScript, HTML, and pictograms. Copy the code below and save it as a single HTML file to play the game:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Snake Game</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        canvas {
            background-color: #222;
            display: block;
            margin: 10px auto;
        }
        #score {
            text-align: left;
            color: #fff;
            font-family: Arial, sans-serif;
            font-size: 20px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <script>
        // Pictograms used for snake and food representation
        const snakeImg = "🐍"; 
        const foodImg = "🍎";

// Game configurations
        const canvasSize = 20;
        const tileSize = 20;
        const refreshRate = 150; // Adjust this to control snake speed

// Initialize game variables
        let canvas;
        let context;
        let snake;
        let food;
        let score;

// Snake object
        class Snake {
            constructor() {
                this.body = [
                    { x: 10, y: 10 }, // Snake head
                    { x: 9, y: 10 },  // Snake body
                    { x: 8, y: 10 }   // Snake body
                ];
                this.direction = "right";
            }
            move() {
                const head = this.body[0];
                let newHead;

switch (this.direction) {
                    case "up":
                        newHead = { x: head.x, y: head.y - 1 };
                        break;
                    case "down":
                        newHead = { x: head.x, y: head.y + 1 };
                        break;
                    case "left":
                        newHead = { x: head.x - 1, y: head.y };
                        break;
                    case "right":
                        newHead = { x: head.x + 1, y: head.y };
                        break;
                }

this.body.unshift(newHead);
                if (!this.isEatingFood()) {
                    this.body.pop(); // Remove tail if not eating food
                }
            }
            changeDirection(newDirection) {
                // Prevent moving in opposite direction
                if (newDirection === "up" && this.direction === "down") return;
                if (newDirection === "down" && this.direction === "up") return;
                if (newDirection === "left" && this.direction === "right") return;
                if (newDirection === "right" && this.direction === "left") return;

this.direction = newDirection;
            }
            isEatingFood() {
                const head = this.body[0];
                if (head.x === food.x && head.y === food.y) {
                    score++;
                    generateFood();
                    return true;
                }
                return false;
            }
            isCollidingWithSelf() {
                const head = this.body[0];
                for (let i = 1; i < this.body.length; i++) {
                    if (head.x === this.body[i].x && head.y === this.body[i].y) {
                        return true;
                    }
                }
                return false;
            }
            isCollidingWithWall() {
                const head = this.body[0];
                if (
                    head.x < 0 || head.x >= canvasSize ||
                    head.y < 0 || head.y >= canvasSize
                ) {
                    return true;
                }
                return false;
            }
        }

// Generate food at a random position
        function generateFood() {
            food = {
                x: Math.floor(Math.random() * canvasSize),
                y: Math.floor(Math.random() * canvasSize)
            };
        }

// Handle key down events for changing snake direction
        function handleKeyDown(event) {
            const keyCode = event.keyCode;
            if (keyCode === 38 && snake.direction !== "down") {
                snake.changeDirection("up");
            }
            if (keyCode === 40 && snake.direction !== "up") {
                snake.changeDirection("down");
            }
            if (keyCode === 37 && snake.direction !== "right") {
                snake.changeDirection("left");
            }
            if (keyCode === 39 && snake.direction !== "left") {
                snake.changeDirection("right");
            }
        }

// Check if game over (colliding with wall/itself)
        function checkGameOver() {
            if (snake.isCollidingWithSelf() || snake.isCollidingWithWall()) {
                clearInterval(gameInterval);
                alert("Game Over! Your score: " + score);
                startGame();
            }
        }

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

// Draw snake
            for (let i = 0; i < snake.body.length; i++) {
                const bodyPart = snake.body[i];
                const x = bodyPart.x * tileSize;
                const y = bodyPart.y * tileSize;
                context.fillText(snakeImg, x, y + tileSize);
            }

// Draw food
            const foodX = food.x * tileSize;
            const foodY = food.y * tileSize;
            context.fillText(foodImg, foodX, foodY + tileSize);
        }

// Game loop
        function gameLoop() {
            snake.move();
            draw();
            checkGameOver();
        }

// Start the game
        function startGame() {
            canvas = document.getElementById("gameCanvas");
            context = canvas.getContext("2d");

score = 0;
            generateFood();
            snake = new Snake();

// Update score display
            const scoreElement = document.getElementById("score");
            scoreElement.textContent = "Score: " + score;

// Refresh game every `refreshRate` milliseconds
            gameInterval = setInterval(gameLoop, refreshRate);
        }

// Event listener for key down events
        document.addEventListener("keydown", handleKeyDown);

// Start the game
        startGame();
    </script>
    <div id="score"></div>
</body>
</html>
```