لوحة اللعبة
- الصفحة السابقة ملخص اللعبة
- الصفحة التالية مكونات اللعبة
عنصرHTML <canvas>يعرضعلىالصفحةعنصرمستطيل:
Canvas HTML
<canvas> العنصرمناسبللتطويراللعبةفيHTML.
<canvas> العنصريقدمجميعالميزاتالمطلوبةلصنعاللعبة.
استخدمJavaScriptللمسحعلى <canvas> لرسمالرسومات،كتابة النصوص،إدراج الصور،إلخ.
.getContext("2d")
<canvas> العنصرلهذايكونمثلعنصر getContext("2d") العنصر،يقدمأساليبوخصائصللمسح.
يمكنكإيجاد دليلCanvas تعلمالمزيدعن <canvas> العناصروال getContext("2d") معرفةالمزيدعنالعنصر.
لنبدأ
لتصنيعلعبة،أولاً،أنشئمنطقاللعبةوأعدللمسح:
مثال
وظيفةstartGame() {
myGameArea.start();
}
تعريفعنصر
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]);
}
}
فيجزءمنالمستندالآتي،عنصر لعبةي سوفيحصلعلىمزيدمنالخصائصوالأساليب.
وظيفة startGame() ندعو لعبةي الجسم}} start() الطريقة.
start() يُنشئ طريقة <canvas> العنصر، وأنه يُدرج كطفل الأول <body> في العنصر.
- الصفحة السابقة ملخص اللعبة
- الصفحة التالية مكونات اللعبة
