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