Snake game with teleportation portal's game

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

No:26400

←

Prev Next

→

Snake game with teleportation portal
Developer User13082｜Date and time 23/11/30 5:23:54
Build time 102.845 sec｜Game capacity 5.821KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Snake Game</title>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

portal = {
                x: Math.floor(Math.random() * tileCount),
                y: Math.floor(Math.random() * tileCount),
                color: "blue"
            };
            
            // handle keyboard controls
            document.addEventListener("keydown", changeDirection);
            
            gameLoop = setInterval(update, 100);
        }

// update the game state
        function update() {
            // move the snake
            const head = { x: snake.positions[0].x, y: snake.positions[0].y };
            
            switch (direction) {
                case "up":
                    head.y--;
                    break;
                case "down":
                    head.y++;
                    break;
                case "left":
                    head.x--;
                    break;
                case "right":
                    head.x++;
                    break;
            }
            
            snake.positions.unshift(head);
            
            // check if snake collided with fruit
            if (head.x === fruit.x && head.y === fruit.y) {
                score += 10;
                fruit.x = Math.floor(Math.random() * tileCount);
                fruit.y = Math.floor(Math.random() * tileCount);
            } else {
                snake.positions.pop();
            }

// check if snake collided with portal
            if (head.x === portal.x && head.y === portal.y) {
                head.x = Math.floor(Math.random() * tileCount);
                head.y = Math.floor(Math.random() * tileCount);
            }

// check if snake collided with walls or itself
            if (head.x < 0 || head.x >= tileCount || head.y < 0 || head.y >= tileCount || checkCollision(head)) {
                gameOver();
            }

// clear the canvas
            context.fillStyle = "black";
            context.fillRect(0, 0, canvas.width, canvas.height);
            
            // draw the snake
            snake.positions.forEach(drawSnake);

// draw the fruit
            drawFruit(fruit);
            
            // draw the portal
            drawPortal(portal);

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

// draw the snake
        function drawSnake(snakePart) {
            context.fillStyle = snake.color;
            context.fillRect(snakePart.x * tileSize, snakePart.y * tileSize, tileSize, tileSize);
        }

// draw the fruit
        function drawFruit(fruit) {
            context.fillStyle = fruit.color;
            context.fillRect(fruit.x * tileSize, fruit.y * tileSize, tileSize, tileSize);
        }
        
        // draw the portal
        function drawPortal(portal) {
            context.fillStyle = portal.color;
            context.fillRect(portal.x * tileSize, portal.y * tileSize, tileSize, tileSize);
        }

// handle keyboard input
        function changeDirection(event) {
            const keyPressed = event.keyCode;
            
            switch (keyPressed) {
                case 37: // left arrow
                    if (direction !== "right")
                        direction = "left";
                    break;
                case 38: // up arrow
                    if (direction !== "down")
                        direction = "up";
                    break;
                case 39: // right arrow
                    if (direction !== "left")
                        direction = "right";
                    break;
                case 40: // down arrow
                    if (direction !== "up")
                        direction = "down";
                    break;
            }
        }

// check if snake collided with itself
        function checkCollision(head) {
            for (let i = 1; i < snake.positions.length; i++) {
                if (head.x === snake.positions[i].x && head.y === snake.positions[i].y)
                    return true;
            }
            return false;
        }

// game over
        function gameOver() {
            clearInterval(gameLoop);
            alert("Game Over! Your score: " + score);
            resetGame();
        }

// reset the game
        function resetGame() {
            score = 0;
            direction = "right";
            snake.positions = [{ x: 10, y: 10 }];
            fruit.x = Math.floor(Math.random() * tileCount);
            fruit.y = Math.floor(Math.random() * tileCount);
            portal.x = Math.floor(Math.random() * tileCount);
            portal.y = Math.floor(Math.random() * tileCount);
            gameLoop = setInterval(update, 100);
        }

// start the game
        init();
    </script>
</body>
</html>