I would like to make game snake's game

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

No:22503

←

Prev Next

→

I would like to make game snake
Developer User10387｜Date and time 23/10/22 23:05:38
Build time 65.736 sec｜Game capacity 4.411KB｜

Script

Sure! Here's an example of a simple Snake game implemented in a single HTML file using JavaScript:

This implementation will enable you to play the Snake game on a smartphone or any modern web browser. The game logic is written in JavaScript, and it uses the HTML5 `<canvas>` element to draw the game graphics. The game can be controlled using the arrow keys on the keyboard. Pictograms are not used in this implementation, but you could further enhance the game's appearance by adding custom graphics or using image sprites instead of simple colored rectangles to represent the snake and food.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

Sure! Here's an example of a simple Snake game implemented in a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Snake Game</title>
    <style>
        canvas {
            border: 1px solid #000;
            background-color: #ddd;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

// Snake and initial position
        let snake = [{ x: 200, y: 200 }];
        let dx = 10;
        let dy = 0;

// Food object and initial position
        let food = { x: 0, y: 0 };
        generateFood();

// Game loop
        function gameLoop() {
            clearCanvas();
            moveSnake();
            drawSnake();
            drawFood();

if (checkCollision()) {
                // Game over condition
                alert("Game over!");
                resetGame();
            }

setTimeout(gameLoop, 100); // Speed of the game (lower values make it faster)
        }

// Clear the canvas
        function clearCanvas() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
        }

// Move the snake
        function moveSnake() {
            const head = { x: snake[0].x + dx, y: snake[0].y + dy };

// Add the new head to the beginning of the snake
            snake.unshift(head);

if (head.x === food.x && head.y === food.y) {
                // The snake ate the food, generate new food and increase length
                generateFood();
            } else {
                // Remove the tail (move the snake)
                snake.pop();
            }
        }

// Draw the snake
        function drawSnake() {
            snake.forEach(segment => {
                ctx.fillStyle = "#000";
                ctx.fillRect(segment.x, segment.y, 10, 10);
            });
        }

// Generate new food at a random position
        function generateFood() {
            food.x = getRandomCoordinate();
            food.y = getRandomCoordinate();
        }

// Draw the food
        function drawFood() {
            ctx.fillStyle = "#f00";
            ctx.fillRect(food.x, food.y, 10, 10);
        }

// Check if the snake has collided with itself or reached the canvas boundaries
        function checkCollision() {
            const head = snake[0];

return (
                snake.slice(1).some(segment => segment.x === head.x && segment.y === head.y) ||
                head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height
            );
        }

// Reset the game
        function resetGame() {
            snake = [{ x: 200, y: 200 }];
            dx = 10;
            dy = 0;
            generateFood();
        }

// Handle key events to change the snake's direction
        document.addEventListener("keydown", handleKeyDown);

function handleKeyDown(event) {
            const key = event.key.toLowerCase();

if (key === "arrowup" && dy !== 10) {
                dx = 0;
                dy = -10;
            } else if (key === "arrowdown" && dy !== -10) {
                dx = 0;
                dy = 10;
            } else if (key === "arrowleft" && dx !== 10) {
                dx = -10;
                dy = 0;
            } else if (key === "arrowright" && dx !== -10) {
                dx = 10;
                dy = 0;
            }
        }

// Generate a random coordinate multiple of 10 within the canvas boundaries
        function getRandomCoordinate() {
            return Math.floor(Math.random() * (canvas.width / 10)) * 10;
        }

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