【ステージ#7】 ゲーム作りに関するプログラミング問題

《難易度★★★》さまざまなテクニックを組み合わせて簡単なゲームを作るスキルを試すプログラミング問題です。

問題

マウスで左右に動かせるバーと左上から飛んでくる白いボールが用意されたプログラム(HTML,CSS,JavaScript)がすでに用意されています。これをベースとして、以下の問題の指示にしたがってコードを追加・修正しなさい。

  • 問題7-1:バーでボールを打ち返せるようにしなさい
  • 問題7-2:上と左右の壁でボールが反射するようにしなさい
  • 問題7-3:バーで打ち返すごとにスコアが1点アップし、画面下のフィールドに表示されるようにしなさい。また、バーで打ち返せなかったときにはGAME OVER!が表示されるようにしなさい。

See the Pen ステージ#7問題 by programmingbird (@programmingbird) on CodePen.

問題コード(JavaScript)の確認

//バークラスがすでに用意されていてマウスで左右に動かせるようになっている。//ボールクラスも用意されていてボールが一定の速度で動くが壁やバーに反射したりはしない。//「トリガー」の設定でバーとボールを一つずつ生成しアニメーションのメインループをスタートさせている。//「アクション」の設定でメインループの中身を書いている。ここではバーとボールを表示し最新の位置を再計算させる処理だけ。

問題7-1の解説と解答例

解説(発想のしかた)

打ち返す、ということは、バーの座標とボールの座標の関係を判定すればよさそう。【アクションの設定】のメインループの中で常にこの判定をして、バーにボールが当たっていたら、y座標方向の速度の符号を反転させればいい。

  if (
    ball.y > 220 &&
    ball.y < 223 &&
    ball.x > bar.x &&
    ball.x < bar.x + bar.w
  ) {
    ball.vy *= -1;
  }

解答例

See the Pen ステージ#7問題7-1 by programmingbird (@programmingbird) on CodePen.


問題7-2の解説と解答例

解説(発想のしかた)

こんどは上と左右の壁とボールの位置関係を判定すればよい。上の壁にあたったときはy方向の速度を反転、左右の壁にあたったときはx方向の速度を反転させれば、反射することになる。この条件分岐をメインループの中に追記すればよい。

  if (ball.x < 0 || ball.x > 270) {
    ball.vx *= -1;
  }
  if (ball.y < 0) {
    ball.vy *= -1;
  }

解答例

See the Pen ステージ#7問題7-2 by programmingbird (@programmingbird) on CodePen.


問題7-3の解説と解答例

解説(発想のしかた)

//JSとHTMLの紐付け HTMLをよく見るとスコアを表示する要素(score)とGAME OVER!を表示する要素(gameover)がすでに用意されてるので、これらをquerySelectorで変数にセットしておく。GAME OVER!は最初から書いてあって、それをcssで非表示(visibility: hidden;)してあることがわかる。

//変数の設定 変数scoreを用意して初期値は0に。問題8-1で書いた打ち返し判定の部分で、打ち返したときにscoreをインクリメント(1増える)させて表示させればいい。

    score++;
    scoreField.innerHTML = score;

バーでボールを打ち返せなかったときというのは、ボールのy座標が267より大きくなったときだから、この条件で分岐して、もしそうなったらgameoverのスタイルを上書きしてhiddenにしていたGAME OVER!メッセージをvisibleにすればよい。

  if (ball.y > 267) {
    gameover.style.visibility = "visible";
    clearInterval(game);
  }

解答例

See the Pen ステージ#7問題7-3 by programmingbird (@programmingbird) on CodePen.