3d parkour where you jump on 3d cubes and have to get to the green finish line with 1 stage's game

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

No:39235

←

Prev Next

→

3d parkour where you jump on 3d cubes and have to ..ALL
Developer User17554｜Date and time 24/1/27 9:32:56
Build time 16.135 sec｜Game capacity 4.583KB｜

Script

Sure! Here's an example of a simple 3D parkour game implemented as a single HTML file. You can play it on a smartphone by tapping on the screen to jump from cube to cube and reach the green finish line.

This game uses a 3D-like effect by rendering cubes as rectangles. The player jumps from cube to cube to reach the green finish line. If the player collides with any cube, it's game over. Once the player reaches the finish line, a victory message is shown. Simply copy and paste the code into a single HTML file and open it in a web browser to play the game.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>3D Parkour Game</title>
  <style>
    canvas {
      border: 1px solid black;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas"></canvas>
  <script>
    // Game variables
    var canvas;
    var context;
    var player;
    var cubes;
    var finishLine;
    
    // Player variables
    var playerSize = 30;
    var playerColor = "blue";
    var playerX = playerSize;
    var playerY = canvas.height - playerSize * 2;
    
    // Cube variables
    var cubeSize = 80;
    var cubeColor = "gray";
    var cubeMargin = 50;
    
    // Finish line variables
    var finishLineHeight = 30;
    var finishLineColor = "green";
    
    // Game initialization
    function init() {
      canvas = document.getElementById("gameCanvas");
      context = canvas.getContext("2d");
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
      
      player = {
        x: playerX,
        y: playerY,
        width: playerSize,
        height: playerSize,
        color: playerColor,
        isJumping: false,
        jumpHeight: 200,
        jumpSpeed: 6,
        jumpCount: 0
      };
      
      cubes = [
        createCube(canvas.width * 0.2),
        createCube(canvas.width * 0.5),
        createCube(canvas.width * 0.8)
      ];
      
      finishLine = {
        x: canvas.width * 0.9,
        y: canvas.height - finishLineHeight,
        width: playerSize,
        height: finishLineHeight,
        color: finishLineColor
      };
      
      document.addEventListener("click", jump);
      
      update();
    }
    
    // Create a new cube
    function createCube(x) {
      return {
        x: x,
        y: canvas.height - cubeSize,
        width: cubeSize,
        height: cubeSize,
        color: cubeColor
      };
    }
    
    // Update game state
    function update() {
      context.clearRect(0, 0, canvas.width, canvas.height);
      
      // Render player
      context.fillStyle = player.color;
      context.fillRect(player.x, player.y, player.width, player.height);
      
      // Render cubes
      cubes.forEach(function(cube) {
        context.fillStyle = cube.color;
        context.fillRect(cube.x, cube.y, cube.width, cube.height);
      });
      
      // Render finish line
      context.fillStyle = finishLine.color;
      context.fillRect(finishLine.x, finishLine.y, finishLine.width, finishLine.height);
      
      // Check collision with cubes
      cubes.forEach(function(cube) {
        if (collides(player, cube)) {
          gameOver();
        }
      });
      
      // Check if player reached the finish line
      if (collides(player, finishLine)) {
        victory();
      }
      
      // Make player jump
      if (player.isJumping) {
        player.y -= player.jumpSpeed;
        player.jumpCount++;
        
        if (player.jumpCount === player.jumpHeight) {
          player.isJumping = false;
        }
      } else if (player.y < canvas.height - playerSize * 2) {
        player.y += player.jumpSpeed;
      }
      
      requestAnimationFrame(update);
    }
    
    // Handle player jump
    function jump() {
      if (!player.isJumping) {
        player.isJumping = true;
        player.jumpCount = 0;
      }
    }
    
    // Check collision between two objects
    function collides(obj1, obj2) {
      return obj1.x < obj2.x + obj2.width &&
             obj1.x + obj1.width > obj2.x &&
             obj1.y < obj2.y + obj2.height &&
             obj1.y + obj1.height > obj2.y;
    }
    
    // Game over
    function gameOver() {
      document.removeEventListener("click", jump);
      alert("Game over! You collided with a cube.");
      location.reload();
    }
    
    // Victory
    function victory() {
      document.removeEventListener("click", jump);
      alert("Congratulations! You reached the finish line.");
      location.reload();
    }
    
    // Start the game
    init();
  </script>
</body>
</html>
```