کتابخانه‌ی استاندارد · وب و مرورگر

کلیدها web/keys

وضعیت صفحه‌کلید برای بازی‌های مرورگری.

واردسازی وب.کلیدها

در بازی‌ها معمولاً در هر فریم می‌پرسید کدام کلیدها پایین‌اند، نه این‌که برای هر فشار رویداد بگیرید. این بسته رویدادهای keydown و keyup پنجره را برایتان می‌شنود و وضعیت حداکثر ۳۲ کلید را نگه می‌دارد. یک بار آماده سازی را صدا بزنید، سپس درون تابع چرخش فریم از دام با نگه داشته یا فشرده شد بپرسید و با بوم رسم کنید. برای فرم یا جعبه‌ی متن، که هر کلید را همان لحظه می‌خواهید، به جای آن دام.هنگام رویداد جزئی را با دام.کلید رویداد به کار ببرید.

نام کلیدها همان مقدار key مرورگر است: ArrowLeft، Enter، " " برای کلید فاصله و a برای کلید A. نکته‌هایی که باید بدانید:

  • فقط کلیدهای پیگیری‌شده دیده می‌شوند. آماده سازی چهار کلید جهت، Enter و فاصله را پیگیری می‌کند؛ بقیه را با پیگیری بیفزایید. پرسیدن درباره‌ی هر کلید دیگری نادرست برمی‌گرداند.
  • حرف‌ها با Shift و Caps Lock عوض می‌شوند: a به A تبدیل می‌شود. هر دو را پیگیری کنید و بپرسید.
  • کلیدهای پیگیری‌شده کار عادی‌شان را در صفحه انجام نمی‌دهند، پس هنگام اجرای بازی نمی‌شود آن‌ها را در جعبه‌ی متن تایپ کرد.
  • ممکن است کلیدی پس از رفتن تمرکز از پنجره «پایین» بماند. اگر بازیکن کلیدی را نگه دارد و به پنجره‌ی دیگری برود، مرورگر keyup نمی‌فرستد و نگه داشته تا فشردن و رها کردن دوباره‌ی همان کلید درست می‌ماند.

نگه داشتن کلید و یک بار زدن آن

این دو پرسش با هم فرق دارند. نگه داشته تا وقتی کلید پایین است درست است و برای راه رفتن مناسب است. فشرده شد برای هر بار زدن یک بار درست است، نخستین باری که پس از پایین رفتن کلید بپرسید، و برای پریدن، شلیک یا باز کردن منو مناسب است: نگه داشتن کلید فاصله بازیکن را پشت سر هم نمی‌پراند.

web-keys-jump.salam
واردسازی دام
واردسازی وب.بوم
واردسازی وب.کلیدها

ناپایا افقی := ۴۰.۰
ناپایا عمودی := ۱۶۰.۰
ناپایا سرعت عمودی := ۰.۰
ناپایا بوم من := ۰ برگردان صحیح۶۴

تابع ریشه:
    عنصر := دام.بساز("canvas")
    دام.تنظیم ویژگی(عنصر، "id"، "level")
    دام.تنظیم ویژگی(عنصر، "width"، "400")
    دام.تنظیم ویژگی(عنصر، "height"، "200")
    دام.افزودن(دام.بدنه()، عنصر)
    بوم من = بوم.دریافت بوم("level")
    کلیدها.آماده سازی()
    زمین := ۱۶۰.۰

    دام.چرخش فریم((گذشته: اعشار۶۴):
        _ := گذشته
        اگر کلیدها.نگه داشته("ArrowLeft"):
            افقی -= ۳
        پایان
        اگر کلیدها.نگه داشته("ArrowRight"):
            افقی += ۳
        پایان
        پرش := کلیدها.فشرده شد(" ")
        اگر پرش و عمودی بزرگتربرابر زمین:
            سرعت عمودی = -۹
        پایان
        سرعت عمودی += ۰.۵
        عمودی += سرعت عمودی
        اگر عمودی بزرگتر زمین:
            عمودی = زمین
            سرعت عمودی = ۰
        پایان
        بوم.پاک کردن مستطیل(بوم من، ۰، ۰، ۴۰۰، ۲۰۰)
        بوم.سبک پرشدگی(بوم من، "#444")
        بوم.پرکردن مستطیل(بوم من، ۰، زمین + ۲۰، ۴۰۰، ۲۰)
        بوم.سبک پرشدگی(بوم من، "#e11d48")
        بوم.پرکردن مستطیل(بوم من، افقی، عمودی، ۲۰، ۲۰)
    پایان)
پایان

دقت کنید که برنامه در هر فریم فشرده شد را می‌پرسد و فقط پس از آن بررسی می‌کند که بازیکن روی زمین است. اگر می‌نوشت عمودی >= زمین و کلیدها.فشرده شد(" ")، زدن کلید در هوا پرسیده نمی‌شد، منتظر می‌ماند و بازیکن هنگام فرود خودش می‌پرید.

کلیدهای خودتان: مکث با P

آماده سازی کلیدهای جهت، Enter و فاصله را پیگیری می‌کند. هر کلید دیگری را با پیگیری و نام key مرورگر اضافه کنید: یک حرف، Escape، Shift و مانند آن. این نام‌ها متن دقیق‌اند، پس وقتی Shift یا Caps Lock روشن است کلید P به شکل P می‌رسد نه p؛ هر جا مهم است هر دو را پیگیری کنید. با صفحه‌کلید فارسی هم همان کلید نام حرف فارسی را می‌فرستد، مثلاً ح به جای p.

web-keys-pause.salam
واردسازی دام
واردسازی وب.بوم
واردسازی وب.کلیدها

ناپایا مکث := نادرست
ناپایا زاویه := ۰.۰
ناپایا بوم من := ۰ برگردان صحیح۶۴

تابع ریشه:
    عنصر := دام.بساز("canvas")
    دام.تنظیم ویژگی(عنصر، "id"، "game")
    دام.تنظیم ویژگی(عنصر، "width"، "200")
    دام.تنظیم ویژگی(عنصر، "height"، "200")
    دام.افزودن(دام.بدنه()، عنصر)
    بوم من = بوم.دریافت بوم("game")
    کلیدها.آماده سازی()
    کلیدها.پیگیری("p")
    کلیدها.پیگیری("P")
    کلیدها.پیگیری("Escape")

    دام.چرخش فریم((اکنون: اعشار۶۴):
        _ := اکنون
        اگر کلیدها.فشرده شد("p") یا کلیدها.فشرده شد("P") یا کلیدها.فشرده شد("Escape"):
            مکث = وارونه مکث
        پایان
        اگر وارونه مکث:
            زاویه += ۰.۰۵
        پایان
        بوم.پاک کردن مستطیل(بوم من، ۰، ۰، ۲۰۰، ۲۰۰)
        بوم.ذخیره وضعیت(بوم من)
        بوم.جابجایی مختصات(بوم من، ۱۰۰، ۱۰۰)
        بوم.چرخش(بوم من، زاویه)
        بوم.سبک پرشدگی(بوم من، "#22c55e")
        بوم.پرکردن مستطیل(بوم من، -۳۰، -۳۰، ۶۰، ۶۰)
        بوم.بازگردانی وضعیت(بوم من)
        اگر مکث:
            بوم.سبک پرشدگی(بوم من، "#000")
            بوم.قلم(بوم من، "18px sans-serif")
            بوم.ترازبندی متن(بوم من، "center")
            بوم.پرکردن متن(بوم من، "مکث، P را بزنید"، ۱۰۰، ۱۹۰)
        پایان
    پایان)
پایان

کلیدی که پیگیری می‌شود دیگر کار همیشگی‌اش را در صفحه انجام نمی‌دهد، چون بسته برایش PreventDefault را صدا می‌زند. همین جلوی پیمایش صفحه با کلیدهای جهت و فاصله را در بازی می‌گیرد، ولی یعنی حرفی که پیگیری می‌شود را نمی‌توان در جعبه‌ی متنی همان صفحه تایپ کرد.

این نمونه‌ها مثل نمونه‌های دام در مرورگر اجرا می‌شوند و این‌جا فقط بررسی می‌شوند.

حرکت نرم با کلیدهای جهت و WASD

بیشتر بازی‌ها هم کلیدهای جهت و هم W، A، S و D را می‌پذیرند. تابع کمکی پایین است یک کلید جهت، یک حرف و شکل بزرگ آن را می‌سنجد تا Caps Lock جلوی بازیکن را نگیرد. هر محور منفی ۱، ۰ یا ۱ می‌شود؛ وقتی هر دو روشن‌اند برنامه بر طول بردار تقسیم می‌کند تا حرکت مورب از حرکت مستقیم تندتر نباشد. سرعت به پیکسل در میلی‌ثانیه است و در گذشته ضرب می‌شود، زمانی که چرخش فریم از فریم قبلی گذشته، پس نقطه روی نمایشگر ۶۰ و ۱۴۴ هرتز با یک سرعت حرکت می‌کند.

web-keys-move.salam
واردسازی دام
واردسازی ریاضی
واردسازی رشته
واردسازی وب.بوم
واردسازی وب.کلیدها

ناپایا جای افقی := ۲۰۰.۰
ناپایا جای عمودی := ۱۵۰.۰
ناپایا ز := ۰ برگردان صحیح۶۴

تابع پایین است(جهت: رشته، حرف: رشته): منطقی:
    برگشت کلیدها.نگه داشته(جهت) یا کلیدها.نگه داشته(حرف) یا کلیدها.نگه داشته(رشته.بزرگ(حرف))
پایان

تابع محور(جهت منفی: رشته، حرف منفی: رشته، جهت مثبت: رشته، حرف مثبت: رشته): اعشار۶۴:
    ناپایا مقدار := ۰.۰
    اگر پایین است(جهت منفی، حرف منفی): مقدار -= ۱.۰ پایان
    اگر پایین است(جهت مثبت، حرف مثبت): مقدار += ۱.۰ پایان
    برگشت مقدار
پایان

تابع ریشه:
    عنصر := دام.بساز("canvas")
    دام.تنظیم ویژگی(عنصر، "id"، "field")
    دام.تنظیم ویژگی(عنصر، "width"، "400")
    دام.تنظیم ویژگی(عنصر، "height"، "300")
    دام.افزودن(دام.بدنه()، عنصر)
    ز = بوم.دریافت بوم("field")
    کلیدها.آماده سازی()
    هر کلید در ["w"، "a"، "s"، "d"، "W"، "A"، "S"، "D"]:
        کلیدها.پیگیری(کلید)
    پایان
    سرعت := ۰.۲

    دام.چرخش فریم((گذشته: اعشار۶۴):
        ناپایا گام افقی := محور("ArrowLeft"، "a"، "ArrowRight"، "d")
        ناپایا گام عمودی := محور("ArrowUp"، "w"، "ArrowDown"، "s")
        طول بردار := ریاضی.جذر(گام افقی * گام افقی + گام عمودی * گام عمودی)
        اگر طول بردار بزرگتر ۰.۰:
            گام افقی = گام افقی / طول بردار
            گام عمودی = گام عمودی / طول بردار
        پایان
        جای افقی = ریاضی.محدودسازی اعشار(جای افقی + گام افقی * سرعت * گذشته، ۱۰.۰، ۳۹۰.۰)
        جای عمودی = ریاضی.محدودسازی اعشار(جای عمودی + گام عمودی * سرعت * گذشته، ۱۰.۰، ۲۹۰.۰)
        بوم.سبک پرشدگی(ز، "#0f172a")
        بوم.پرکردن مستطیل(ز، ۰، ۰، ۴۰۰، ۳۰۰)
        بوم.سبک پرشدگی(ز، "#22c55e")
        بوم.شروع مسیر(ز)
        بوم.کمان(ز، جای افقی، جای عمودی، ۱۰، ۰، ۶.۲۸۳۲)
        بوم.پرکن(ز)
    پایان)
پایان

تابع‌ها

پیگیری Track

تابع پیگیری(k: رشته)
کلیدی را به فهرست کلیدهای پیگیری‌شده می‌افزاید؛ نام کلید همان مقدار key مرورگر است، مثل a. تا ۳۲ کلید؛ بیشتر از آن بی‌صدا نادیده گرفته می‌شود. پیش یا پس از آماده سازی کار می‌کند.
web-keys-Game.salam
واردسازی دام
واردسازی وب.بوم
واردسازی وب.کلیدها

ناپایا ایکس := ۱۶۰.۰
ناپایا امتیاز := ۰

تابع ریشه:
    ب := دام.بساز("canvas")
    دام.تنظیم ویژگی(ب، "id"، "game")
    دام.افزودن(دام.بدنه()، ب)
    ز := بوم.دریافت بوم("game")
    کلیدها.آماده سازی()
    کلیدها.پیگیری("a")
    کلیدها.پیگیری("d")
    دام.چرخش فریم((زمان: اعشار۶۴):
        اگر کلیدها.نگه داشته("ArrowLeft") یا کلیدها.نگه داشته("a"):
            ایکس -= ۴
        پایان
        اگر کلیدها.نگه داشته("ArrowRight") یا کلیدها.نگه داشته("d"):
            ایکس += ۴
        پایان
        اگر کلیدها.فشرده شد(" "):
            امتیاز += ۱
        پایان
        بوم.پاک کردن مستطیل(ز، ۰، ۰، بوم.عرض(ز)، بوم.ارتفاع(ز))
        بوم.پرکردن مستطیل(ز، ایکس - ۱۰، ۱۰۰، ۲۰، ۲۰)
        بوم.پرکردن متن(ز، "امتیاز: " + امتیاز، ۱۰، ۲۰)
    پایان)
پایان

آماده سازی Init

تابع آماده سازی()
شنیدن رویدادهای پنجره را آغاز می‌کند و کلیدهای جهت، Enter و فاصله را پیگیری می‌کند. کلیدهای پیگیری‌شده دیگر صفحه را پیمایش نمی‌کنند و در جعبه‌ها تایپ نمی‌شوند. یک بار صدایش بزنید؛ فراخوانی دوم یک جفت شنونده‌ی دیگر می‌افزاید.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: web-keys-Game.salam

نگه داشته Down

تابع نگه داشته(k: رشته): منطقی
کلید اکنون نگه داشته شده؛ برای حرکت پیوسته.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: web-keys-Game.salam

فشرده شد Pressed

تابع فشرده شد(k: رشته): منطقی
کلید از دفعه‌ی قبلی که پرسیدید تازه فشرده شده؛ هر فشار فقط یک بار درست برمی‌گرداند. برای پرش یا شلیک.

نمونه‌ی این مورد همراه با موارد بالاتر آمده است: web-keys-Game.salam