潜水艦の進路を変えよう

教材のダウンロード

下のリンクからhtmlファイルと画像ファイルをダウンロードしましょう。

ダウンロードした html ファイルをブラウザにドラッグします。

前回と同様，右から左に潜水艦が動いています。しかし，左端までくると進路を反対方向に変えました。どうやって実装しているのでしょう。

潜水艦の位置はどう決めているか

その前に，潜水艦の位置はどのように決められているのか確認しておきましょう。

教材の 99行目をみてください。

  submarineX = submarineX + submarineDirection;
  submarineY = submarineY + submarineUp;

submarineX と submarineY はそれぞれ潜水艦の x 座標，y 座標です。それらの変数に毎回ちがう値が代入されています。

submarineX でいうと，submarineX + submarineDirection を計算した値が代入されています。

submarineX, submarineY, submarineDirection は29行目以降で宣言されています。

  let submarineX = 400;
  let submarineY = 300;
  
  // 潜水艦の移動方向
  let submarineDirection = -2;

submarineX は最初 400 という値が代入されています。submarineDirection は33行目で宣言されていますが，-2 という値が代入されています。

この文は，$${400 + ( -2 )}$$を計算して，398，その 398 を submarineX に代入するという意味ですね。すると，潜水艦はどちらの方向に移動していますか？x 軸でいうと，400 から 398 へ移動したのですから，左方向に 2 移動しています。

この計算と代入を繰り返すことで，潜水艦は右から左にに移動しているわけです。

進路はどうやって変わるのか

それではどうして，左端にぶつかると進路を変えるのでしょう。

教材の 104 行目をみましょう。

  if (submarineX <= 0 || submarineX >= 800 - 32) {
      submarineDirection = submarineDirection * -1;

      if (submarineDirection == -999) {
	  submarine.src = "submarine-minus.png";
      } else {
	  submarine.src = "submarine-plus.png";
      }
  }

if から始まる文があります。これを if 文といいます。

if とは英語でもしもという意味です。if 文は次のような書き方をします。

潜水艦が，もしも左端にぶつかったら，進方向を変えてくれと頼みたい。どうかくか。まずは日本語で書いてみます（もちろん，JavaScript は日本語を理解しませんので動きません）。

潜水艦が左端にぶつかっているかどうか，それをどう判定したらいいでしょう。

そう，潜水艦のx座標が使えますね。左端の x 座標は何ですか。そう，ゼロです。

ですから，潜水艦が左端にぶつかっているかどうかは，submarineX が 0 以下の値であれば，ぶつかっていることになります。

そのとき，進行方向を変えるにはどうしたらいいか。submarineDireciton は今 -2 ですが，2 にしたい。向きを変えるにはマイナスをかけたらいいと中学の数学で学びましたね。

今までのことをふまえて，書きたコードが次のコードです。教材の 104 行目です。再掲しましょう。

  if (submarineX <= 0 || submarineX >= 800 - 32) {
      submarineDirection = submarineDirection * -1;

      if (submarineDirection == -999) {
	  submarine.src = "submarine-minus.png";
      } else {
	  submarine.src = "submarine-plus.png";
      }
  }

条件のところに，submarineX <= 0 とあります。これは submarineX の値がゼロ以下か？と言う意味です。潜水艦は左端を飛び出しているか？ということですね。

それに続いて，submarineX >= 800-32 とあります。これは submarineX の値が 800-32 以上か？と言う意味です。潜水艦は右端を飛び出しているか？ということですね。なぜ 800-32 なのかは考えてみてください。答えは次回説明しましょう。

両者の間に || があります。これは，OR。あるいは，または，と言う意味です。

つまり，潜水艦が，左端を飛び出している，OR （あるいは），右端を飛び出しているかという意味になります。

画面を飛び出している場合に，{} のなかが実行されます。{} のなかには，次のコードがあります。

      submarineDirection = submarineDirection * -1;

submarineDirection が -2 のとき，それに -1 をかけたら，どうなりますか。

続けて聞きます。

submarineDirection が 2  のとき，それに -1 をかけたら，どうなりますか。

進行方向が変わることがわかりますか？これは，中学の数学でも大切な部分ですから，じっくりこれからも考えていきましょう。

if 文をより詳しく

今日は if 文を勉強しました。わかっているかどうかを確かめるには，演習が一番です。演習にチャレンジする前に，if 文をもうしこし詳しく説明しておきましょう。

さきほどは，条件が成立しているときだけ，してほしいことを書きました。if 文では成立していないtきにもしてほしいことを書くことができます。

演習

教材の 107 行を見てください。

      if (submarineDirection == -999) {
	  submarine.src = "submarine-minus.png";
      } else {
	  submarine.src = "submarine-plus.png";
      }

さきほどの説明と同じ構造ですね。

これは，submarineDirection つまり潜水艦の方向がマイナスのときには，潜水艦の画像を submarine-minus.png にし，プラスのときは，submarine-plus.png にするというコードです。これによって，進行方向によって潜水艦の画像が切り替わります。

しかし，バグがあって，期待している動きになりません。107 行目の１行を正しい表現で書けば，期待しているように動くのですが。

あなたならどう書きますか？

関係するサイト

これからの記事では，ドッタウンさんが作られた潜水艦と UFO の画像を使います。ドッタウンさんの作られるドット絵はとてもすてきだと思います。

おすすめの書籍

遊んでみたくなるゲームがたくさん紹介されています。解説も丁寧にされているので，ひとりでも勉強を進めることができるでしょう。