Escape quicksand girl's game

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

No:39943

←

Prev Next

→

Escape quicksand girl
Developer User17907｜Date and time 24/1/31 7:12:00
Build time 10.035 sec｜Game capacity 3.658KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Escape Quicksand Girl</title>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="600"></canvas>
    
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var canvas = document.getElementById("gameCanvas");
            var ctx = canvas.getContext("2d");
        
            // Player object
            var player = {
                x: 200,
                y: 500,
                width: 50,
                height: 50,
                speed: 3
            };
            
            // Quicksand object
            var quicksand = {
                x: 175,
                y: 0,
                width: 50,
                height: 600,
                speed: 1
            };
            
            // Game state variables
            var isGameOver = false;
            
            // Game loop function
            function gameLoop() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                
                if (!isGameOver) {
                    update();
                    draw();
                }
                
                requestAnimationFrame(gameLoop);
            }
            
            // Update function
            function update() {
                // Move the player
                player.x += player.speed;
                
                // Move the quicksand
                quicksand.y += quicksand.speed;
                
                // Check if the player collided with the quicksand
                if (player.x < quicksand.x + quicksand.width &&
                    player.x + player.width > quicksand.x &&
                    player.y < quicksand.y + quicksand.height &&
                    player.y + player.height > quicksand.y) {
                    isGameOver = true; // Game over if there is a collision
                }
                
                // Check if the player went out of bounds
                if (player.x < 0 || player.x + player.width > canvas.width) {
                    isGameOver = true; // Game over if out of bounds
                }
            }
            
            // Draw function
            function draw() {
                drawPlayer();
                drawQuicksand();
            }
            
            // Draw the player
            function drawPlayer() {
                ctx.fillStyle = "blue";
                ctx.fillRect(player.x, player.y, player.width, player.height);
            }
            
            // Draw the quicksand
            function drawQuicksand() {
                ctx.fillStyle = "yellow";
                ctx.fillRect(quicksand.x, quicksand.y, quicksand.width, quicksand.height);
            }
            
            // Event listener to handle user input
            document.addEventListener("keydown", function(event) {
                if (event.keyCode === 37) {
                    // Left arrow key pressed
                    player.speed = -3;
                } else if (event.keyCode === 39) {
                    // Right arrow key pressed
                    player.speed = 3;
                }
            });
            
            document.addEventListener("keyup", function(event) {
                if (event.keyCode === 37 || event.keyCode === 39) {
                    // Left or right arrow key released
                    player.speed = 0;
                }
            });
            
            gameLoop(); // Start the game loop
        });
    </script>
</body>
</html>