snake but you get longer. and go slow The food is bigger's game

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

No:37501

←

Prev Next

→

snake but you get longer. and go slow The food is..ALL
Developer User17003｜Date and time 24/1/21 4:39:05
Build time 15.06 sec｜Game capacity 5.08KB｜

Script

Sure! Here's a complete implementation of the Snake game in a single HTML file using JavaScript:

This code implements the classic Snake game using HTML canvas and JavaScript. The snake starts with a length of 1 and grows longer as it consumes food. The food appears as a red square, and as the snake consumes it, a new food is randomly generated on the game board. The player controls the snake's movement using the arrow keys on the keyboard. The game speed can be adjusted by changing the `gameSpeed` variable, with a lower value making the game faster. Please copy and paste this code into a new HTML file and open it in a web browser to play the game. Enjoy!

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

Sure! Here's a complete 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 #000; }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

// Snake and food settings
            var snakeSize = 20;
            var foodSize = 20;
            var gridSize = 20;

// Game speed (lower value increases speed)
            var gameSpeed = 150;

// Initialize the game
            function init() {
                canvas = document.getElementById("gameCanvas");
                ctx = canvas.getContext("2d");

snake = [];
                snake[0] = {x: 8 * gridSize, y: 8 * gridSize}; // Initial snake position

food = {x: Math.floor(Math.random() * 20) * gridSize, y: Math.floor(Math.random() * 20) * gridSize}; // Initial food position

score = 0;

// Handle keyboard controls
                document.addEventListener("keydown", direction);

setInterval(draw, gameSpeed);
            }

// Handle snake direction
            var dir;
            function direction(event) {
                if(event.keyCode == 37 && dir !== "RIGHT"){
                    dir = "LEFT";
                } else if(event.keyCode == 38 && dir !== "DOWN"){
                    dir = "UP";
                } else if(event.keyCode == 39 && dir !== "LEFT"){
                    dir = "RIGHT";
                } else if(event.keyCode == 40 && dir !== "UP"){
                    dir = "DOWN";
                }
            }

// Draw the game
            function draw() {
                ctx.clearRect(0,0,canvas.width,canvas.height);

// Draw the snake
                for(var i=0; i<snake.length; i++) {
                    ctx.fillStyle = (i === 0) ? "#00FF00" : "#FFFFFF"; // Snake head is green, body is white
                    ctx.fillRect(snake[i].x, snake[i].y, snakeSize, snakeSize);

ctx.strokeStyle = "#000";
                    ctx.strokeRect(snake[i].x, snake[i].y, snakeSize, snakeSize);
                }

// Draw the food
                ctx.fillStyle = '#FF0000'; // Food color is red
                ctx.fillRect(food.x, food.y, foodSize, foodSize);

// Movement logic
                var snakeX = snake[0].x;
                var snakeY = snake[0].y;

if(dir === "LEFT") snakeX -= gridSize;
                if(dir === "UP") snakeY -= gridSize;
                if(dir === "RIGHT") snakeX += gridSize;
                if(dir === "DOWN") snakeY += gridSize;

// Check if the snake ate the food
                if(snakeX === food.x && snakeY === food.y) {
                    score++;
                    food = {
                        x: Math.floor(Math.random() * 20) * gridSize,
                        y: Math.floor(Math.random() * 20) * gridSize
                    };
                } else {
                    snake.pop();
                }

// Create a new head
                var newHead = {x: snakeX, y: snakeY};

// Game over conditions
                if(snakeX < 0 || snakeY < 0 || snakeX >= canvas.width || snakeY >= canvas.height || checkCollision(newHead, snake)){
                    clearInterval();
                    alert("Game Over! Your score: " + score);
                    location.reload();
                }

snake.unshift(newHead);

// Display the score
                ctx.fillStyle = "#FFFFFF";
                ctx.font = "14px Arial";
                ctx.fillText("Score: " + score, 10, 20);
            }

// Check collision with itself (game over condition)
            function checkCollision(head, array){
                for(var i = 0; i < array.length; i++){
                    if(head.x === array[i].x && head.y === array[i].y){
                        return true;
                    }
                }
                return false;
            }

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

Please copy and paste this code into a new HTML file and open it in a web browser to play the game. Enjoy!