【６】アリクイあくしょんコード解説　164行目〜

// 左
const leftBtn = document.getElementById("left");
leftBtn.addEventListener("touchstart", (e) => { e.preventDefault(); keys["ArrowLeft"] = true; });
leftBtn.addEventListener("touchend", (e) => { e.preventDefault(); keys["ArrowLeft"] = false; });
leftBtn.addEventListener("mousedown", () => keys["ArrowLeft"] = true);
leftBtn.addEventListener("mouseup", () => keys["ArrowLeft"] = false);
leftBtn.addEventListener("mouseleave", () => keys["ArrowLeft"] = false);

// 右
const rightBtn = document.getElementById("right");
rightBtn.addEventListener("touchstart", (e) => { e.preventDefault(); keys["ArrowRight"] = true; });
rightBtn.addEventListener("touchend", (e) => { e.preventDefault(); keys["ArrowRight"] = false; });
rightBtn.addEventListener("mousedown", () => keys["ArrowRight"] = true);
rightBtn.addEventListener("mouseup", () => keys["ArrowRight"] = false);
rightBtn.addEventListener("mouseleave", () => keys["ArrowRight"] = false);

// ジャンプ
const jumpBtn = document.getElementById("jump");
jumpBtn.addEventListener("touchstart", () => {
  if (!player.isJumping && !jumpKeyPressed) {
    player.velocityY = jumpPower;
    player.isJumping = true;
    jumpKeyPressed = true;
  }
  keys["Space"] = true;
});
jumpBtn.addEventListener("touchend", () => {
  keys["Space"] = false;
  jumpKeyPressed = false;
});
jumpBtn.addEventListener("mousedown", () => {
  if (!player.isJumping && !jumpKeyPressed) {
    player.velocityY = jumpPower;
    player.isJumping = true;
    jumpKeyPressed = true;
  }
  keys["Space"] = true;
});
jumpBtn.addEventListener("mouseup", () => {
  keys["Space"] = false;
  jumpKeyPressed = false;
});
jumpBtn.addEventListener("mouseleave", () => {
  keys["Space"] = false;
  jumpKeyPressed = false;
});

// 攻撃
const attackBtn = document.getElementById("attack");
attackBtn.addEventListener("touchstart", () => {
  if (!isAttacking && canAttack) {
    isAttacking = true;
    canAttack = false;
    attackTimer = 10;
  }
  keys["ArrowUp"] = true;
});
attackBtn.addEventListener("touchend", () => {
  keys["ArrowUp"] = false;
  canAttack = true;
});
attackBtn.addEventListener("mousedown", () => {
  if (!isAttacking && canAttack) {
    isAttacking = true;
    canAttack = false;
    attackTimer = 10;
  }
  keys["ArrowUp"] = true;
});
attackBtn.addEventListener("mouseup", () => {
  keys["ArrowUp"] = false;
  canAttack = true;
});
attackBtn.addEventListener("mouseleave", () => {
  keys["ArrowUp"] = false;
  canAttack = true;
});

const leftBtn = document.getElementById(“left”);

• const leftBtn
  → 要素を leftBtn という名前の定数に保存。
  この後で leftBtn を使ってクリックイベントを設定したり、スタイルを変更したりできる。
• document
  → 現在の HTML ページ全体（DOM）を指す。
• get
  → 取得。
• Element
  → HTML内の「タグ（要素）」を JavaScript で表したもの。
  HTML要素（= Element）。
• getElementById(“left”)
  → HTML 要素の中から left と設定 (id="left")されたIDを探して取得。存在しない場合は null （「何もないこと」を明示的に示す値）を返す。

touchstartイベント

leftBtn.addEventListener("touchstart", (e) => { e.preventDefault(); keys["ArrowLeft"] = true; });

leftBtn にイベントリスナー（イベントが起きたら実行する関数）をつけている。

touchstart
→ スマホやタブレットで指を置いた瞬間に発生するイベント。

preventDefault()

→ 組み込み関数。オブジェクトの操作を定義したもの。
「prevent」＝止める、「default」＝デフォルト動作。
ブラウザのデフォルトの動作を止める。

preventDefault()

書き方	意味
preventDefault	関数そのもの（まだ実行していない）
preventDefault()	関数を実行する（←これが重要！）

💬「空カッコ」なのはなぜ？

preventDefault() は 引数（ひきすう）を必要としない関数 だから。

つまり、「何か特別な値を渡さなくても使える」＝ カッコの中に何も書く必要がない、ということ。

ここまでをまとめると…

指でボタンをタッチしたとき

e.preventDefault() でスクロールなどの標準動作を防ぐ

keys["ArrowLeft"] を true にする

各イベントの意味

touchstart　指が画面上の要素に触れた瞬間に発生

touchend　指が画面から離れた瞬間に発生

mousedown　マウスのボタンを押した瞬間に発生

mouseup　マウスのボタンを離した瞬間に発生

mouseleave　マウスカーソルが、対象の要素の外に出た瞬間に発生