Create a game where a stickman runs and hops over items's game | AI game creator

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

No:45915

96

Create a game where a stickman runs and hops over ..ALL
Developer User19746｜Date and time 24/2/22 2:14:17
Build time 9.804 sec｜Game capacity 1.85KB｜

→ 　

0　

0　

[PR]現在の本の売れ筋ランキング

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
<head>
  <title>Stickman Runner Game</title>
  <style>
    #game {
      width: 100%;
      height: 400px;
      background-color: lightblue;
      position: relative;
    }
    #stickman {
      width: 50px;
      height: 50px;
      background-color: black;
      position: absolute;
      bottom: 0;
      left: 0;
    }
    .item {
      width: 30px;
      height: 30px;
      background-color: red;
      position: absolute;
      bottom: 0;
    }
  </style>
</head>
<body>
<div id="game">
  <div id="stickman"></div>
</div>

<script>
  let stickman = document.getElementById('stickman');
  let game = document.getElementById('game');
  let isJumping = false;
  
  document.addEventListener('keydown', function(event) {
    if (event.code === 'Space' && !isJumping) {
      isJumping = true;
      jump();
    }
  });
  
  function jump() {
    let jumpHeight = 100;
    let jumpSpeed = 5;
    
    let interval = setInterval(function() {
      if (jumpHeight <= 0) {
        clearInterval(interval);
        isJumping = false;
      }
      stickman.style.bottom = jumpHeight + 'px';
      jumpHeight -= jumpSpeed;
    }, 20);
  }
  
  function getRandomNumber(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }
  
  function createItem() {
    let item = document.createElement('div');
    item.classList.add('item');
    item.style.left = game.offsetWidth + 'px';
    game.appendChild(item);
    
    let distance = game.offsetWidth + item.offsetWidth;
    let itemSpeed = 5;
    let interval = setInterval(function() {
      if (distance <= 0) {
        clearInterval(interval);
        game.removeChild(item);
      }
      item.style.left = distance + 'px';
      distance -= itemSpeed;
    }, 20);
  }
  
  setInterval(function() {
    createItem();
  }, 2000);

</script>
</body>
</html>