black platform with a white cube you can control and jump<l_0>'s game

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

No:46221

←

Prev Next

→

black platform with a white cube you can control ..ALL
Developer unknown｜Date and time 24/2/24 1:38:07
Build time 7.017 sec｜Game capacity 1.514KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Jumping Cube Game</title>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>
  
  <script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');
    
    let cube = {
      x: 50,
      y: 350,
      size: 50,
      jumpHeight: 100,
      isJumping: false
    };
    
    function drawCube() {
      ctx.fillStyle = 'white';
      ctx.fillRect(cube.x, cube.y, cube.size, cube.size);
    }
    
    function clearCanvas() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
    }
    
    function jump() {
      if (!cube.isJumping) {
        cube.isJumping = true;
        let jumpInterval = setInterval(() => {
          if (cube.y > cube.jumpHeight) {
            cube.y -= 5;
          } else {
            clearInterval(jumpInterval);
            fall();
          }
        }, 10);
      }
    }
    
    function fall() {
      let fallInterval = setInterval(() => {
        if (cube.y < 350) {
          cube.y += 5;
        } else {
          cube.isJumping = false;
          clearInterval(fallInterval);
        }
      }, 10);
    }
    
    function gameLoop() {
      clearCanvas();
      drawCube();
      requestAnimationFrame(gameLoop);
    }
    
    document.addEventListener('keydown', (event) => {
      if (event.key === ' ') {
        jump();
      }
    });
    
    gameLoop();
  </script>
</body>
</html>