ゲームコンポーネント
ゲームエリアに赤い四角を追加します。
コンポーネントを追加する
コンポーネントコンストラクターを作成します。これにより、ゲームエリアにコンポーネントを追加できます。
オブジェクトコンストラクターはと呼ばれ
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);
}
コンポーネントには、外観と動きを制御するためのプロパティとメソッドがあります。
フレーム
ゲームをすぐに使えるようにするために、1秒間に50回表示を更新します。これは、映画のフレームによく似ています。
まず、。という新しい関数を作成しますupdateGameArea()。
オブジェクトに、 20ミリ秒ごと（1秒あたり50回）に関数myGameAreaを実行する間隔を追加します。また、キャンバス全体をクリアする、updateGameArea()という関数を追加します。clear()
コンストラクターで、コンポーネントの描画を処理するための、というcomponent関数を追加します。
update()
updateGameArea()関数はclear()とupdate()メソッドを呼び出します。
その結果、コンポーネントは1秒間に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();
}
動かして
赤い正方形が1秒間に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);
}
hex、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座標が表示されます。
ゲームエリアの好きな場所にコンポーネントを配置できます。
例
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();
}