AI game creator

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

No:9823

103

←

Prev Next

→

Snake Game
Developer User4436｜Date and time 23/7/28 3:39:51
Build time 29.577 sec｜Game capacity 4.488KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Snake Game</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

// Load pictograms
        const snakeHeadImg = new Image();
        snakeHeadImg.src = "snakeHead.png";
        const snakeBodyImg = new Image();
        snakeBodyImg.src = "snakeBody.png";
        const foodImg = new Image();
        foodImg.src = "food.png";

// Initialize the game
        function startGame() {
            direction = "right"; // start moving towards right
            score = 0;
            snake = [];
            createSnake();
            createFood();

// Set the game loop
            setInterval(gameLoop, gameSpeed); // 100ms
        }
        
        // Create the initial snake
        function createSnake() {
            snake.push({ x: 6 * box, y: 6 * box }); // starting position of the snake
        }

// Create a new food at a random position
        function createFood() {
            food = {
                x: Math.floor(Math.random() * 20) * box,
                y: Math.floor(Math.random() * 20) * box
            }
        }

// Check collision with walls and tail
        function collision(newHead) {
            // Collide with walls
            if (newHead.x < 0 || newHead.x >= canvas.width || newHead.y < 0 || newHead.y >= canvas.height) {
                return true;
            }

// Collide with tail
            for (let i = 0; i < snake.length; i++) {
                if (newHead.x === snake[i].x && newHead.y === snake[i].y) {
                    return true;
                }
            }
            
            return false;
        }
        
        // Handle key presses to change the direction of the snake
        document.addEventListener("keydown", directionChange);
        function directionChange(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";
            }
        }
        
        // Main game loop
        function gameLoop() {
            context.drawImage(snakeHeadImg, snake[0].x, snake[0].y, box, box);

let snakeX = snake[0].x;
            let snakeY = snake[0].y;

// Update snake position based on the current direction
            if (direction === "right") {
                snakeX += box;
            } else if (direction === "left") {
                snakeX -= box;
            } else if (direction === "up") {
                snakeY -= box; 
            } else if (direction === "down") {
                snakeY += box;
            }

// Create a new head for the snake
            const newHead = { x: snakeX, y: snakeY };
            
            // Check for collision
            if (collision(newHead)) {
                clearInterval(gameLoop);
                alert("Game over! Your final score is: " + score);
                return;
            }
            
            // Move the snake by adding new head and removing tail
            snake.unshift(newHead);

// Check if snake has eaten the food
            if (snake[0].x === food.x && snake[0].y === food.y) {
                score++;
                createFood();
            } else {
                // Remove the tail of the snake
                snake.pop();
            }

// Draw the food
            context.drawImage(foodImg, food.x, food.y, box, box);

// Draw the snake
            for(let i = 1; i < snake.length; i++) {
                context.drawImage(snakeBodyImg, snake[i].x, snake[i].y, box, box);
            }
        }
        
        // Start the game
        startGame();
    </script>
</body>
</html>