Página do Google na Versão JavaScript's game

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

No:40101

←

Prev Next

→

Página do Google na Versão JavaScript
Developer User13367｜Date and time 24/2/1 2:44:36
Build time 2.043 sec｜Game capacity 0.281KB｜

Script

The AI could not be gamified with this prompt. Please try again with different prompts. .
Displays games created by AI in the past at random.

了解しました。以下に、エルフの森を焼くゲームの実装例を示します。

得点: 0 残り時間: 60

このゲームでは、`emozi_all/forest.png`を背景画像として、プレイヤーがその上で画面をタップすることで矢を射出します。`emozi_rabbit.png`が矢の画像です。エルフは`emozi_all/elf.png`の画像で表現され、矢がエルフに当たるとエルフが消えてポイントが加算されます。残り時間が0になるとゲームが終了し、得点が表示されます。以上がエルフの森を焼くゲームの実装例です。具体的な絵やタップしたときの挙動は要件に合わせて変更してください。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

<p style='font-size:14px;background-color:#FF0'>The AI could not be gamified with this prompt. Please try again with different prompts. . <br>Displays games created by AI in the past at random.</p>了解しました。以下に、エルフの森を焼くゲームの実装例を示します。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>エルフの森を焼くゲーム</title>
  <style>
    #game-area {
      position: relative;
      width: 100%;
      height: 500px;
      background-image: url('elf_forest.png');
      background-size: contain;
      background-repeat: no-repeat;
    }

#arrow {
      position: absolute;
      width: 50px;
      height: 50px;
    }

#elf {
      position: absolute;
      width: 50px;
      height: 50px;
    }

#scoreboard {
      font-size: 20px;
    }

#timer {
      font-size: 30px;
      float: right;
    }
  </style>
</head>
<body>
  <div id="game-area">
    <img id="arrow" src="arrow.png">
    <img id="elf" src="elf.png">
  </div>
  <div>
    <span id="scoreboard">得点: 0</span>
    <span id="timer">残り時間: 60</span>
  </div>

// ゲームエリアをクリックしたときに、矢を射出する
    document.getElementById('game-area').addEventListener('click', shootArrow);

// 1秒ごとに残り時間を更新するタイマーを開始
    let countdown = setInterval(updateTimer, 1000);

// 得点と残り時間を初期表示
    updateScore();
    updateTimer();

function shootArrow(event) {
      // 矢の初期位置をクリックされた座標に設定
      let arrow = document.getElementById('arrow');
      arrow.style.left = event.clientX + 'px';
      arrow.style.top = event.clientY + 'px';

// 矢の移動アニメーションを開始
      let arrowInterval = setInterval(moveArrow, 10);

// エルフに当たったかどうかのフラグ
      let hitElf = false;

function moveArrow() {
        // 矢を上に移動させる
        let arrowPosition = parseInt(arrow.style.top);
        arrow.style.top = (arrowPosition - 5) + 'px';

// エルフと矢の位置が重なったら
        let elf = document.getElementById('elf');
        if (isOverlap(arrow, elf)) {
          hitElf = true;
          clearInterval(arrowInterval);
          elf.style.display = "none";  // エルフを非表示にする
          score += 10;  // ポイントを加算
          updateScore();
        }

// 画面外に矢が出たら
        if (arrowPosition < -50) {
          clearInterval(arrowInterval);
          if (!hitElf) {
            score -= 5;  // 罰点を加算
            updateScore();
          }
        }
      }
    }

function isOverlap(a, b) {
      let aRect = a.getBoundingClientRect();
      let bRect = b.getBoundingClientRect();

return !(aRect.top > bRect.bottom ||
               aRect.bottom < bRect.top ||
               aRect.right < bRect.left ||
               aRect.left > bRect.right);
    }

function updateScore() {
      document.getElementById('scoreboard').textContent = "得点: " + score;
    }

function updateTimer() {
      document.getElementById('timer').textContent = "残り時間: " + timer;
      timer--;

if (timer < 0) {
        clearInterval(countdown);
        alert("ゲーム終了！\n得点: " + score);
      }
    }
  </script>
</body>
</html>
```

このゲームでは、`elf_forest.png`を背景画像として、プレイヤーがその上で画面をタップすることで矢を射出します。`arrow.png`が矢の画像です。エルフは`elf.png`の画像で表現され、矢がエルフに当たるとエルフが消えてポイントが加算されます。残り時間が0になるとゲームが終了し、得点が表示されます。

以上がエルフの森を焼くゲームの実装例です。具体的な絵やタップしたときの挙動は要件に合わせて変更してください。