ゲーム・エリアに赤い四角を追加します：
component コンストラクタで、コンポーネントをゲームエリアに追加します。
オブジェクト・コンストラクタは、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);
}
component には、外観や動きを制御するプロパティとメソッドがあります。
ゲームの動作準備のために、ディスプレイを毎秒 50 回更新します。これは映画のフレームによく似ています。
まず、updateGameArea() という新しい関数を作成します。
myGameArea オブジェクトに、updateGameArea() 関数を 20 ミリ秒（毎秒50回）
ごとに実行するためのインターバルを追加します。
また、キャンバス全体をクリアする clear() という関数を追加します。
component コンストラクタには、コンポーネントの描画を処理するために
update() という関数を追加します。
updateGameArea() 関数は、clear() と
the 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();
}
Try it Yourself »
赤い四角が 1 秒間に 50 回描画されていることを確認するため、ゲームエリアを更新するたびに x の位置（横方向）を 1 ピクセルずつ変更します：
function updateGameArea() {
myGameArea.clear();
myGamePiece.x += 1;
myGamePiece.update();
}
Try it Yourself »
すべての更新で、ゲームエリアをクリアする必要はないように思うかもしれません。しかし、clear() メソッドを省略すると、
コンポーネントのすべての動きは、最後のフレームに配置されていた場所に軌跡を残します：
function updateGameArea() {
//myGameArea.clear();
myGamePiece.x += 1;
myGamePiece.update();
}
Try it Yourself »
コンポーネントの幅と高さを制御できます：
10x140 ピクセルの四角を作成します：
function startGame() {
myGameArea.start();
myGamePiece = new component(10, 140, "red", 10, 120);
}
Try it Yourself »
コンポーネントの色を制御できます：
function startGame() {
myGameArea.start();
myGamePiece = new component(30, 30, "blue", 10, 120);
}
Try it Yourself »
hex、rgb、rgba のような他のカラー値を使うこともできます：
function startGame() {
myGameArea.start();
myGamePiece = new component(30, 30, "rgba(0, 0, 255, 0.5)", 10, 120);
}
Try it Yourself »
ゲームエリアにコンポーネントを配置するため、x-座標と y-座標を使用します。
キャンバスの左上隅の座標は (0,0) です。
下のゲームエリアにマウスを置くと、x と y 座標が表示されます：
ゲームエリアの好きな場所にコンポーネントを置くことができます：
function startGame() {
myGameArea.start();
myGamePiece = new component(30, 30, "red", 2, 2);
}
Try it Yourself »
ゲームエリアには、好きなだけのコンポーネントを置くことができます：
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();
}
Try it Yourself »
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();
}
Try it Yourself »