Index

このセクションではプレイヤーのアニメーションを行います。何もしていない状態ではプレイヤーを下に移動するように設定にします。

プレイヤーの更新

プレイヤーのY軸方向の速度を表す変数pvyとプレイヤーの状態を更新するupdate_player関数を作成します。

main.js
// プレイヤー変数
let px = 70;
let py = 50;
let ps = 20;
let pvy = 8;

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

// プレイヤーの更新
function update_player() {
  py += pvy;
}
JavaScript
main.js
// プレイヤー変数
let px = 70;
let py = 50;
let ps = 20;
let pvy = 8;

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

// プレイヤーの更新
function update_player() {
  py += pvy;
}
JavaScript

update_player関数ではプレイヤーのY座標をpvy分だけ下に移動しています。update_player関数をdarw_background関数の前で実行します。

main.js
init();
update_player();
draw_background();
draw_player();
JavaScript
main.js
init();
update_player();
draw_background();
draw_player();
JavaScript

プレイヤーのアニメーション

アニメーションするためにupdate_player関数、draw_background関数、draw_player関数を一定間隔で実行します。main関数を作成して、3つの関数をmain関数に入れてsetTimeout関数を使用します。最後にinit関数の後にmain関数を実行します。

main.js
// プレイヤーの描画
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, 1000 / 30);
}

init();
main();
JavaScript
main.js
// プレイヤーの描画
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, 1000 / 30);
}

init();
main();
JavaScript

49行目のsetTimeout関数について説明します。setTimeout関数は第1引数に実行する関数、第2引数に第1引数の関数を実行するまでの待ち時間をミリ秒単位で入れます。上記のコードではmain関数を実行すると1000 / 30ミリ秒後にmain関数が実行されます。

main関数で使用している1000 / 30を定数FRAME_ELEMENTで保持します。

main.js
// 色
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;
JavaScript
main.js
// 色
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;
JavaScript

作成した定数をmain関数のsetTimeout関数で使用します。

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

  setTimeout(main, FRAME_ELEMENT);
}
JavaScript
main.js
function main() {
  update_player();
  draw_background();
  draw_player();

  setTimeout(main, FRAME_ELEMENT);
}
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;

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

// プレイヤーの更新
function update_player() {
  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;

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

// プレイヤーの更新
function update_player() {
  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

実行結果

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

コメント

コメントはまだありません。

コメント