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

No:1588

570

The Tortoise and Achilles Race and its Forecast
Developer AI絵師｜Date and time 23/6/18 19:07:32
Build time 47.458 sec｜Game capacity 4.917KB｜

亀とアキレスのレースをテーマにした簡単なゲームです。ゲームの流れは以下の通りです。 1. スタート画面で「START」をタップすると、ゲームが始まります。 2. 亀とアキレスがスタートラインに並びます。 3. 予想する勝者を選んで、「予想する」ボタンをタップします。 4. レースが始まり、選んだキャラクターが勝利した場合は「WIN!」と表示されます。負けた場合は「LOSE...」と表示されます。 5. 結果画面で「もう一度遊ぶ」ボタンをタップすると、再度スタート画面に戻ります。 JavaScriptを使用して、キャラクターの移動や結果の判定などを実装しています。以下が実際のプログラムです。

亀とアキレスのレース

START

誰が勝つと予想しますか？
亀アキレス

もう一度遊ぶ

スマートフォンで操作することを前提に、タップ可能な要素として「START」、「予想する」、「もう一度遊ぶ」ボタンを設置しています。また、絵文字も積極的に使用してキャラクターのイメージを表現しています。

→ 　

2　

0　

[PR]現在の人気ゲームランキング

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

(C)2023 HisashiApp

亀とアキレスのレースをテーマにした簡単なゲームです。

ゲームの流れは以下の通りです。

1. スタート画面で「START」をタップすると、ゲームが始まります。
2. 亀とアキレスがスタートラインに並びます。
3. 予想する勝者を選んで、「予想する」ボタンをタップします。
4. レースが始まり、選んだキャラクターが勝利した場合は「WIN!」と表示されます。負けた場合は「LOSE...」と表示されます。
5. 結果画面で「もう一度遊ぶ」ボタンをタップすると、再度スタート画面に戻ります。

JavaScriptを使用して、キャラクターの移動や結果の判定などを実装しています。

以下が実際のプログラムです。

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>亀とアキレスのレース</title>
    <style>
      body {
        font-size: 2em;
        text-align: center;
        margin: 0;
        padding: 0;
      }
      #start {
        padding: 10px;
        background-color: #FFC107;
        border-radius: 10px;
        cursor: pointer;
      }
      #race {
        position: relative;
        height: 200px;
        background-color: #9E9E9E;
      }
      #kame, #akire {
        position: absolute;
        bottom: 0;
        width: 50px;
        height: 50px;
        background-repeat: no-repeat;
        background-size: contain;
      }
      #kame {
        left: 10%;
        background-image: url('🐢');
      }
      #akire {
        left: 50%;
        background-image: url('🏃');
      }
      #predict {
        margin: 20px;
        font-size: 1.5em;
      }
      button {
        padding: 10px;
        background-color: #FFC107;
        border-radius: 10px;
        cursor: pointer;
      }
      #result {
        margin: 20px;
        font-size: 2em;
      }
      #play-again {
        padding: 10px;
        background-color: #FFC107;
        border-radius: 10px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <h1>亀とアキレスのレース</h1>
    <div id="start">
      START
    </div>
    <div id="race">
      <div id="kame"></div>
      <div id="akire"></div>
    </div>
    <div id="predict">
      誰が勝つと予想しますか？
      <br>
      <input type="radio" name="predict" value="kame">亀
      <input type="radio" name="predict" value="akire">アキレス
      <br>
      <button id="predict-button">予想する</button>
    </div>
    <div id="result"></div>
    <div id="play-again">
      もう一度遊ぶ
    </div>
    <script>
      const kame = document.getElementById('kame');
      const akire = document.getElementById('akire');
      const predictButton = document.getElementById('predict-button');
      const result = document.getElementById('result');
      const playAgain = document.getElementById('play-again');

function moveKame() {
        let pos = 10;
        let id = setInterval(frame, 10);
        function frame() {
          if (pos === 50) {
            clearInterval(id);
          } else {
            pos++;
            kame.style.left = pos + '%';
          }
        }
      }

function moveAkire() {
        let pos = 50;
        let id = setInterval(frame, 5);
        function frame() {
          if (pos === 90) {
            clearInterval(id);
            checkWinner();
          } else {
            pos++;
            akire.style.left = pos + '%';
          }
        }
      }

function checkWinner() {
        const predict = document.querySelector('input[name="predict"]:checked').value;
        if (predict === 'kame') {
          result.textContent = 'LOSE...';
        } else {
          result.textContent = 'WIN!';
        }
        playAgain.style.display = 'block';

}

function startRace() {
        predictButton.style.display = 'block';
        moveKame();
        moveAkire();
      }

function playAgainGame() {
        predictButton.style.display = 'none';
        kame.style.left = '10%';
        akire.style.left = '50%';
        result.textContent = '';
        playAgain.style.display = 'none';
      }

document.addEventListener('DOMContentLoaded', function() {
        predictButton.style.display = 'none';
        playAgain.style.display = 'none';

document.getElementById('start').addEventListener('click', startRace);
        predictButton.addEventListener('click', checkWinner);
        playAgain.addEventListener('click', playAgainGame);
      });
    </script>
  </body>
</html>
```

スマートフォンで操作することを前提に、タップ可能な要素として「START」、「予想する」、「もう一度遊ぶ」ボタンを設置しています。

また、絵文字も積極的に使用してキャラクターのイメージを表現しています。