A game where the player become a snake who must defeat other snake to be bigger's game

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

No:10349

122

←

Prev Next

→

A game where the player become a snake who must de..ALL
Developer User4535｜Date and time 23/7/30 18:35:26
Build time 26.709 sec｜Game capacity 3.917KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

<!DOCTYPE html>
<html>
<head>
<title>Serpent Game</title>
<style>
    canvas {
        border: 1px solid #000;
    }
</style>
</head>
<body>
</body>
<script>
    // Create the canvas element
    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");
    document.body.appendChild(canvas);
    const width = window.innerWidth;
    const height = window.innerHeight;
    canvas.width = width;
    canvas.height = height;

const cellSize = 20; // Size of each cell
    const gridSize = width / cellSize; // Number of cells in the grid
    let direction; // Direction of the snake
    let score; // Player's score
    let snake; // Snake's body
    let food; // Food position

function initialize() {
        direction = "right"; // Start moving right
        score = 0; // Initialize score
        snake = [{ x: 0, y: 0 }]; // Start position of the snake

createFood(); // Create initial food

// Start the game loop
        setInterval(() => {
            update();
            draw();
        }, 100);
    }

function update() {
        // Update the snake position based on the direction
        let head = { x: snake[0].x, y: snake[0].y }; // Create a new head position
        switch (direction) {
            case "up":
                head.y--;
                break;
            case "down":
                head.y++;
                break;
            case "left":
                head.x--;
                break;
            case "right":
                head.x++;
                break;
        }
        snake.unshift(head); // Add the new head to the snake

// Check if the snake has collided with the food
        if (head.x === food.x && head.y === food.y) {
            score++; // Increase the score
            createFood(); // Create new food
        } else {
            snake.pop(); // Remove the tail if no food is eaten
        }

// Check if the snake has collided with itself or the wall
        if (
            snake[0].x < 0 ||
            snake[0].x >= gridSize ||
            snake[0].y < 0 ||
            snake[0].y >= gridSize ||
            isColliding()
        ) {
            // Game over condition
            alert("Game Over!\nYour Score: " + score);
            initialize(); // Restart the game
        }
    }

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

// Draw the snake
        ctx.fillStyle = "#000";
        snake.forEach((cell) => {
            ctx.fillRect(cell.x * cellSize, cell.y * cellSize, cellSize, cellSize);
        });

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

function createFood() {
        food = {
            x: Math.floor(Math.random() * gridSize),
            y: Math.floor(Math.random() * gridSize),
        };
    }

// Keyboard listener for controlling the snake
    document.addEventListener("keydown", (event) => {
        switch (event.key) {
            case "ArrowUp":
                if (direction !== "down") direction = "up";
                break;
            case "ArrowDown":
                if (direction !== "up") direction = "down";
                break;
            case "ArrowLeft":
                if (direction !== "right") direction = "left";
                break;
            case "ArrowRight":
                if (direction !== "left") direction = "right";
                break;
        }
    });

// Start the game
    window.onload = () => {
        initialize();
    };
</script>
</html>