Index

このセクションでは上と下のブロックを1つずつ描画します。

ブロック変数の初期化

まず、ブロックの色を定数BLOCK_COLORで初期化します。

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 BLOCK_COLOR = "hsl(230deg, 100%, 70%)";
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 BLOCK_COLOR = "hsl(230deg, 100%, 70%)";
JavaScript

次に、ブロック対の基準点となるX座標、Y座標、ブロックの幅、上下のブロックの間のスペースを変数bx、by、bw、bsで初期化します。

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;

// ブロック変数
let bx = 300;
let by = 150;
let bw = 50;
let bs = 140;
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;

// ブロック変数
let bx = 300;
let by = 150;
let bw = 50;
let bs = 140;
JavaScript

変数について確認します。ブロックの基準点(bx, by)は以下の画像のように上下のブロックの内側の端の中心にあります。ブロックの幅はbw、上下のブロックの間のスペースはbsです。

ブロックの本体の描画

ブロックを描画するdraw_blocks関数を作成して、main関数のdraw_player関数の前でdraw_blocks関数を実行します。

main.js
// ブロックの描画
function draw_blocks() {
  ctx.fillStyle = BLOCK_COLOR;
  // 上ブロック
  ctx.fillRect(bx - bw / 2, 0, bw, by - bs / 2);
  // 下ブロック
  ctx.fillRect(bx - bw / 2, by + bs / 2, bw, cvs.height - (by + bs / 2));
}

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

  setTimeout(main, FRAME_ELEMENT);
}
JavaScript
main.js
// ブロックの描画
function draw_blocks() {
  ctx.fillStyle = BLOCK_COLOR;
  // 上ブロック
  ctx.fillRect(bx - bw / 2, 0, bw, by - bs / 2);
  // 下ブロック
  ctx.fillRect(bx - bw / 2, by + bs / 2, bw, cvs.height - (by + bs / 2));
}

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

  setTimeout(main, FRAME_ELEMENT);
}
JavaScript

97行目と99行目のfillRect()の引数について確認します。以下の図を参照してください。まず上ブロックの左上の頂点のX座標は基準点のbxからブロックの幅の半分のbw - 2を引いたbx - bw / 2になります。Y座標はキャンバスの最上部なので0になります。また、幅はbw、高さは基準点のbyからブロックの間のスペースの半分のbs / 2を引いたby - bs / 2になります。次に下ブロックの左上の頂点のX座標は上ブロックと同様にbx - bw / 2になります。Y座標は基準点のbyからブロックの間のスペースの半分のbs / 2を足したby + bs / 2になります。また、幅はbw、高さはキャンバスの高さcvs.heightから基準点のbyとブロックの間のスペースの半分bs / 2のを引いたcvs.height - (by + bs / 2)になります。

ブロックの枠線の描画

ブロックに黒の枠線を描画します。まず枠線の色を定数BLOCK_STROKE_COLORで保持します。

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 BLOCK_COLOR = "hsl(230deg, 100%, 70%)";
const BLOCK_STROCK_COLOR = "hsl(0deg, 0%, 0%)";
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 BLOCK_COLOR = "hsl(230deg, 100%, 70%)";
const BLOCK_STROCK_COLOR = "hsl(0deg, 0%, 0%)";
JavaScript

次にdraw_blocks関数で枠線の描画を行い、コメントを移動します。

main.js
// ブロックの描画
function draw_blocks() {
  ctx.strokeStyle = BLOCK_STROCK_COLOR;
  ctx.fillStyle = BLOCK_COLOR;
  
  // 上ブロック
  ctx.strokeRect(bx - bw / 2, 0, bw, by - bs / 2);
  ctx.fillRect(bx - bw / 2, 0, bw, by - bs / 2);
  // 下ブロック
  ctx.strokeRect(bx - bw / 2, by + bs / 2, bw, cvs.height - (by + bs / 2));
  ctx.fillRect(bx - bw / 2, by + bs / 2, bw, cvs.height - (by + bs / 2));
}
JavaScript
main.js
// ブロックの描画
function draw_blocks() {
  ctx.strokeStyle = BLOCK_STROCK_COLOR;
  ctx.fillStyle = BLOCK_COLOR;
  
  // 上ブロック
  ctx.strokeRect(bx - bw / 2, 0, bw, by - bs / 2);
  ctx.fillRect(bx - bw / 2, 0, bw, by - bs / 2);
  // 下ブロック
  ctx.strokeRect(bx - bw / 2, by + bs / 2, bw, cvs.height - (by + bs / 2));
  ctx.fillRect(bx - bw / 2, by + bs / 2, bw, cvs.height - (by + bs / 2));
}
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 BLOCK_COLOR = "hsl(230deg, 100%, 70%)";
const BLOCK_STROCK_COLOR = "hsl(0deg, 0%, 0%)";

// ゲーム変数
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;

// ブロック変数
let bx = 300;
let by = 150;
let bw = 50;
let bs = 140;

// キーイベント
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.strokeRect(px - ps / 2, py - ps / 2, ps, ps);
  
  ctx.fillStyle = PLAYER_COLOR;
  ctx.fillRect(px - ps / 2, py - ps / 2, ps, ps);
}

// ブロックの描画
function draw_blocks() {
  ctx.strokeStyle = BLOCK_STROCK_COLOR;
  ctx.fillStyle = BLOCK_COLOR;
  
  // 上ブロック
  ctx.strokeRect(bx - bw / 2, 0, bw, by - bs / 2);
  ctx.fillRect(bx - bw / 2, 0, bw, by - bs / 2);
  // 下ブロック
  ctx.strokeRect(bx - bw / 2, by + bs / 2, bw, cvs.height - (by + bs / 2)); 
  ctx.fillRect(bx - bw / 2, by + bs / 2, bw, cvs.height - (by + bs / 2));
}

function main() {
  update_player();
  draw_background();
  draw_blocks();
  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 BLOCK_COLOR = "hsl(230deg, 100%, 70%)";
const BLOCK_STROCK_COLOR = "hsl(0deg, 0%, 0%)";

// ゲーム変数
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;

// ブロック変数
let bx = 300;
let by = 150;
let bw = 50;
let bs = 140;

// キーイベント
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.strokeRect(px - ps / 2, py - ps / 2, ps, ps);
  
  ctx.fillStyle = PLAYER_COLOR;
  ctx.fillRect(px - ps / 2, py - ps / 2, ps, ps);
}

// ブロックの描画
function draw_blocks() {
  ctx.strokeStyle = BLOCK_STROCK_COLOR;
  ctx.fillStyle = BLOCK_COLOR;
  
  // 上ブロック
  ctx.strokeRect(bx - bw / 2, 0, bw, by - bs / 2);
  ctx.fillRect(bx - bw / 2, 0, bw, by - bs / 2);
  // 下ブロック
  ctx.strokeRect(bx - bw / 2, by + bs / 2, bw, cvs.height - (by + bs / 2));
  ctx.fillRect(bx - bw / 2, by + bs / 2, bw, cvs.height - (by + bs / 2));
}

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

  setTimeout(main, FRAME_ELEMENT);
}

init();
main();
JavaScript

実行結果

Chromeに移動してindex.htmlを更新します。実行結果は以下の画像のようになります。

コメント

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

コメント