ゲーム画像
ボタンを押してスマイリーを移動します。
画像の使い方は？
キャンバスに画像を追加するために、getContext（ "2d"）オブジェクトには組み込みの画像プロパティとメソッドがあります。
私たちのゲームでは、ゲームピースを画像として作成するには、コンポーネントコンストラクターを使用しますが、色を参照する代わりに、画像のURLを参照する必要があります。また、このコンポーネントのタイプが「image」であることをコンストラクターに通知する必要があります。
例
function startGame() {
myGamePiece = new component(30, 30, "smiley.gif", 10, 120, "image");
myGameArea.start();
}
コンポーネントコンストラクターでは、コンポーネントのタイプが「image」であるかどうかをテストし、組み込みの「newImage（）」オブジェクトコンストラクターを使用してイメージオブジェクトを作成します。画像を描画する準備ができたら、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回追加し、最初の画像の直後に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;
}
}
}
}