They attack the screen one unit at a time.'s game

Warning: count(): Parameter must be an array or an object that implements Countable in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 157

Warning: in_array() expects parameter 2 to be array, bool given in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 476

Warning: count(): Parameter must be an array or an object that implements Countable in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 484
They attack the screen one unit at a time.'s game | AI game creator

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

No:3876

866

←

Prev Next

→

They attack the screen one unit at a time.
Developer User3743｜Date and time 23/6/26 20:59:23
Build time 32.623 sec｜Game capacity 3.809KB｜

Script

以下は、クリックでジャンプできる猫が障害物を避けながら進んでいくシンプルなゲームの実装例です。

このゲームでは、猫が画面の左から右に進んでいき、画面右端まで到達するとスコアが加算されます。同時に、画面右端から左に障害物が出現し、画面左端まで移動して消えていきます。障害物と猫が重なると、ゲームオーバーとなり、スコアが表示されます。クリックすると猫がジャンプして、障害物を避けることができます。猫はジャンプすると1秒後に自動的に落下します。また、スマホでも遊べるように、画面サイズに対してレスポンシブにデザインしています。絵文字を使って、猫や建物のアイコンを表示しています。

←

Prev　Next

→ 　

Back　

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

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

以下は、クリックでジャンプできる猫が障害物を避けながら進んでいくシンプルなゲームの実装例です。

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>猫のジャンプゲーム</title>
    <style>
      #game {
        position: relative;
        width: 100vw;
        height: 100vh;
        background-color: #eee;
      }
      #cat {
        position: absolute;
        left: 20%;
        bottom: 0;
        width: 10%;
        height: auto;
      }
      .obstacle {
        position: absolute;
        top: 0;
        right: -10%;
        width: 10%;
        height: auto;
        transition: right 1s linear;
      }
    </style>
  </head>
  <body>
    <div id="game">
      <img id="cat" src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/285/cat-face_1f431.png">
    </div>
    <script>
      const game = document.getElementById("game");
      const cat = document.getElementById("cat");
      
      let score = 0;
      let obstacles = [];
      
      function createObstacle() {
        const obstacle = document.createElement("img");
        obstacle.classList.add("obstacle");
        obstacle.src = "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/285/building-construction_1f3d7.png";
        obstacle.style.top = Math.floor(Math.random() * 80 + 10) + "%";
        obstacles.push(obstacle);
        game.appendChild(obstacle);
      }
      
      function updateObstacles() {
        for (let obstacle of obstacles) {
          obstacle.style.right = parseFloat(obstacle.style.right) + 0.5 + "%";
          if (obstacle.style.right >= "100%") {
            obstacle.remove();
          } else {
            if (obstacle.style.right >= "15%" && obstacle.style.right <= "25%" && parseFloat(getComputedStyle(obstacle).getPropertyValue("top")) <= parseFloat(getComputedStyle(cat).getPropertyValue("bottom"))) {
              endGame();
              return;
            }
          }
        }
        score += 0.1;
        setTimeout(updateObstacles, 10);
      }
      
      function jump() {
        if (catJumping) {
          return;
        }
        catJumping = true;
        const startY = parseFloat(getComputedStyle(cat).getPropertyValue("bottom"));
        const endY = startY + 10;
        const duration = 1000;
        const startTime = Date.now();
        function step() {
          const t = (Date.now() - startTime) / duration;
          const y = startY + (endY - startY) * t;
          cat.style.bottom = y + "%";
          if (t < 1) {
            requestAnimationFrame(step);
          } else {
            catJumping = false;
          }
        }
        requestAnimationFrame(step);
      }
      
      function endGame() {
        alert(`ゲームオーバー！\nスコア: ${score.toFixed(1)}点`);
        location.reload();
      }
      
      let catJumping = false;
      document.addEventListener("click", jump);
      setInterval(createObstacle, 1000);
      updateObstacles();
    </script>
  </body>
</html>
```