キーで図形を操作しよう

チャプター1このレッスンのゴール

このレッスンで完成させるものを確認しよう

チャプター2移動のための準備

このチャプターでは、物体の移動の考え方について整理しておこう。これまでも、図形の移動は扱って来たけど、改めて整理するよ。

2. 1 はじめに

このレッスンでは、図形を矢印キーに応じて動くようにしていくよ。ゲームを作成するには、必ず必要となってくる要素なので理解しよう。

2. 2 完成形の確認

完成形は次の通りだよ。

• 右矢印キーを押すと、円が右に動く
• 左矢印キーを押すと、円が左に動く
• 上矢印キーを押すと、円が上に動く
• 下矢印キーを押すと、円が下に動く

2. 3 写してみよう

var x = 100;
var y = 100;
var vx = 3;
var vy = 3;

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);

  ellipse(x, y, 30, 30);
  x += vx; 
}

コードを実行して、円が勝手に右側へ移動するアニメーションになっていればOKです。

2. 4 コードの解説

円の位置を決める変数xとyと、速さ（速度）を決める変数vxとvyを宣言しています。
また、x += vxは位置に速さ分だけ座標に数値を加えています。

2. 5 位置と速度

位置と速度はゲームのプログラミングでは基本です。

x += vx

と書くことで、位置に1フレームごとの速度を足すという意味で、動くスピードをvxの大きさで調整することができます。ちなみに、vxとvyのvはvelocity（速度）の頭文字です。

チャプター3物体を右方向に動かせるようにしよう

3. 1 変更しよう

function draw() {
  background(220);
  ellipse(x, y, 30, 30);
  //矢印キーに応じて移動させる
  if(keyCode === RIGHT_ARROW){
    x += vx;
  }
}

コードを実行して、右矢印キーを押したときに円が右に動いていればOKです。

プレビュー画面をクリックしてアクティブにする必要があります。操作方法はこちら

3. 2 コードの解説

if文の条件式に、「右矢印キーが押された」という条件が成立したときにだけ、右向きに移動するように変更しました。

3. 3 解説

押されたキーを調べる

• keyCode()
  • 押されたキーのコードを返します。よく使われる以下のキーは数値の代わりに文字定数が定められています。

BACKSPACE, DELETE, ENTER, RETURN, TAB, ESCAPE, SHIFT, CONTROL, OPTION, ALT, UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW.

チャプター4物体を上下左右に動かせるようにしよう

右に動かすことができたので、if文にelse if文でつなげ、他の方向にも動くように変更しましょう。

4. 1 変更しよう

function draw() {
  background(220);
  ellipse(x, y, 30, 30);
  //矢印キーに応じて移動させる
  if(keyCode === RIGHT_ARROW){
    x += vx;
  }else if (keyCode === LEFT_ARROW){
    x -= vx;
  }
  else if (keyCode === UP_ARROW){
    y -= vy;
  }
  else if (keyCode === DOWN_ARROW){
    y += vy;
  }
  
}

実行して、円が上下左右の矢印キーに対応して動いていればOKです。

プレビュー画面をクリックしてアクティブにする必要があります。操作方法はこちら

4. 2 コードの解説

else if文で、左、上、下方向への移動を実現しています。例えばy += vyはy = y + vyと同じ意味で、上方向に速度分だけ位置をずらすという命令です。

4. 3 解説

vxやvyを使ってわかりやすくプログラムを書くことができていますね。

チャプター5物体が画面外になった場合の処理を加えよう

画面から外れてしまったときに、画面の中心に戻ってくるようにしよう。
条件式は論理演算子を使って1行で書くことができることを確認しよう。

5. 1 変更しよう

  }
  
  //画面外になった場合は中心に再度配置
  if(x<0 || y<0 || x>width || y>height){
    x = width/2;
    y = height/2;
　}
}

5. 2 コードの解説

28行目のx<0 || y<0 || x>width || y>heightにある||は、「または」という意味の論理演算子です。 画面の端4辺の外側を指定しています。また、画面の中央はシステム変数widthやheightを使って、画面の中央に再度配置するようにしています。

論理演算子||

||：は「または」という意味の論理演算子で、右側と左側にある条件式のどちらかが成立すればtrueとなります。