AI game creator

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

No:45090

←

Prev Next

→

A block jump cactos
Developer User19473｜Date and time 24/2/20 6:47:12
Build time 8.018 sec｜Game capacity 1.622KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
  <title>Block Jump Cactos</title>
  <style>
    #block {
      position: absolute;
      bottom: 0;
      width: 50px;
      height: 50px;
      background-color: black;
    }
    
    #cactus {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 20px;
      height: 60px;
      background-color: green;
    }
  </style>
</head>
<body>
  <div id="block"></div>
  <div id="cactus"></div>
  
  <script>
    let block = document.getElementById('block');
    let cactus = document.getElementById('cactus');
    let score = 0;
    
    document.addEventListener('keydown', function(event) {
      if (event.keyCode === 32) {
        jump();
      }
    });
    
    function jump() {
      if (block.offsetTop === 0) {
        block.style.bottom = '100px';
        setTimeout(function() {
          block.style.bottom = '0';
        }, 500);
      }
    }
    
    function moveCactus() {
      cactus.style.right = `${cactus.offsetLeft + 1}px`;
      if (cactus.offsetLeft > window.innerWidth) {
        cactus.style.right = '0';
        score++;
      }
      
      if (isGameOver()) {
        alert('Game Over! Your score is: ' + score);
        score = 0;
      } else {
        requestAnimationFrame(moveCactus);
      }
    }
    
    function isGameOver() {
      return cactus.offsetLeft <= (block.offsetLeft + block.offsetWidth) 
             && cactus.offsetLeft > block.offsetLeft
             && cactus.offsetTop <= (block.offsetTop + block.offsetHeight)
             && cactus.offsetTop > block.offsetTop;
    }
    
    moveCactus();
  </script>
</body>
</html>