فهرست مطالب:

JeuTropFacile - WayTooEasyGame: 3 مرحله
JeuTropFacile - WayTooEasyGame: 3 مرحله

تصویری: JeuTropFacile - WayTooEasyGame: 3 مرحله

تصویری: JeuTropFacile - WayTooEasyGame: 3 مرحله
تصویری: The Battle of Hulaoguan Pass: All Flags Locations | Wo Long Fallen Dynasty 2024, نوامبر
Anonim
JeuTropFacile - WayTooEasyGame
JeuTropFacile - WayTooEasyGame

این یک بازی است که کاملاً بر روی HTML و JavaScript با کتابخانه P5js ساخته شده است. 2 فایل به نام index.html و sketch.js وجود دارد. من در زمینه کد بسیار مبتدی هستم بنابراین اگر مبهم است معذرت می خواهم.

می توانید بازی را با این پیوند انجام دهید

توپ سفید را با کلیدهای جهت دار کنترل می کنید و باید از توپ قرمز اجتناب کنید (در حال حاضر ، تنها یک توپ وجود دارد).

من 2 متغیر ایجاد کردم: posX = 200 و posY = 200

در sketch.js ، من یک canva در تنظیمات عملکرد با 640x در 480y با زمینه خاکستری در رسم تابع ایجاد کردم ، سپس یک دایره سفید با موقعیت روی posX ، posY ، 75 ، 75 ایجاد کردم.

مرحله 1: حرکت دایره

حرکت دایره
حرکت دایره

همانطور که قبلاً گفتم ، می توانید از کلیدهای جهت دار برای حرکت دایره استفاده کنید.

برای انجام این کار ، یک تابع updatePositionEllipse () ایجاد کردم.

من از این شرط برای کارکردن استفاده کردم: if (keyIsDown (DOWN_ARROW)) {

posY += 5 ؛

}

هنگامی که کلید پایین فشار داده می شود ، دایره به سمت پایین حرکت می کند.

من از آن در هر کلید دیگری استفاده کردم تا بتوانید به چپ ، راست ، بالا و پایین حرکت کنید.

مرحله 2: ایجاد مرزهای محدود

ایجاد مرزهای محدود
ایجاد مرزهای محدود

برای متوقف شدن توپ سفید در انتهای بوم از تابع testOutOfScreen استفاده کردم.

در داخل آن ، من از شرط if (posX> 600) {

posX = 600 ؛ سکته مغزی وزن (6) ؛ سکته مغزی ("آبی") ؛ خط (637 ، 0 ، 637 ، 480) ؛ }

اگر موقعیت x برتر از 600 باشد: توپ را می بندد و خط آبی را با حاشیه 6 که در سمت راست بوم قرار دارد ترسیم می کند.

من این کار را برای هر مرز انجام می دهم.

توصیه شده: