スマイリーを移動するためのボタンを押して：
どのようにイメージを使用するには？
キャンバス上の画像を追加するには、 getContext("2d")オブジェクトが組み込まれている画像のプロパティとメソッド。
私たちのゲームでは、画像としてgamepieceを作成するコンポーネントのコンストラクタを使用していますが、代わりに色を参照するのではなく、画像のURLを参照する必要があります。 そして、あなたは、このコンポーネントのタイプがあるコンストラクタ伝えなければならない"image" ：
例
function startGame() {
myGamePiece = new component(30, 30, "smiley.gif" ,
10, 120, "image" );
myGameArea.start();
}コンポーネントのタイプがある場合、コンポーネントのコンストラクタでは、テストする"image" 、および組み込みの"新用いて画像オブジェクトを作成するImage() "オブジェクトのコンストラクタを。 我々は、画像を描画する準備ができたら、私たちは代わりにfillRectメソッドのdrawImageメソッドを使用します。
例
function component(width, height, color, x, y, type) {
this.type = type;
if
(type == "image") {
this.image = new Image();
this.image.src = color;
}
this.width =
width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;
this.update = function() {
ctx =
myGameArea.context;
if (type == "image") {
ctx.drawImage(this.image,
this.x,
this.y,
this.width, this.height);
} else {
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
}
»それを自分で試してみてください 画像を変更
あなたが変更することで、好きなときに、あなたは、画像を変更することができるsrcのプロパティimageコンポーネントのオブジェクトを。
あなたはそれが移動するスマイリー毎回を変更したい場合は、ボタンがクリックされていない場合、ユーザは正常に戻ってボタンをクリックすると、ときに、イメージソースを変更します。
例
function move(dir) {
myGamePiece.image.src =
"angry.gif";
if (dir == "up")
{myGamePiece.speedY = -1; }
if (dir == "down")
{myGamePiece.speedY = 1; }
if (dir == "left")
{myGamePiece.speedX = -1; }
if (dir == "right")
{myGamePiece.speedX = 1; }
}
function clearmove() {
myGamePiece.image.src = "smiley.gif";
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
}
»それを自分で試してみてください 背景画像
コンポーネントとして、それを追加することによって、あなたのゲームの領域に背景画像を追加し、また、フレームごとに背景を更新します。
例
var myGamePiece;
var myBackground;
function
startGame() {
myGamePiece = new component(30, 30,
"smiley.gif" , 10, 120, "image");
myBackground
= new component(656, 270, "citymarket.jpg" , 0, 0, "image");
myGameArea.start();
}
function updateGameArea() {
myGameArea.clear();
myBackground.newPos();
myBackground.update();
myGamePiece.newPos();
myGamePiece.update();
}
»それを自分で試してみてください 背景の移動
背景コンポーネントの変更speedX背景の動きを作るために、プロパティを：
例
function updateGameArea() {
myGameArea.clear();
myBackground.speedX = -1;
myBackground.newPos();
myBackground.update();
myGamePiece.newPos();
myGamePiece.update();
}
»それを自分で試してみてください バックグラウンドループ
永遠に同じバックグラウンドループを作るために、我々は特定の技術を使用する必要があります。
これはバックグラウンドであるコンポーネントのコンストラクタを伝えることから始めます。 コンポーネントのコンストラクタは、最初の画像の直後に第二の画像を配置し、イメージを2回追加されます。
でnewPos()場合、メソッド、チェックx成分の位置が画像の最後に到達したことがある場合は、設定、 x 0にコンポーネントの位置を：
例
function component(width, height, color, x, y, type) {
this.type = type;
if (type == "image" || type
== "background" ) {
this.image = new Image();
this.image.src = color;
}
this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;
this.update = function() {
ctx
= myGameArea.context;
if (type
== "image" || type == "background") {
ctx.drawImage(this.image,
this.x, this.y, this.width, this.height);
if (type == "background") {
ctx.drawImage(this.image,
this.x + this.width, this.y, this.width, this.height);
}
} else {
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
this.newPos = function() {
this.x += this.speedX;
this.y
+= this.speedY;
if
(this.type == "background") {
if (this.x == -(this.width)) {
this.x = 0;
}
}
}
}
»それを自分で試してみてください