جدول المحتويات:

JeuTropFacile - WayTooEasyGame: 3 خطوات
JeuTropFacile - WayTooEasyGame: 3 خطوات

فيديو: JeuTropFacile - WayTooEasyGame: 3 خطوات

فيديو: JeuTropFacile - WayTooEasyGame: 3 خطوات
فيديو: REVAN - THE COMPLETE STORY 2024, شهر نوفمبر
Anonim
JeuTropFacile - WayTooEasyGame
JeuTropFacile - WayTooEasyGame

هذه لعبة مصنوعة بالكامل من HTML وجافا سكريبت مع مكتبة P5js. يوجد ملفان باسم index.html و sketch.js. أنا مبتدئ جدًا في الكود ، لذا أنا آسف إذا كان الأمر غير واضح.

يمكنك لعب اللعبة باستخدام هذا الرابط

يمكنك التحكم في كرة بيضاء باستخدام مفاتيح الأسهم وعليك تجنب الكرة الحمراء (حاليًا ، هناك واحدة فقط).

لقد أنشأت متغيرين: posX = 200 و posY = 200

في sketch.js ، قمت بإنشاء canva في إعداد الوظيفة مع 640x × 480y مع خلفية رمادية في رسم الوظيفة ، ثم قمت بإنشاء دائرة بيضاء مع الموضع على posX ، posY ، 75 ، 75.

الخطوة الأولى: تحريك الدائرة

تحريك الدائرة
تحريك الدائرة

كما قلت من قبل ، يمكنك استخدام مفاتيح الأسهم لتحريك الدائرة.

للقيام بذلك ، قمت بإنشاء دالة updatePositionEllipse ().

لقد استخدمت هذا الشرط لإنجاحه: إذا (keyIsDown (DOWN_ARROW)) {

posY + = 5 ؛

}

عند الضغط على مفتاح down ، تتحرك الدائرة لأسفل.

لقد استخدمته في كل مفاتيح أخرى حتى تتمكن من التحرك يسارًا ويمينًا ولأعلى ولأسفل.

الخطوة الثانية: إنشاء حدود نهائية

إنشاء حدود محدودة
إنشاء حدود محدودة

لجعل الكرة البيضاء تتوقف في نهاية canva ، استخدمت اختبار الوظيفة OutOfScreen.

بداخله ، استخدمت الشرط إذا (posX> 600) {

نقطة البيع X = 600 ؛ الوزن (6) ؛ السكتة الدماغية ("الأزرق") ؛ خط (637 ، 0 ، 637 ، 480) ؛ }

إذا كان موضع x أعلى من 600: فإنه يسد الكرة ويرسم خطًا أزرق بحدود 6 موضوعة على الجانب الأيمن من اللوحة.

أفعل هذا لكل الحدود.

موصى به: