プレイヤーの操作

JavaScriptでジャンプゲーム作成

Index

キーイベントの設定
update_player関数の更新
キーイベントの更新
実行結果

このセクションではSpaceを押したときにプレイヤーがジャンプするようにキーイベントを設定します。

キーイベントの設定

まずプレイヤー変数にジャンプを判定する初期値がfalseのjump_flagを追加します。

main.js

// プレイヤー変数
let px = 70;
let py = 50;
let ps = 20;
let pvy = 8;
let jump_flag = false;

JavaScript

main.js

// プレイヤー変数
let px = 70;
let py = 50;
let ps = 20;
let pvy = 8;
let jump_flag = false;

JavaScript

次に、documentにaddEventListener()使用して、キーイベントを設定します。

JavaScript

// プレイヤー変数
let px = 70;
let py = 50;
let ps = 20;
let pvy = 8;
let jump_flag = false;

// キーイベント
document.addEventListener("keydown", event => {
  if (event.key === " ") {
    jump_flag = true;
  }
});

JavaScript

// プレイヤー変数
let px = 70;
let py = 50;
let ps = 20;
let pvy = 8;
let jump_flag = false;

// キーイベント
document.addEventListener("keydown", event => {
  if (event.key === " ") {
    jump_flag = true;
  }
});

JavaScript

addEventListener()について説明します。addEventListener()は、第1引数にイベントの種類を文字列で入れます。今回は"keydown"を入れたので、キーが押されたときにイベントが発生します。第2引数にはイベントが発生したときの処理を関数で入れます。今回は引数がeventのアロー関数を入れます。受け取った引数にはいくつかのプロパティーが用意されていて、"keydown"の場合はkeyプロパティーで押されたキーを文字列で返してくれます。22行目ではevent.key === " "で押されたキーがSpaceか判定して、Spaceであればjump_flagをtrueにします。以上でキーイベントの設定ができました。

update_player関数の更新

まずプレイヤー変数に、基準速度standard_pvy、ジャンプした場合の速度jump_pvy、基準速度未満の場合の追加速度add_pvyを追加します。また、変数が増えてきたのでコメントを追加します。

main.js

// プレイヤー変数
// 座標
let px = 70;
let py = 50;
// サイズ
let ps = 20;
// 速度
let pvy = 8;
// 基準速度
let standard_pvy = 8;
// ジャンプした場合の速度
let jump_pvy = -15;
// 基準速度未満の場合の追加速度
let add_pvy = 1.5;
// ジャンプ判定
let jump_flag = false;

JavaScript

main.js

// プレイヤー変数
// 座標
let px = 70;
let py = 50;
// サイズ
let ps = 20;
// 速度
let pvy = 8;
// 基準速度
let standard_pvy = 8;
// ジャンプした場合の速度
let jump_pvy = -15;
// 基準速度未満の場合の追加速度
let add_pvy = 1.5;
// ジャンプ判定
let jump_flag = false;

JavaScript

次に、update_player関数にジャンプ時の処理、基準速度未満の場合の処理、基準速度を超えた場合の処理を追加します。また、処理が増えてきたのでコメントを追加します。

main.js

// プレイヤーの更新
function update_player() {
  // ジャンプ時の処理
  if (jump_flag) {
    jump_flag = false;
    pvy = jump_pvy;
  }

  // 基準速度未満であれば追加速度を与える
  if (pvy < standard_pvy) {
    pvy += add_pvy;
  }

  // 基準速度を超えていれば基準速度にする
  if (pvy > standard_pvy) {
    pvy = standard_pvy;
  }

  // 速度をもとに座標を変更
  py += pvy;
}

JavaScript

main.js

// プレイヤーの更新
function update_player() {
  // ジャンプ時の処理
  if (jump_flag) {
    jump_flag = false;
    pvy = jump_pvy;
  }

  // 基準速度未満であれば追加速度を与える
  if (pvy < standard_pvy) {
    pvy += add_pvy;
  }

  // 基準速度を超えていれば基準速度にする
  if (pvy > standard_pvy) {
    pvy = standard_pvy;
  }

  // 速度をもとに座標を変更
  py += pvy;
}

JavaScript

48行目からのジャンプ時の処理は、jump_flagをfalseにして速度をジャンプ時の速度にします。53行目からの基準速度未満の場合の処理は、コメントに書いてある通り速度に追加速度を与えます。58行目からの基準速度を超えた場合の処理は、このコードではジャンプしてから再度ジャンプをしない場合、15フレーム後に速度が基準速度を超えるので基準速度に戻します。

キーイベントの更新

Chromeに移動してindex.htmlを更新します。実行結果は以下の画像のようにSpaceを押すとプレイヤーがジャンプします。

ただ、Spaceを連打するとジャンプ中でもさらにジャンプします。今回はジャンプできる最低の速度を設定してその速度以上の場合のみジャンプできるようにします。

まず、プレイヤー変数にジャンプできる最低の速度min_jump_pvyを追加します。

main.js

// プレイヤー変数
// 座標
let px = 70;
let py = 50;
// サイズ
let ps = 20;
// 速度
let pvy = 8;
// 基準速度
let standard_pvy = 8;
// ジャンプした場合の速度
let jump_pvy = -15;
// ジャンプできる最低速度
let min_jump_pvy = 6;
// 基準速度未満の場合の追加速度
let add_pvy = 1.5;
// ジャンプ判定
let jump_flag = false;

JavaScript

main.js

// プレイヤー変数
// 座標
let px = 70;
let py = 50;
// サイズ
let ps = 20;
// 速度
let pvy = 8;
// 基準速度
let standard_pvy = 8;
// ジャンプした場合の速度
let jump_pvy = -15;
// ジャンプできる最低速度
let min_jump_pvy = 6;
// 基準速度未満の場合の追加速度
let add_pvy = 1.5;
// ジャンプ判定
let jump_flag = false;

JavaScript

次にキーイベントの処理min_jump_pvy以上の場合のみjump_flagをtrueにします。

main.js

// キーイベント
document.addEventListener("keydown", event => {
  if (event.key === " ") {
    if (pvy >= min_jump_pvy) {
      jump_flag = true;
    }
  }
});

JavaScript

main.js

// キーイベント
document.addEventListener("keydown", event => {
  if (event.key === " ") {
    if (pvy >= min_jump_pvy) {
      jump_flag = true;
    }
  }
});

JavaScript

以上でキーイベントの更新が終わりました。最終的にmain.jsは以下のようになります。

main.js

// 描画コンテキストの取得
let cvs = document.querySelector("canvas");
let ctx = cvs.getContext("2d");

// 色
const BACKGROUND_COLOR = "hsl(200deg, 100%, 70%)";
const PLAYER_COLOR = "hsl(0deg, 100%, 60%)";
const PLAYER_STROKE_COLOR = "hsl(0deg, 0%, 100%)";

// ゲーム変数
const FRAME_ELEMENT = 1000 / 30;

// キャンバス変数
let line_width = 2;

// プレイヤー変数
// 座標
let px = 70;
let py = 50;
// サイズ
let ps = 20;
// 速度
let pvy = 8;
// 基準速度
let standard_pvy = 8;
// ジャンプした場合の速度
let jump_pvy = -15;
// ジャンプできる最低速度
let min_jump_pvy = 6;
// 基準速度未満の場合の追加速度
let add_pvy = 1.5;
// ジャンプ判定
let jump_flag = false;

// キーイベント
document.addEventListener("keydown", event => {
  if (event.key === " ") {
    if (pvy >= min_jump_pvy) {
      jump_flag = true;
    }
  }
});

// 初期化処理
function init() {
  ctx.lineWidth = line_width;
}

// プレイヤーの更新
function update_player() {
  // ジャンプ時の処理
  if (jump_flag) {
    jump_flag = false;
    pvy = jump_pvy;
  }

  // 基準速度未満であれば追加速度を与える
  if (pvy < standard_pvy) {
    pvy += add_pvy;
  }

  // 基準速度を超えていれば基準速度にする
  if (pvy > standard_pvy) {
    pvy = standard_pvy;
  }

  // 速度をもとに座標を変更
  py += pvy;
}

// 背景の描画
function draw_background() {
  ctx.fillStyle = BACKGROUND_COLOR;
  ctx.fillRect(0, 0, cvs.width, cvs.height);
}

// プレイヤーの描画
function draw_player() {
  ctx.strokeStyle = PLAYER_STROKE_COLOR;
  ctx.fillStyle = PLAYER_COLOR;
  
  ctx.strokeRect(px - ps / 2, py - ps / 2, ps, ps);
  ctx.fillRect(px - ps / 2, py - ps / 2, ps, ps);
}

function main() {
  update_player();
  draw_background();
  draw_player();

  setTimeout(main, FRAME_ELEMENT);
}

init();
main();

JavaScript

main.js

// 描画コンテキストの取得
let cvs = document.querySelector("canvas");
let ctx = cvs.getContext("2d");

// 色
const BACKGROUND_COLOR = "hsl(200deg, 100%, 70%)";
const PLAYER_COLOR = "hsl(0deg, 100%, 60%)";
const PLAYER_STROKE_COLOR = "hsl(0deg, 0%, 100%)";

// ゲーム変数
const FRAME_ELEMENT = 1000 / 30;

// キャンバス変数
let line_width = 2;

// プレイヤー変数
// 座標
let px = 70;
let py = 50;
// サイズ
let ps = 20;
// 速度
let pvy = 8;
// 基準速度
let standard_pvy = 8;
// ジャンプした場合の速度
let jump_pvy = -15;
// ジャンプできる最低速度
let min_jump_pvy = 6;
// 基準速度未満の場合の追加速度
let add_pvy = 1.5;
// ジャンプ判定
let jump_flag = false;

// キーイベント
document.addEventListener("keydown", event => {
  if (event.key === " ") {
    if (pvy >= min_jump_pvy) {
      jump_flag = true;
    }
  }
});

// 初期化処理
function init() {
  ctx.lineWidth = line_width;
}

// プレイヤーの更新
function update_player() {
  // ジャンプ時の処理
  if (jump_flag) {
    jump_flag = false;
    pvy = jump_pvy;
  }

  // 基準速度未満であれば追加速度を与える
  if (pvy < standard_pvy) {
    pvy += add_pvy;
  }

  // 基準速度を超えていれば基準速度にする
  if (pvy > standard_pvy) {
    pvy = standard_pvy;
  }

  // 速度をもとに座標を変更
  py += pvy;
}

// 背景の描画
function draw_background() {
  ctx.fillStyle = BACKGROUND_COLOR;
  ctx.fillRect(0, 0, cvs.width, cvs.height);
}

// プレイヤーの描画
function draw_player() {
  ctx.strokeStyle = PLAYER_STROKE_COLOR;
  ctx.fillStyle = PLAYER_COLOR;
  
  ctx.strokeRect(px - ps / 2, py - ps / 2, ps, ps);
  ctx.fillRect(px - ps / 2, py - ps / 2, ps, ps);
}

function main() {
  update_player();
  draw_background();
  draw_player();

  setTimeout(main, FRAME_ELEMENT);
}

init();
main();