AI game creator

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

No:35926

154

←

Prev Next

→

Snake Game
Developer User16627｜Date and time 24/1/16 3:47:50
Build time 19.437 sec｜Game capacity 5.522KB｜

Script

Sure! Here's a basic implementation of the Snake Game using JavaScript, HTML, and CSS:

To play the game, open the above code in a web browser, and you'll see a canvas with a black square representing the snake and a red square representing the food. Use the arrow keys on your keyboard to control the movement of the snake, and try to eat the food to increase your score. The game ends if the snake collides with itself or the walls of the canvas.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's a basic implementation of the Snake Game using JavaScript, HTML, and CSS:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Snake Game</title>
    <style>
        /* Add some basic styling */
        body {
            margin: 0;
            padding: 0;
        }
        canvas {
            border: 1px solid #000;
            background-color: #EEE;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

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

// Set the default game settings
            var gridSize = 20;
            var snakeSize = 1;
            var snake = [{ x: 0, y: 0 }];
            var food = { x: 0, y: 0 };
            var direction = "right";
            var score = 0;
            var gameSpeed = 150;
            var gameLoop;

// Generate a random position for the food
            function generateFood() {
                food = {
                    x: Math.floor(Math.random() * (canvas.width / gridSize)),
                    y: Math.floor(Math.random() * (canvas.height / gridSize))
                };

// Make sure the food doesn't overlap with the snake
                for (var i = 0; i < snake.length; i++) {
                    if (food.x === snake[i].x && food.y === snake[i].y) {
                        generateFood();
                        break;
                    }
                }
            }

// Handle user input
            document.addEventListener("keydown", function(event) {
                if (event.keyCode === 37 && direction !== "right") {
                    direction = "left";
                } else if (event.keyCode === 38 && direction !== "down") {
                    direction = "up";
                } else if (event.keyCode === 39 && direction !== "left") {
                    direction = "right";
                } else if (event.keyCode === 40 && direction !== "up") {
                    direction = "down";
                }
            });

// Draw the snake and food on the canvas
            function draw() {
                // Clear the canvas
                context.clearRect(0, 0, canvas.width, canvas.height);

// Draw the snake
                for (var i = 0; i < snake.length; i++) {
                    context.fillStyle = "#000";
                    context.fillRect(snake[i].x * gridSize, snake[i].y * gridSize, gridSize, gridSize);
                }

// Draw the food
                context.fillStyle = "#FF0000";
                context.fillRect(food.x * gridSize, food.y * gridSize, gridSize, gridSize);

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

// Update the snake position and check for collisions
            function update() {
                // Update the snake position based on the current direction
                var head = { x: snake[0].x, y: snake[0].y };
                if (direction === "left") head.x--;
                else if (direction === "up") head.y--;
                else if (direction === "right") head.x++;
                else if (direction === "down") head.y++;
                snake.unshift(head);

// Check if the snake has collided with the food
                if (head.x === food.x && head.y === food.y) {
                    // Generate new food and increase the score
                    generateFood();
                    score++;
                } else {
                    // Remove the tail if the snake didn't eat food
                    snake.pop();
                }

// Check if the snake has collided with itself or the walls
                if (
                    head.x < 0 || head.y < 0 ||
                    head.x >= canvas.width / gridSize ||
                    head.y >= canvas.height / gridSize ||
                    snake.filter(function(obj) {
                        return obj.x === head.x && obj.y === head.y;
                    }).length > 1
                ) {
                    // Game over
                    clearInterval(gameLoop);
                    alert("Game Over! Your score is: " + score);
                }
            }

// Start the game
            function startGame() {
                // Initialize the snake and food
                snake = [{ x: 0, y: 0 }];
                generateFood();
                score = 0;

// Update the game at regular intervals
                gameLoop = setInterval(function() {
                    update();
                    draw();
                }, gameSpeed);
            }

// Start the game initially
            startGame();

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