キャンバスを設定してマウス操作でプレイヤーを移動できるようにしよう

チャプター1キャンバスと背景を作ろう

まずキャンバスを幅460,高さ680を目安に作成しましょう。
次に、背景色を設定しよう。色は好きな色でかまいません、プレイヤーと区別できるように気を付けて色を設定しよう。

1. 1 ヒント

• キャンバスの作成メソッドはcreateCavas()
• キャンバスを作成するのは一度だけです。繰り返さないように注意しよう
• 背景色の設定background()
• 背景色は毎フレーム更新されるようにしよう（プレイヤーを描画した後などに毎フレーム背景を書き換えなかった場合も試してみよう）

チャプター2プレイヤーの描画

画面下部、中央にプレーヤーを正方形で表示しよう。
座標が四角の中心になるように rectMode()をCENTERに指定してください。
プレイヤーは変数x（X座標）、y（Y座標）、size（正方形の一辺の長さ）を作って正方形を描画しましょう。
色は背景と混ざらないように好きな色を指定しよう。

2. 1 ヒント

• 色の設定はfill()
• 枠線の色はstroke()
• 四角の描画はrect()（幅と高さを同じにすれば正方形になります）
• 色の設定をしてから図形の描画をするように気をつけよう
• システム変数widthやheightを使うとキャンバスの幅と高さが取得できます
  ( widthやheightはcreateCavas()実行した後に値が更新されます、順序に気をつけよう)

変数を宣言した例

let x; //X座標
let y; //Y座標
let size; //幅・高さ

function setup() {
  //省略
}

function draw() {
  //省略
}

チャプター3プレイヤーを移動させよう

​
プレーヤーの移動処理を作っていこう。
移動はマウスの左右の動きを追いかけるようにします。
x軸の移動速度の変数speedXを作り、マウスとプレイヤーのx座標を比較して毎フレームspeedXの移動量で追いかけるようにしてみましょう。
speedXの値は10を目安とします。

​

3. 1 ヒント

• 条件分岐if~else文のリファレンス
• マウスのx座標はシステム変数のmouseXで取得できます。

変数を宣言した例

let x; //X座標
let y; //Y座標
let size; //幅・高さ
let speedX //x座標の移動速度

チャプター4プレイヤープレイヤーが画面からはみ出した時の処理

このままだと、プレーヤーが画面の外にはみ出してしまいます。
プレイヤーのX座標と画面幅、プレイヤーの正方形の横幅を確認して画面からはみ出していたら画面内に戻す処理を追加しよう。

​

4. 1 ヒント

• プレイヤーのX座標にプレイヤーの正方形の幅の半分の長さを引くとプレイヤーの左端の位置がわかる
• プレイヤーのX座標にプレイヤーの正方形の幅の半分の長さを足すとプレイヤーの右端の位置がわかる