Make a parkour fighting game's game

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

No:6668

←

Prev Next

→

Make a parkour fighting game
Developer User3913｜Date and time 23/7/3 2:55:09
Build time 34.16 sec｜Game capacity 3.501KB｜

Script

Sure! Here's a simple example of a parkour fighting game implemented as a single HTML file. Please note that this is a very basic implementation and can be expanded upon to add more features, levels, and complexity.

To play the game, you would need to open the HTML file in a web browser, and you can control the player by pressing the up arrow key or the spacebar to make the player jump. The objective is to avoid colliding with the blue obstacle by timing your jumps correctly. If the player collides with the obstacle, a game over alert will be displayed, and the game will reset.

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Parkour Fighting Game</title>
  <style>
    #game {
      width: 400px;
      height: 400px;
      border: 1px solid black;
      position: relative;
    }

#player {
      width: 40px;
      height: 40px;
      background-color: red;
      position: absolute;
      bottom: 0;
    }

#obstacle {
      width: 100px;
      height: 20px;
      background-color: blue;
      position: absolute;
      bottom: 0;
      left: 200px;
    }
  </style>
</head>
<body>
  <div id="game">
    <div id="player"></div>
    <div id="obstacle"></div>
  </div>

isJumping = true;
      player.style.transition = `bottom ${jumpDuration / 1000}s`;
      player.style.bottom = `${jumpHeight}px`;
      
      setTimeout(() => {
        player.style.transition = `bottom ${jumpDuration / 1000}s`;
        player.style.bottom = '0';

setTimeout(() => {
          isJumping = false; // Allow jumping again
        }, jumpDuration);
      }, jumpDuration);
    }

// Main game loop
    function gameLoop() {
      const obstaclePosition = parseInt(obstacle.style.left);
      obstacle.style.left = `${obstaclePosition - obstacleSpeed}px`;

if (obstaclePosition <= -100) {
        // Reset obstacle position if it goes off-screen
        obstacle.style.left = '400px';
      }

// Check for collision
      if (isColliding()) {
        alert('Game Over!');
        resetGame();
      }

requestAnimationFrame(gameLoop);
    }

// Reset the game state
    function resetGame() {
      obstacle.style.left = '400px';
    }

// Check for collision between player and obstacle
    function isColliding() {
      const playerRect = player.getBoundingClientRect();
      const obstacleRect = obstacle.getBoundingClientRect();

return (
        playerRect.bottom >= obstacleRect.top &&
        playerRect.top <= obstacleRect.bottom &&
        playerRect.right >= obstacleRect.left &&
        playerRect.left <= obstacleRect.right
      );
    }

// Add event listener for jump action
    document.addEventListener('keydown', function(event) {
      if (event.key === 'ArrowUp' || event.key === ' ') {
        jump();
      }
    });

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