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

No:42184

Girl and boy running game create
Developer User18826｜Date and time 24/2/11 0:05:51
Build time 14.13 sec｜Game capacity 3.993KB｜

Script

Girl and Boy Running Game

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Girl and Boy Running Game</title>
</head>
<body>
    <h1>Girl and Boy Running Game</h1>
    <canvas width="400" height="400" style="border:1px solid black;"></canvas>

// Function to draw the characters on the canvas
        function drawCharacters() {
            // Clear the canvas
            context.clearRect(0, 0, canvas.width, canvas.height);
            
            // Draw the girl
            context.fillStyle = "pink";
            context.fillRect(girlX, girlY, 30, 30);
            
            // Draw the boy
            context.fillStyle = "blue";
            context.fillRect(boyX, boyY, 30, 30);
        }

// Function to update the positions of the characters
        function updateCharacters() {
            // Update the girl's position based on velocity
            girlX += girlVelX;
            girlY += girlVelY;
            
            // Update the boy's position based on velocity
            boyX += boyVelX;
            boyY += boyVelY;
            
            // Check for collision with the canvas boundaries
            if (girlX < 0) {
                girlX = 0;
            } else if (girlX + 30 > canvas.width) {
                girlX = canvas.width - 30;
            }
            
            if (boyX < 0) {
                boyX = 0;
            } else if (boyX + 30 > canvas.width) {
                boyX = canvas.width - 30;
            }
            
            if (girlY < 0) {
                girlY = 0;
            } else if (girlY + 30 > canvas.height) {
                girlY = canvas.height - 30;
            }
            
            if (boyY < 0) {
                boyY = 0;
            } else if (boyY + 30 > canvas.height) {
                boyY = canvas.height - 30;
            }
        }

// Function to handle keydown events
        function handleKeyDown(e) {
            if (e.key === 'ArrowUp') {
                girlVelY = -2;
            } else if (e.key === 'ArrowDown') {
                girlVelY = 2;
            } else if (e.key === 'ArrowLeft') {
                girlVelX = -2;
            } else if (e.key === 'ArrowRight') {
                girlVelX = 2;
            }
            
            if (e.key === 'w') {
                boyVelY = -2;
            } else if (e.key === 's') {
                boyVelY = 2;
            } else if (e.key === 'a') {
                boyVelX = -2;
            } else if (e.key === 'd') {
                boyVelX = 2;
            }
        }

// Function to handle keyup events
        function handleKeyUp(e) {
            if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
                girlVelY = 0;
            }
            
            if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
                girlVelX = 0;
            }
            
            if (e.key === 'w' || e.key === 's') {
                boyVelY = 0;
            }
            
            if (e.key === 'a' || e.key === 'd') {
                boyVelX = 0;
            }
        }

// Add event listeners for keydown and keyup events
        window.addEventListener('keydown', handleKeyDown);
        window.addEventListener('keyup', handleKeyUp);

// Game loop
        function gameLoop() {
            drawCharacters();
            updateCharacters();
            requestAnimationFrame(gameLoop);
        }

// Start the game loop
        gameLoop();
    </script>
</body>
</html>