snake Game (Please Join Need Players And Likes And BMs)'s game

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

No:27075

134

←

Prev Next

→

snake Game (Please Join Need Players And Likes And..ALL
Developer User13175｜Date and time 23/12/4 4:49:12
Build time 72.469 sec｜Game capacity 5.489KB｜

Script

Here's a basic implementation of the snake game in a single HTML file using JavaScript:

To run the game, save the code in a file with a ".html" extension and open it in a web browser. The game can be played using the arrow keys to control the snake. The goal is to eat the red food and grow as long as possible without running into the snake's own body or the boundaries of the canvas. The game will display the score in the top-left corner, and when the game ends, it will show an alert with the final score before restarting the game.

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

Here's a basic implementation of the snake game in a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Snake Game</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <script>
        // Getting the canvas element and context
        const canvas = document.getElementById("gameCanvas");
        const context = canvas.getContext("2d");

// Initial snake and food position
        let snake = [{x: 150, y: 150}, {x: 140, y: 150}, {x: 130, y: 150}];
        let food = {x: 250, y: 250};

// Snake directions
        let dx = 10;
        let dy = 0;

// Variables for game state
        let score = 0;
        let changingDirection = false;

// Function to draw the snake on the canvas
        function drawSnake() {
            snake.forEach(drawSnakePart);
        }

// Function to draw a single snake part
        function drawSnakePart(snakePart) {
            context.fillStyle = "green";
            context.strokeStyle = "black";
            context.fillRect(snakePart.x, snakePart.y, 10, 10);
            context.strokeRect(snakePart.x, snakePart.y, 10, 10);
        }

// Function to change snake direction
        function changeDirection(event) {
            const LEFT_KEY = 37;
            const RIGHT_KEY = 39;
            const UP_KEY = 38;
            const DOWN_KEY = 40;

if (changingDirection) return;
            changingDirection = true;

const keyPressed = event.keyCode;
            const goingUp = dy === -10;
            const goingDown = dy === 10;
            const goingLeft = dx === -10;
            const goingRight = dx === 10;

if (keyPressed === LEFT_KEY && !goingRight) {
                dx = -10;
                dy = 0;
            }

if (keyPressed === UP_KEY && !goingDown) {
                dx = 0;
                dy = -10;
            }

if (keyPressed === RIGHT_KEY && !goingLeft) {
                dx = 10;
                dy = 0;
            }

if (keyPressed === DOWN_KEY && !goingUp) {
                dx = 0;
                dy = 10;
            }
        }

// Function to move the snake every 100ms
        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) {
                score += 10;
                generateFood();
            } else {
                snake.pop();
            }
        }

// Function to generate random food position
        function generateFood() {
            food.x = Math.floor(Math.random() * (canvas.width / 10)) * 10;
            food.y = Math.floor(Math.random() * (canvas.height / 10)) * 10;

snake.forEach(function isFoodOnSnake(part) {
                const foodIsOnSnake = part.x === food.x && part.y === food.y;
                if (foodIsOnSnake) {
                    generateFood();
                }
            });
        }

// Function to check game over conditions
        function gameOver() {
            for (let i = 1; i < snake.length; i++) {
                if (snake[i].x === snake[0].x && snake[i].y === snake[0].y) {
                    return true;
                }
            }

const hitLeftWall = snake[0].x < 0;
            const hitRightWall = snake[0].x > canvas.width - 10;
            const hitTopWall = snake[0].y < 0;
            const hitBottomWall = snake[0].y > canvas.height - 10;

return hitLeftWall || hitRightWall || hitTopWall || hitBottomWall;
        }

// Function to draw the food on the canvas
        function drawFood() {
            context.fillStyle = "red";
            context.strokeStyle = "black";
            context.fillRect(food.x, food.y, 10, 10);
            context.strokeRect(food.x, food.y, 10, 10);
        }

// Function to clear the canvas
        function clearCanvas() {
            context.clearRect(0, 0, canvas.width, canvas.height);
        }

// Function to draw the score on the canvas
        function drawScore() {
            context.fillStyle = "black";
            context.font = "15px Arial";
            context.fillText("Score: " + score, 10, 20);
        }

// Main game loop
        function gameLoop() {
            if (gameOver()) {
                alert("Game over! Your score: " + score);
                location.reload(); // Restart the game
            }

changingDirection = false;
            clearCanvas();
            drawFood();
            moveSnake();
            drawSnake();
            drawScore();

setTimeout(gameLoop, 100);
        }

// Start the game when the page is loaded
        document.addEventListener("keydown", changeDirection);
        gameLoop();
    </script>
</body>
</html>
```