A red monster chase is you tap the screen to jump and there is red triangle spikes to jump over if you touch it you lose and you have to try again there's a point score's game

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

No:38452

←

Prev Next

→

A red monster chase is you tap the screen to jump ..ALL
Developer User17401｜Date and time 24/1/24 22:23:38
Build time 14.565 sec｜Game capacity 3.889KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Red Monster Chase</title>
</head>
<body>
    <canvas id="gameCanvas" width="480" height="320"></canvas>
    <script>
        // Getting the game canvas element
        var canvas = document.getElementById("gameCanvas");
        var context = canvas.getContext("2d");

// Game variables
        var monsterX = 50; // Monster X position
        var monsterY = canvas.height - 50; // Monster Y position
        var monsterYSpeed = 5; // Monster movement speed
        var isJumping = false; // Flag to track if monster is jumping
        var jumpHeight = 100; // Vertical jump distance
        var isGameOver = false; // Flag to track if game is over
        var score = 0; // Player's score

// Spike variables
        var spikeX = canvas.width; // Spike X position
        var spikeY = canvas.height - 50; // Spike Y position
        var spikeWidth = 20; // Spike width
        var spikeHeight = 50; // Spike height
        var spikeSpeed = 3; // Spike movement speed

// Event listener to handle screen taps
        canvas.addEventListener("mousedown", handleTap);

// Function to handle screen taps
        function handleTap(event) {
            if (!isGameOver) {
                if (!isJumping) {
                    isJumping = true;
                    jump();
                }
            } else {
                restartGame();
            }
        }

// Function to make the monster jump
        function jump() {
            monsterY -= jumpHeight;
        }

// Function to update game objects and handle collisions
        function update() {
            context.clearRect(0, 0, canvas.width, canvas.height); // Clear canvas

// Draw monster
            context.fillStyle = "red";
            context.fillRect(monsterX, monsterY, 50, 50);

// Draw spike
            context.fillStyle = "red";
            context.fillRect(spikeX, spikeY, spikeWidth, spikeHeight);

// Move spike
            spikeX -= spikeSpeed;

// Check for collision with spike
            if (monsterX < spikeX + spikeWidth &&
                monsterX + 50 > spikeX &&
                monsterY < spikeY + spikeHeight &&
                50 + monsterY > spikeY) {
                gameOver();
            }

// Draw score
            context.fillStyle = "black";
            context.font = "20px Arial";
            context.fillText("Score: " + score, 10, 30);

// Increment score
            score++;

// Move monster down if jumping
            if (isJumping) {
                monsterY += monsterYSpeed;

// Reset jumping when monster reaches initial Y position
                if (monsterY >= canvas.height - 50) {
                    isJumping = false;
                }
            }

// Reset spike position if it goes off the screen
            if (spikeX + spikeWidth < 0) {
                spikeX = canvas.width;
            }

// Request animation frame to continuously update game state
            if (!isGameOver) {
                requestAnimationFrame(update);
            }
        }

// Function to handle game over
        function gameOver() {
            isGameOver = true;
            context.fillStyle = "black";
            context.font = "30px Arial";
            context.fillText("Game Over!", canvas.width / 2 - 100, canvas.height / 2);
            context.fillText("Tap to try again", canvas.width / 2 - 125, canvas.height / 2 + 50);
        }

// Function to restart the game
        function restartGame() {
            monsterY = canvas.height - 50;
            spikeX = canvas.width;
            isGameOver = false;
            score = 0;
            update();
        }

// Start the game
        update();

</script>
</body>
</html>