ゲーム領域に赤い四角を追加します。
コンポーネントの追加
あなたはgamearea上にコンポーネントを追加できるようにするコンポーネントのコンストラクタを作成します。
オブジェクトのコンストラクタが呼び出され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()関数ごとに20ミリ秒(50 times per second) 。 また、呼び出された関数を追加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位置変更されます(horizontal) 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( 10 , 140 , "red" , 10, 120);
} »それを自分で試してみてください 色を変更
あなたは、コンポーネントの色を制御することができます。
例
function startGame() {
myGameArea.start();
myGamePiece = new
component(30, 30, "blue" , 10, 120);
} »それを自分で試してみてください また、六角、RGB、またはRGBAのような他のcolorvaluesを使用することができます。
例
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();
}
»それを自分で試してみてください