You jump through gaps in the wall's game

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

No:51164

157

←

Prev Next

→

You jump through gaps in the wall
Developer User21399｜Date and time 24/3/11 3:22:27
Build time 9.406 sec｜Game capacity 2.472KB｜

Script

This game will have a blue player that can jump through the gap represented by a yellow rectangle. The player can jump by pressing the spacebar. The game will check for collisions between the player and the gap, and if the player successfully passes through the gap, an alert will show. The gap will move to a new random position each time the player passes through it. Enjoy playing!

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Jumping Game</title>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>

const player = {
      x: 50,
      y: 350,
      width: 20,
      height: 20,
      speed: 5,
      jumping: false,
      jumpHeight: 70,
      gravity: 2,
    };

const gap = {
      x: 200,
      y: 350,
      width: 50,
      height: 50,
    };

function drawPlayer() {
      ctx.fillStyle = 'blue';
      ctx.fillRect(player.x, player.y, player.width, player.height);
    }

function drawGap() {
      ctx.fillStyle = 'yellow';
      ctx.fillRect(gap.x, gap.y, gap.width, gap.height);
    }

function clearCanvas() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
    }

function jump() {
      if (!player.jumping) {
        player.y -= player.jumpHeight;
        player.jumping = true;
      }
    }

function gravity() {
      if (player.y < 350) {
        player.y += player.gravity;
      } else {
        player.y = 350;
        player.jumping = false;
      }
    }

function checkCollision() {
      if (player.x < gap.x + gap.width &&
          player.x + player.width > gap.x &&
          player.y < gap.y + gap.height &&
          player.y + player.height > gap.y) {
        alert('You passed through the gap!');
        gap.x = Math.random() * 350; // Move the gap to a new random position
      }
    }

function update() {
      clearCanvas();
      drawPlayer();
      drawGap();
      gravity();
      checkCollision();
    }

function gameLoop() {
      update();
      requestAnimationFrame(gameLoop);
    }

document.addEventListener('keydown', function(event) {
      if (event.key === ' ') {
        jump();
      }
    });

gameLoop();
  </script>
</body>
</html>
```