勇者を操作してドラゴンを撃退する's game

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

No:31911

←

Prev Next

→

勇者を操作してドラゴンを撃退する
Developer User15271｜Date and time 23/12/28 21:37:01
Build time 40.684 sec｜Game capacity 3.653KB｜

Script

了解しました。以下に、勇者を操作してドラゴンを撃退するシンプルなゲームのプログラムを示します。

🤺 🐉

このゲームでは、`game-board`という枠内で、勇者（剣を持った人の絵文字）をキーボード操作で移動させ、ドラゴン（ドラゴンの絵文字）をクリックして撃退することが目的です。ゲームが始まると、ランダムな位置に勇者が配置されます。キーボードの矢印キーで勇者を上下左右に移動させることができます。ドラゴンをクリックすると、ドラゴンを撃退したことが表示され、ゲームが終了します。このプログラムは1枚のHTMLファイルとして実装されており、必ずJavaScriptが含まれています。また、スマートフォンの操作を前提としており、絵文字も使用しています。

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

了解しました。以下に、勇者を操作してドラゴンを撃退するシンプルなゲームのプログラムを示します。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ドラゴン撃退ゲーム</title>
  <style>
    #game-board {
      width: 200px;
      height: 200px;
      border: 1px solid black;
      position: relative;
    }
    #hero {
      position: absolute;
      top: 0;
      left: 0;
      font-size: 48px;
    }
    #dragon {
      position: absolute;
      top: 100px;
      left: 100px;
      font-size: 48px;
    }
    #result {
      margin-top: 20px;
      font-size: 24px;
    }
  </style>
</head>
<body>
  <div id="game-board">
    <span id="hero">🤺</span>
    <span id="dragon">🐉</span>
  </div>
  <div id="result"></div>

// 勇者の位置
      heroX: 0,
      heroY: 0,

// ゲーム結果
      playing: true,

// ゲーム開始時の処理
      init: function() {
        this.heroX = Math.floor(Math.random() * 161); // 0 ~ 160 の乱数
        this.heroY = Math.floor(Math.random() * 161); // 0 ~ 160 の乱数
        this.hero.style.top = this.heroY + "px";
        this.hero.style.left = this.heroX + "px";

// ドラゴンをクリックした時の処理
        this.dragon.addEventListener("click", () => {
          if (this.playing) {
            this.result.textContent = "ドラゴンを撃退しました！";
            this.playing = false;
          }
        });

// ヒーローを移動させる処理
        window.addEventListener("keydown", (event) => {
          if (this.playing) {
            if (event.key === "ArrowUp") {
              this.moveHero(0, -10);
            } else if (event.key === "ArrowDown") {
              this.moveHero(0, 10);
            } else if (event.key === "ArrowLeft") {
              this.moveHero(-10, 0);
            } else if (event.key === "ArrowRight") {
              this.moveHero(10, 0);
            }
          }
        });
      },

// 勇者を移動する処理
      moveHero: function(dx, dy) {
        const newHeroX = this.heroX + dx;
        const newHeroY = this.heroY + dy;

// 画面外には移動できないようにする
        if (newHeroX >= 0 && newHeroX <= 160 && newHeroY >= 0 && newHeroY <= 160) {
          this.heroX = newHeroX;
          this.heroY = newHeroY;

this.hero.style.top = this.heroY + "px";
          this.hero.style.left = this.heroX + "px";
        }
      }
    };

// ゲーム開始
    game.init();
  </script>
</body>
</html>
```

このプログラムは1枚のHTMLファイルとして実装されており、必ずJavaScriptが含まれています。また、スマートフォンの操作を前提としており、絵文字も使用しています。