8.1 KiB

Raw Permalink Blame History Unescape Escape

宇宙ゲームを作ろうパート5: スコアとライフ

講義前クイズ

このレッスンでは、ゲームにスコアを追加し、ライフを計算する方法を学びます。

画面にテキストを描画する

ゲームのスコアを画面に表示するには、テキストを画面に配置する方法を知る必要があります。その答えは、canvasオブジェクトのfillText()メソッドを使用することです。また、使用するフォント、テキストの色、さらにはテキストの配置（左揃え、右揃え、中央揃え）など、他の要素も制御できます。以下は、画面にテキストを描画するコード例です。

ctx.font = "30px Arial";
ctx.fillStyle = "red";
ctx.textAlign = "right";
ctx.fillText("show this on the screen", 0, 0);

✅ キャンバスにテキストを追加する方法についてさらに学び、自分のテキストをもっと魅力的にしてみましょう！

ゲームの概念としてのライフ

ゲームにおけるライフの概念は単なる数字です。宇宙ゲームの文脈では、ダメージを受けるたびに1つずつ減るライフを設定するのが一般的です。数字ではなく、ミニシップやハートのようなグラフィックで表現すると、より視覚的にわかりやすくなります。

作成するもの

ゲームに以下を追加しましょう：

ゲームスコア: 敵の船を1隻撃破するごとに、ヒーローにポイントが与えられます。1隻につき100ポイントを提案します。ゲームスコアは画面の左下に表示されます。
ライフ: 自分の船には3つのライフがあります。敵の船が衝突するたびにライフが1つ減ります。ライフスコアは画面の右下に表示され、以下のグラフィックで構成されます。

推奨手順

your-workサブフォルダに作成されたファイルを見つけてください。以下の内容が含まれているはずです：

-| assets
  -| enemyShip.png
  -| player.png
  -| laserRed.png
-| index.html
-| app.js
-| package.json

your_workフォルダでプロジェクトを開始するには、以下を入力します：

cd your-work
npm start

上記のコマンドでHTTPサーバーがhttp://localhost:5000で起動します。ブラウザを開き、そのアドレスを入力してください。現在のところ、ヒーローとすべての敵が表示され、左右の矢印キーを押すとヒーローが移動し、敵を撃つことができます。

コードを追加する

必要なアセットをコピーします。solution/assets/フォルダからyour-workフォルダにlife.pngアセットを追加します。window.onload関数にlifeImgを追加してください：
```
lifeImg = await loadTexture("assets/life.png");
```

lifeImgをアセットのリストに追加します：

let heroImg,
...
lifeImg,
...
eventEmitter = new EventEmitter();

変数を追加します。合計スコア（0）と残りのライフ（3）を表すコードを追加し、これらのスコアを画面に表示します。

updateGameObjects()関数を拡張します。敵との衝突を処理するようにupdateGameObjects()関数を拡張します：

enemies.forEach(enemy => {
    const heroRect = hero.rectFromGameObject();
    if (intersectRect(heroRect, enemy.rectFromGameObject())) {
      eventEmitter.emit(Messages.COLLISION_ENEMY_HERO, { enemy });
    }
  })

ライフとポイントを追加します。

変数を初期化します。Heroクラスのthis.cooldown = 0の下にライフとポイントを設定します：
```
this.life = 3;
this.points = 0;
```

変数を画面に描画します。これらの値を画面に描画します：

function drawLife() {
  // TODO, 35, 27
  const START_POS = canvas.width - 180;
  for(let i=0; i < hero.life; i++ ) {
    ctx.drawImage(
      lifeImg, 
      START_POS + (45 * (i+1) ), 
      canvas.height - 37);
  }
}

function drawPoints() {
  ctx.font = "30px Arial";
  ctx.fillStyle = "red";
  ctx.textAlign = "left";
  drawText("Points: " + hero.points, 10, canvas.height-20);
}

function drawText(message, x, y) {
  ctx.fillText(message, x, y);
}

ゲームループにメソッドを追加します。これらの関数をwindow.onload関数のupdateGameObjects()の下に追加してください：
```
drawPoints();
drawLife();
```

ゲームルールを実装します。以下のゲームルールを実装します：

ヒーローと敵の衝突ごとに、ライフを1つ減らします。

Heroクラスを拡張してこの減算を行います：
```
decrementLife() {
  this.life--;
  if (this.life === 0) {
    this.dead = true;
  }
}
```

レーザーが敵に当たるごとに、ゲームスコアを100ポイント増やします。

Heroクラスを拡張してこの加算を行います：

  incrementPoints() {
    this.points += 100;
  }

衝突イベントエミッターにこれらの関数を追加します：

eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
   first.dead = true;
   second.dead = true;
   hero.incrementPoints();
})

eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
   enemy.dead = true;
   hero.decrementLife();
});

✅ JavaScript/Canvasで作られた他のゲームを調べてみましょう。それらの共通点は何でしょうか？

この作業が終わると、画面の右下に小さな「ライフ」シップが表示され、左下にポイントが表示されます。また、敵と衝突するとライフが減り、敵を撃つとポイントが増えるのが確認できるはずです。よくできました！ゲームはほぼ完成です。

🚀 チャレンジ

コードはほぼ完成しています。次のステップを想像できますか？

講義後クイズ

復習と自己学習

ゲームスコアとライフを増減させる方法をいくつか調べてみましょう。PlayFabのような興味深いゲームエンジンがあります。これらを使用することでゲームがどのように向上するか考えてみましょう。

課題

スコアリングゲームを作る

免責事項:
この文書は、AI翻訳サービス Co-op Translator を使用して翻訳されています。正確性を追求しておりますが、自動翻訳には誤りや不正確な部分が含まれる可能性があります。元の言語で記載された文書を正式な情報源としてお考えください。重要な情報については、専門の人間による翻訳を推奨します。この翻訳の使用に起因する誤解や誤解について、当社は責任を負いません。

8.1 KiB Raw Permalink Blame History Unescape Escape

宇宙ゲームを作ろう パート5: スコアとライフ