AI game creator

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

No:29896

101

←

Prev Next

→

Snake Game
Developer User14662｜Date and time 23/12/19 23:14:07
Build time 22.122 sec｜Game capacity 4.21KB｜

Script

Certainly! Here's a simple implementation of the classic Snake Game using JavaScript and HTML:

// Enclosing the JavaScript code within the

This code creates a simple Snake Game where the player controls the snake using arrow keys. The objective of the game is to eat as many fruits (represented by red squares) as possible without colliding with the snake's own body. The game starts automatically once the code is executed in a browser. The snake moves one tile per frame, and each time it eats a fruit, it grows longer. The game ends if the snake collides with its own body. The game is designed to be played on a smartphone, utilizing touch controls or arrow keys. You can customize the game further by adding additional features, levels, or power-ups as per your requirements.

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

Certainly! Here's a simple implementation of the classic Snake Game using JavaScript and HTML:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Snake Game</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

canvas {
            background: #111;
            display: block;
            margin: 20px auto;
        }
    </style>
</head>
<body>
    <script>
        // Enclosing the JavaScript code within the <script> tags
        (function () {
            // Getting the canvas element from the DOM
            var canvas = document.createElement("canvas");
            var ctx = canvas.getContext("2d");
            document.body.appendChild(canvas);

// Set the canvas size
            var screenWidth = window.innerWidth;
            var screenHeight = window.innerHeight;
            var tileCountX = 20;
            var tileCountY = 20;
            var tileSize = Math.min(screenWidth, screenHeight) / Math.max(tileCountX, tileCountY);
            canvas.width = tileCountX * tileSize;
            canvas.height = tileCountY * tileSize;

// Snake properties
            var snake = [{ x: 10, y: 10 }];
            var dx = 0;
            var dy = 0;

// Fruit properties
            var fruit = { x: 15, y: 10 };

// Handle user input
            window.addEventListener("keydown", function (e) {
                switch (e.keyCode) {
                    case 37: // Left arrow key
                        dx = -1;
                        dy = 0;
                        break;
                    case 38: // Up arrow key
                        dx = 0;
                        dy = -1;
                        break;
                    case 39: // Right arrow key
                        dx = 1;
                        dy = 0;
                        break;
                    case 40: // Down arrow key
                        dx = 0;
                        dy = 1;
                        break;
                }
            });

// Update the game state
            function update() {
                var head = { x: snake[0].x + dx, y: snake[0].y + dy };
                snake.unshift(head);

if (head.x === fruit.x && head.y === fruit.y) {
                    // Snake has eaten the fruit, generate a new random fruit position
                    fruit = { x: Math.floor(Math.random() * tileCountX), y: Math.floor(Math.random() * tileCountY) };
                } else {
                    // Snake didn't eat the fruit, remove the tail segment
                    snake.pop();
                }
            }

// Draw the game
            function draw() {
                // Clear the canvas
                ctx.fillStyle = "#111";
                ctx.fillRect(0, 0, canvas.width, canvas.height);

// Draw the snake
                ctx.fillStyle = "#0f0";
                snake.forEach(function (segment) {
                    ctx.fillRect(segment.x * tileSize, segment.y * tileSize, tileSize, tileSize);
                });

// Draw the fruit
                ctx.fillStyle = "#f00";
                ctx.fillRect(fruit.x * tileSize, fruit.y * tileSize, tileSize, tileSize);
            }

// Main game loop
            function gameLoop() {
                update();
                draw();
            }

setInterval(gameLoop, 100); // Run the game at 10 frames per second
        })();
    </script>
</body>
</html>
```

This code creates a simple Snake Game where the player controls the snake using arrow keys. The objective of the game is to eat as many fruits (represented by red squares) as possible without colliding with the snake's own body.

The game starts automatically once the code is executed in a browser. The snake moves one tile per frame, and each time it eats a fruit, it grows longer. The game ends if the snake collides with its own body.

The game is designed to be played on a smartphone, utilizing touch controls or arrow keys. You can customize the game further by adding additional features, levels, or power-ups as per your requirements.