プレイヤーだけ実装

プレイヤーだけ実装してみる

ソースコード全体の構成を決めておく

ここからいろいろソースコードを増やしていくので、
整理のため、ソースコード全体を以下の3つのセクションに分けることにする

  1. エンティティ関連の関数
  2. ゲーム全体に関わる部分
  3. setup/draw 他

ついでに rectMode() も書いておく（後で四角形を描画するので）

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

// ---- エンティティ関連の関数 ---------------------------------------------

// （ここに何かが入る）

// ---- ゲーム全体に関わる部分 ---------------------------------------------

// （ここに何かが入る）

// ---- setup/draw 他 --------------------------------------------------

function setup() {
  createCanvas(800, 600);
  rectMode(CENTER); // 四角形の基準点を角から中心に変える

  // （ここに初期化処理が入る）
}

function draw() {
  // （ここにデータ操作処理が入る）

  background(0);
  // （ここに描画処理が入る）
}

function mousePressed() {
  // （ここにマウスボタンを押したときの処理が入る）
}

mousePressed() は、マウスボタンが押されたときに p5.js によって自動的に実行される
（→ リファレンス）

【再掲】エンティティ関連の処理

全エンティティ共通

  • 位置の更新

プレイヤー用

  • 作成
  • 重力の適用
  • ジャンプ
  • 描画

ブロック用

  • 作成
  • 描画

やること

  1. プレイヤーを入れる変数を用意する
  2. setup() の中で、プレイヤーを作成する
  3. draw() の中で、プレイヤーについて以下を行う
    • 位置の更新
    • 重力の適用
    • 描画
  4. マウスボタンを押したときだけ、プレイヤーをジャンプさせる

必要な関数が既に揃っている、と仮定して書いてみる

  • 魔法のようにプレイヤーエンティティを作成してくれる createPlayer() 関数があるとする
  • 魔法のようにエンティティの位置を更新してくれる updatePosition() 関数があるとする
  • 魔法のように略

※ createPlayer() その他の関数は実際には存在しないので、このソースコードは動きません

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

// ---- エンティティ関連の関数 ---------------------------------------------

// （ここに何かが入る）

// ---- ゲーム全体に関わる部分 ---------------------------------------------

/** プレイヤーエンティティ */
let player;

// ---- setup/draw 他 --------------------------------------------------

function setup() {
  createCanvas(800, 600);
  rectMode(CENTER);

  // プレイヤーを作成
  player = createPlayer();
}

function draw() {
  // プレイヤーの位置を更新
  updatePosition(player);

  // プレイヤーに重力を適用
  applyGravity(player);

  // プレイヤーを描画
  background(0);
  drawPlayer(player);
}

function mousePressed() {
  // プレイヤーをジャンプさせる
  applyJump(player);
}

必要な関数を実際に用意する

無いなら作ればよい

方針

プレイヤーは位置と速度を持っているので、次のようなデータがあると良さそう

// プレイヤーデータ例
let player = {
  x: 200, // 位置 x座標
  y: 300, // 位置 y座標
  vx: 0,  // 速度 x成分
  vy: 0   // 速度 y成分
};

// こうしたとき、たとえば player.x の値は 200 である

あとは、これらの位置や速度を変化させたり、位置に応じて描画したりすれば良い

なお座標 (200, 300) はこの位置

プレイヤー初期位置

実装

※ 変化のないセクション（「ゲーム全体に関わる部分」、「setup/draw 他」）は省略

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

// ---- エンティティ関連の関数 ---------------------------------------------

// 全エンティティ共通

function updatePosition(entity) {
  entity.x += entity.vx;
  entity.y += entity.vy;
}

// プレイヤーエンティティ

function createPlayer() {
  return {
    x: 200,
    y: 300,
    vx: 0,
    vy: 0
  };
}

function applyGravity(entity) {
  entity.vy += 0.15;
}

function applyJump(entity) {
  entity.vy = -5;
}

function drawPlayer(entity) {
  square(entity.x, entity.y, 40);
}

実行してみて、プレイヤーが

  • 画面に表示されていること
  • 放っておくと落下していくこと
  • マウスボタンでジャンプすること

などを確認してください。

余裕があれば、各関数の中の数字部分（200 とか 0.15 とか -5 とか）について、いろいろ値を変えてみて、実行結果がどんなふうに変わるかを見てみてください。