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

No:47047

70

Create a game inspired by I Wanna Be The Guy Calle..ALL
Developer User20380｜Date and time 24/2/27 6:55:41
Build time 7.424 sec｜Game capacity 2.179KB｜

Score: 0

→ 　

0　

0　

　
　

[PR]現在のゲームギフトランキング

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>

<head>
    <title>I Wanna Be The Bloxxer</title>
</head>

<body>
    <div id="game">
        <img id="player" src="player.png" style="position: absolute; top: 200px; left: 20px;">
        <img id="obstacle" src="obstacle.png" style="position: absolute; top: 250px; left: 300px;">
        <h1 id="score" style="position: absolute; top: 10px; left: 10px;">Score: 0</h1>
    </div>

<script>
        // Pictograms images for player and obstacle
        const player = document.getElementById('player');
        const obstacle = document.getElementById('obstacle');
        
        // Initial score
        let score = 0;
        const scoreDisplay = document.getElementById('score');
        
        // Movement function for player
        function movePlayer(direction) {
            const currentPosition = parseInt(player.style.left);
            player.style.left = currentPosition + direction + 'px';
            
            // Check for collision with obstacle
            if (isCollided(player, obstacle)) {
                alert('Game Over! Your final score: ' + score);
                score = 0;
                scoreDisplay.innerText = 'Score: 0';
            } else {
                score++;
                scoreDisplay.innerText = 'Score: ' + score;
            }
        }
        
        // Check collision between player and obstacle
        function isCollided(player, obstacle) {
            const playerRect = player.getBoundingClientRect();
            const obstacleRect = obstacle.getBoundingClientRect();
            
            return !(
                playerRect.top > obstacleRect.bottom ||
                playerRect.bottom < obstacleRect.top ||
                playerRect.left > obstacleRect.right ||
                playerRect.right < obstacleRect.left
            );
        }

// Event listeners for left and right movement
        document.addEventListener('keydown', function(event) {
            if (event.key === 'ArrowLeft') {
                movePlayer(-10);
            } else if (event.key === 'ArrowRight') {
                movePlayer(10);
            }
        });

</script>
</body>

</html>