Назария

Идоракунӣ

Ду усули гӯш кардани клавиатура

Дар мавзӯи гузаштаи DOM мо ба keydown дарҳол ҷавоб медодем: тирчаро пахш кардед — тӯбча як катак ҷаҳид. Барои бозӣ ин бад аст: ҳангоми нигоҳ доштани тугма keydown бо таъхир такрор мешавад (мисли ҳарфҳо дар майдони матн), ва ҳаракат ҷаҳиш-ҷаҳиш мешавад. Ду тугмаро якбора (рост + ҷаҳиш) ҳамин тавр умуман дошта намешавад.

Бинобар ин дар бозиҳо ҳодисаҳои клавиатура танҳо дар хотир медоранд, ки кадом тугмаҳо ҳоло пахшанд, давраи бозӣ бошад дар ҳар кадр ба ин менигарад ва қаҳрамонро ҳамвор ҳаракат медиҳад.

Маҷмӯи тугмаҳои пахшшуда

Set — коллексия бе такрор бо add, delete ва has-и тез. Комилан мувофиқ аст:

const keys = new Set();

document.addEventListener("keydown", (e) => keys.add(e.key));
document.addEventListener("keyup", (e) => keys.delete(e.key));

// дар update:
if (keys.has("ArrowLeft")) player.x -= 200 * dt;
if (keys.has("ArrowRight")) player.x += 200 * dt;

keydown-ҳои такрорӣ ҳангоми нигоҳ доштан халал намерасонанд: ба Set илова кардани он чи аллакай ҳаст — ҳеҷ чизро иваз намекунад.

Тирчаҳо ва фосила бо пешфарз саҳифаро варақ мезананд. Барои он ки ин ҳангоми бозӣ нашавад:

document.addEventListener("keydown", (e) => {
  keys.add(e.key);
  if (e.key.startsWith("Arrow") || e.key === " ") e.preventDefault();
});

Боз як майдачиз: агар равзана бо тугмаи пахшшуда фокусро гум кунад, keyup намеояд, ва қаҳрамон худ ба худ медавад. Ҳамин тавр ислоҳ мешавад: window.addEventListener("blur", () => keys.clear());.

Самт ва суръат

Қулай аст, ки аввал самт-ро −1, 0 ё 1 ҳисоб кунем, баъд ба суръат зарб занем:

let dx = 0;
if (keys.has("ArrowLeft")) dx -= 1;
if (keys.has("ArrowRight")) dx += 1;   // ҳарду пахш → 0, меистем
player.x += dx * SPEED * dt;

Агар аз рӯи диагонал ҳаракат кунем, тезтар мешавад (√2 ≈ 1.41 маротиба), чунки ду ҳаракат ҷамъ мешаванд. Дар аркадаҳо инро аксар вақт мебахшанд, дар бозиҳои дақиқ бошад самтро нормал мекунанд — dx ва dy-ро ба дарозии вектор тақсим мекунанд.

Аз канор нагузаштан

Барои он ки қаҳрамон аз экран нагурезад, координатаи онро байни ҳадди ақал ва ҳадди аксар фишор медиҳанд:

const clamp = (v, min, max) => Math.max(min, Math.min(max, v));

player.x = clamp(player.x, 0, canvas.width - player.w);
player.y = clamp(player.y, 0, canvas.height - player.h);

Ҳадди аксар — паҳнои ҳолст − паҳнои қаҳрамон, чунки x — канори чап аст, канори рости қаҳрамон бошад w пиксел дуртар.

Ҷаҳиш

Ҷаҳиш — ин суръати фаврӣ ба боло (vy-и манфӣ, зеро y ба поён меафзояд), ки баъд онро ҷозиба хомӯш мекунад:

if (keys.has(" ") && player.onGround) {
  player.vy = -400;
  player.onGround = false;
}
player.vy += GRAVITY * dt;
player.y += player.vy * dt;

if (player.y >= GROUND) {      // ба замин афтод
  player.y = GROUND;
  player.vy = 0;
  player.onGround = true;
}

Парчами onGround ҷаҳиданро дар ҳаво манъ мекунад. Баландии ҷаҳиш аз суръати ибтидоӣ ва ҷозиба вобаста аст: ҷозиба зиёдтар — ҷаҳиш пасттар ва «вазнинтар». Интихоби ин ададҳо — қисми геймдизайн аст.

Муш

Муш дар ҳолст ҳамин тавр, тавассути ҳодисаҳо кор мекунад. Танҳо координатаҳои муш — нисбат ба равзана, ба мо бошад координатаҳо дар дохили ҳолст лозиманд:

canvas.addEventListener("click", (e) => {
  const rect = canvas.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const y = e.clientY - rect.top;
  console.log("клик дар нуқтаи ҳолст", x, y);
});

Хулоса

Ҳодисаҳои клавиатура танҳо ҳолатро сабт мекунанд: keys.add / keys.delete; қарорҳо — дар update.
preventDefault() барои тирчаҳо ва фосила, keys.clear() ҳангоми гум шудани фокус.
Самти −1/0/1 × суръат × dt; координатаҳоро бо Math.max / Math.min фишор медиҳем.
Ҷаҳиш: vy-и манфӣ + ҷозиба + парчами onGround.