ゲームコンポーネント

ゲームエリアに赤い四角形を追加します：

コンポーネントの追加

コンポーネントの構築関数を作成します。これにより、コンポーネントをゲームエリアに追加することができます。

このオブジェクトの構築関数はコンポーネント（component）、最初のコンポーネントを生成しました。名前は myGamePiece:

インスタンス

var myGamePiece;
function startGame() {
  myGameArea.start();
  myGamePiece = new component(30, 30, "red", 10, 120);
}
function component(width, height, color, x, y) {
  this.width = width;
  this.height = height;
  this.x = x;
  this.y = y;
  ctx = myGameArea.context;
  ctx.fillStyle = color;
  ctx.fillRect(this.x, this.y, this.width, this.height);
}

実際に試してみる

これらのコンポーネントには、その外観と動きを制御する属性とメソッドがあります。

フレーム

ゲームのアクションを準備するために、私たちは毎秒50回表示を更新します。これは映画のフレームに非常に似ています。

の新しい関数を呼び出します。 updateGameArea() まず、

の関数を追加し、全体のキャンバスをクリアするために使用されます。 の新しい関数。 myGameArea updateGameArea() 関数（毎秒50回）を追加し、20ミリ秒ごとに実行される間隔を追加します。 clear() の関数に、

の関数を追加し、全体のキャンバスをクリアするために使用されます。 component 構造関数に、 update() の関数が、コンポーネントの描画を処理するために使用されます。

updateGameArea() 関数呼び出し clear() および update() 方法。

結果として、コンポーネントは毎秒50回描かれ、クリアされます：

インスタンス

var myGameArea = {
  canvas : document.createElement("canvas"),
  start : function() {
    this.canvas.width = 480;
    this.canvas.height = 270;
    this.context = this.canvas.getContext("2d");
    document.body.insertBefore(this.canvas, document.body.childNodes[0]);
    this.interval = setInterval(updateGameArea, 20);
  },
  clear : function() {
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
  }
}
function component(width, height, color, x, y) {
  this.width = width;
  this.height = height;
  this.x = x;
  this.y = y;
  this.update = function(){
    ctx = myGameArea.context;
    ctx.fillStyle = color;
    ctx.fillRect(this.x, this.y, this.width, this.height);
  }
}
function updateGameArea() {
  myGameArea.clear();
  myGamePiece.update();
}

実際に試してみる

それを動かす

赤い四角が毎秒50回描かれていることを証明するために、ゲームエリアを更新するたびにx位置（水平）を1ピクセルずつ変更します：

インスタンス

function updateGameArea() {
  myGameArea.clear();
  myGamePiece.x += 1;
  myGamePiece.update();
}

実際に試してみる

なぜゲームエリアをクリアするのか？

ゲームエリアをクリアする必要があるかどうかは、更新のたびに clear() 方法、コンポーネントのすべての移動は、最後のフレームでの位置の跡を残します：

インスタンス

function updateGameArea() {
  // myGameArea.clear();
  myGamePiece.x += 1;
  myGamePiece.update();
}

実際に試してみる

サイズを変更する

コンポーネントの幅と高さを制御できます：

インスタンス

10x140ピクセルの矩形を作成します：

function startGame() {
  myGameArea.start();
  myGamePiece = new component(140, 10, "red", 10, 120);
}

実際に試してみる

色を変更する

コンポーネントの色を制御できます：

インスタンス

function startGame() {
  myGameArea.start();
  myGamePiece = new component(30, 30, "blue", 10, 120);
}

実際に試してみる

他の色値、例えば16進数、rgbまたはrgbaを使用することもできます：

インスタンス

function startGame() {
  myGameArea.start();
  myGamePiece = new component(30, 30, "rgba(0, 0, 255, 0.5)", 10, 120);
}

実際に試してみる

位置を変更する

xおよびy座標を使用して、コンポーネントをゲームエリアに配置します。

キャンバスの左上角の座標は(0,0)です。

以下のゲームエリアにマウスを合わせると、xおよびy座標を表示できます：

X
Y

ゲームエリアの任意の場所にコンポーネントを配置できます：

インスタンス

function startGame() {
  myGameArea.start();
  myGamePiece = new component(30, 30, "red", 2, 2);
}

実際に試してみる

複数のコンポーネント

ゲームエリアに任意の数のコンポーネントを配置できます：

インスタンス

var redGamePiece, blueGamePiece, yellowGamePiece;
function startGame() {
  redGamePiece = new component(75, 75, "red", 10, 10);
  yellowGamePiece = new component(75, 75, "yellow", 50, 60);
  blueGamePiece = new component(75, 75, "blue", 10, 110);
  myGameArea.start();
}
function updateGameArea() {
  myGameArea.clear();
  redGamePiece.update();
  yellowGamePiece.update();
  blueGamePiece.update();
}

実際に試してみる

コンポーネントの動き

3つのコンポーネントを異なる方向に同時に動かす：

インスタンス

function updateGameArea() {
  myGameArea.clear();
  redGamePiece.x += 1;
  yellowGamePiece.x += 1;
  yellowGamePiece.y += 1;
  blueGamePiece.x += 1;
  blueGamePiece.y -= 1;
  redGamePiece.update();
  yellowGamePiece.update();
  blueGamePiece.update();
}

実際に試してみる