AI game creator

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
Hoe and Fish's game | AI game creator

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

No:4328

732

←

Prev Next

→

Hoe and Fish
Developer User3589｜Date and time 23/6/27 19:50:55
Build time 30.977 sec｜Game capacity 3.537KB｜

Script

鍬と魚のゲームを作りました。ゲームのルールは以下の通りです。 - 画面上にランダムに魚が出現します。 - 操作するのは鍬です。スマホ操作が前提のため、画面をタップすることで鍬が移動します。 - 鍬が魚の位置に到達したら、魚を捕まえることができます。 - 1分間で何匹の魚を捕まえられるかを競います。実際のプログラムは以下のようになります。

このプログラムでは、魚がランダムに出現し、クリックすることで鍬が移動します。鍬と魚が接触した場合、魚を捕まえることができ、スコアが加算されます。1分間で何匹の魚を捕まえられるかを競います。残り時間は画面に表示されます。また、絵文字を使って魚を表現しています。

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

鍬と魚のゲームを作りました。

ゲームのルールは以下の通りです。
- 画面上にランダムに魚が出現します。
- 操作するのは鍬です。スマホ操作が前提のため、画面をタップすることで鍬が移動します。
- 鍬が魚の位置に到達したら、魚を捕まえることができます。
- 1分間で何匹の魚を捕まえられるかを競います。

実際のプログラムは以下のようになります。

<html>
  <head>
    <title>鍬と魚</title>
    <style>
      #game-area {
        height: 200px;
        width: 100%;
        position: relative;
      }
      #shovel {
        height: 50px;
        width: 50px;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        background-color: #333;
        border-radius: 25px;
      }
      .fish {
        height: 30px;
        width: 30px;
        position: absolute;
        top: 0;
        left: 0;
        background-image: url('https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/google/263/fish_1f41f.png');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
      }
    </style>
  </head>
  <body>
    <div id="game-area">
      <div id="shovel"></div>
    </div>
    <script>
      let score = 0;
      let timeLeft = 60;
      
      setInterval(function() {
        const gameArea = document.getElementById('game-area');
        const fish = document.createElement('div');
        fish.classList.add('fish');
        fish.style.left = (Math.random() * 100) + '%';
        gameArea.appendChild(fish);
        setTimeout(function() {
          gameArea.removeChild(fish);
        }, 2000);
      }, 1500);
      
      document.addEventListener('click', function(event) {
        const shovel = document.getElementById('shovel');
        shovel.style.left = (event.clientX / window.innerWidth) * 100 + '%';
        shovel.style.transitionDuration = '0.2s';
        setTimeout(function() {
          shovel.style.transitionDuration = '0s';
        }, 200);
        const fishes = document.getElementsByClassName('fish');
        for (i = 0; i < fishes.length; i++) {
          const fish = fishes[i];
          if (checkCollision(shovel, fish)) {
            document.getElementById('game-area').removeChild(fish);
            score++;
          }
        }
      });
      
      setInterval(function() {
        const time = document.getElementById('time');
        timeLeft--;
        time.textContent = '残り時間: ' + timeLeft + '秒';
        if (timeLeft === 0) {
          alert('時間切れ！ あなたのスコアは' + score + '匹です。');
        }
      }, 1000);
      
      function checkCollision(element1, element2) {
        const rect1 = element1.getBoundingClientRect();
        const rect2 = element2.getBoundingClientRect();
        return !(
          rect1.right < rect2.left || 
          rect1.left > rect2.right || 
          rect1.bottom < rect2.top || 
          rect1.top > rect2.bottom
        );
      }
    </script>
  </body>
</html>