مكونات اللعبة
أضف مربعًا أحمر إلى منطقة اللعبة:
أضف مكونًا
قم بإنشاء مُنشئ مكون ، والذي يتيح لك إضافة مكونات إلى منطقة اللعب.
يتم استدعاء مُنشئ الكائن
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 مرة في الثانية). أضف أيضًا وظيفة تسمى 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 (أفقيًا) بمقدار بكسل واحد في كل مرة نقوم فيها بتحديث منطقة اللعبة:
مثال
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(140, 10, "red", 10, 120);
}
تغيير اللون
يمكنك التحكم في لون المكون:
مثال
function startGame() {
myGameArea.start();
myGamePiece = new component(30, 30, "blue", 10, 120);
}
يمكنك أيضًا استخدام قيم ألوان أخرى مثل hex أو rgb أو rgba:
مثال
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();
}
مكونات متحركة
اجعل المكونات الثلاثة تتحرك في اتجاهات مختلفة:
مثال
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();
}