دفع أزرار لتحريك مبتسم:
كيفية استخدام الصور؟
لإضافة الصور على قماش، و getContext("2d") وقد بنيت في كائن خصائص الصورة والأساليب.
في لعبتنا، لإنشاء gamepiece كصورة، استخدم منشئ مكون، ولكن بدلا من الإشارة إلى اللون، يجب عليك الرجوع إلى رابط للصورة. ويجب أن نقول للمنشئ أن هذا العنصر هو من نوع "image" :
مثال
function startGame() {
myGamePiece = new component(30, 30, "smiley.gif" ,
10, 120, "image" );
myGameArea.start();
}في منشئ مكون نختبر إذا كان العنصر هو من نوع "image" ، وإنشاء كائن صورة باستخدام المدمج في "جديدة Image() " منشئ الكائن. عندما نكون مستعدين لرسم الصورة، ونحن نستخدم طريقة drawImage بدلا من أسلوب fillRect:
مثال
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();
}
انها محاولة لنفسك » حلقة الخلفية
لجعل نفس الحلقة الخلفية إلى الأبد، يجب علينا أن نستخدم تقنية محددة.
تبدأ بقوله منشئ مكون أن هذه هي الخلفية. ومنشئ مكون ثم إضافة صورة مرتين، ووضع الصورة الثانية مباشرة بعد الصورة الأولى.
في 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;
}
}
}
}
انها محاولة لنفسك »