أحدث البرامج التعليمية وتطوير الشبكة
 

مكونات لعبة HTML

❮ السابق التالي الفصل ❯

إضافة مربع أحمر على مساحة اللعبة:

إضافة مكون

جعل منشئ مكون، والذي يتيح لك إضافة مكونات على gamearea.

ويسمى منشئ الكائن 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 times per second) . أيضا إضافة وظيفة تسمى 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 مرة في الثانية الواحدة، وسوف نقوم بتغيير موقف س (horizontal) من بكسل واحد في كل مرة نقوم بتحديث مجال اللعبة:

مثال

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( 10 , 140 , "red" , 10, 120);
}
انها محاولة لنفسك »

تغيير اللون

يمكنك التحكم في لون العنصر:

مثال

function startGame() {
    myGameArea.start();
    myGamePiece = new component(30, 30, "blue" , 10, 120);
}
انها محاولة لنفسك »

يمكنك أيضا استخدام colorvalues ​​البعض مثل عرافة، RGB، أو رغبا:

مثال

function startGame() {
    myGameArea.start();
    myGamePiece = new component(30, 30, "rgba(0, 0, 255, 0.5)" , 10, 120);
}
انها محاولة لنفسك »

تغيير الوظيفة

نحن نستخدم إحداثيات ذ السينية ولوضع المكونات على مجال اللعبة.

الزاوية العلوية اليسرى من اللوحة لديه الإحداثيات (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();
}
انها محاولة لنفسك »

❮ السابق التالي الفصل ❯