Create a game of burning an elf forest. The player burns the forest of elves by tapping the screen to eject an arrow and aiming it at the area where the elves are located. If the arrow hits an elf, the elf disappears and points are awarded. However, if the arrow hits something other than the elf, it is a failure and the player is penalized as many times as he/she starts to miss. Aim for a high score by earning as many points as possible within the time limit. In addition, when the forest is burned, the elves will make a desperate cry, beg for their lives, or even fight back.'s game

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

No:4726

6605

←

Prev Next

→

Create a game of burning an elf forest. The player..ALL
Developer User3589｜Date and time 23/6/28 18:51:26
Build time 42.833 sec｜Game capacity 3.909KB｜

Script

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

得点: 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.

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

```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になるとゲームが終了し、得点が表示されます。

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