Make a ball that can jump and move with your control, and the ground is green And background is blue's game

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

No:19834

106

←

Prev Next

→

Make a ball that can jump and move with your contr..ALL
Developer User8801｜Date and time 23/10/7 3:57:03
Build time 7.325 sec｜Game capacity 1.587KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Jumping Ball Game</title>
  <style>
    body {
      background-color: blue;
      margin: 0;
      padding: 0;
    }

#ground {
      width: 100%;
      height: 20px;
      background-color: green;
      position: absolute;
      bottom: 0;
    }

#ball {
      width: 50px;
      height: 50px;
      background-color: red;
      position: absolute;
      bottom: 20px;
    }
  </style>
</head>
<body>
  <script>
    window.onload = function() {
      var ball = document.getElementById('ball');
      var jumpHeight = 200;
      var jumping = false;

document.addEventListener('keydown', function(event) {
        if (event.keyCode === 32 && !jumping) { // Spacebar key code
          jumping = true;
          var currentPosition = parseInt(ball.style.bottom);
          var targetPosition = currentPosition + jumpHeight;

var jumpInterval = setInterval(function() {
            currentPosition += 10;
            ball.style.bottom = currentPosition + 'px';
            
            if (currentPosition >= targetPosition) {
              clearInterval(jumpInterval);
              jumpInterval = setInterval(function() {
                currentPosition -= 10;
                ball.style.bottom = currentPosition + 'px';

if (currentPosition <= 20) {
                  clearInterval(jumpInterval);
                }
              }, 20);
              jumping = false;
            }
          }, 20);
        }
      });
    };
  </script>