【初心者向け】JavaScriptゲームでキャラを動かす方法｜キー操作の基本

「当たり判定はなんとなく分かったけど、キャラが動かない…」

ゲーム作りを始めた多くの人が、ここで一度つまずきます。
でも安心してください。

この記事では、

• キーボードでキャラを動かす仕組み
• JavaScriptでのキー操作の基本
• 実際に動くサンプルコード

を使って、「動いた！」を体験するところまで 一緒に進みます。

難しい数学やライブラリは使いません。
まずは 左右に動くだけのキャラ を作ってみましょう。

---

プログラミング初心者の方でも大丈夫です。
コードはすべて コピペOK で進めます。

---

なぜキャラ移動が最初に必要なのか

ゲームでは、ほぼ必ず「キャラが動く」要素があります。

• アクションゲーム
• シューティングゲーム
• パズルゲーム

どんなジャンルでも、
「動かせないキャラ＝遊べないゲーム」 です。

また、キャラ移動ができるようになると、

• 当たり判定
• ジャンプ
• 攻撃
• スコア

といった要素を すべてつなげられるようになります。

だからこそ、
ゲーム作りの最初の1歩として「キャラ移動」は最重要なのです。

---

キャラ移動の仕組みを超シンプルに理解する

初心者のうちは、難しく考えなくてOKです。

考えるのはこの2つだけ

• 位置（x, y）
• 速さ（speed）

たとえば、

• x = 100（横の位置）
• speed = 5（1回で5動く）

という状態で、

x += speed;

と書くと、キャラは 右に動きます。

---

ゲームは「毎フレーム更新」されている

ゲームでは、

1. 位置を更新する
2. 画面を描き直す

これを 1秒間に何十回も 繰り返しています。

キーが押されている間、
毎フレーム少しずつ位置を変えることで
「スーッ」と動いて見えるのです。

---

JavaScriptでキー入力を取得する方法

まずは、キーボード入力を受け取ります。

基本の考え方

• キーが押された → true
• キーが離された → false

これを変数で管理します。

---

キー入力の基本コード

let rightPressed = false;
let leftPressed = false;

document.addEventListener("keydown", (e) => {
  if (e.key === "ArrowRight") {
    rightPressed = true;
  }
  if (e.key === "ArrowLeft") {
    leftPressed = true;
  }
});

document.addEventListener("keyup", (e) => {
  if (e.key === "ArrowRight") {
    rightPressed = false;
  }
  if (e.key === "ArrowLeft") {
    leftPressed = false;
  }
});

これで、

• →キーを押すと rightPressed = true
• ←キーを押すと leftPressed = true

になります。

---

キャラを左右に動かすサンプルコード

ここからは Canvasを使った最小構成 の例です。

---

HTML

<canvas id="game" width="400" height="300"></canvas>

---

JavaScript

const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");

let player = {
  x: 180,
  y: 130,
  width: 40,
  height: 40,
  speed: 4
};

let rightPressed = false;
let leftPressed = false;

document.addEventListener("keydown", (e) => {
  if (e.key === "ArrowRight") rightPressed = true;
  if (e.key === "ArrowLeft") leftPressed = true;
});

document.addEventListener("keyup", (e) => {
  if (e.key === "ArrowRight") rightPressed = false;
  if (e.key === "ArrowLeft") leftPressed = false;
});

function update() {
  if (rightPressed) {
    player.x += player.speed;
  }
  if (leftPressed) {
    player.x -= player.speed;
  }
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = "blue";
  ctx.fillRect(player.x, player.y, player.width, player.height);
}

function loop() {
  update();
  draw();
  requestAnimationFrame(loop);
}

loop();

左右キーで、青い四角が動けば成功です 🎉

---

初心者がよくやるミスと対処法

ミス① キーを押しても動かない

👉 keydown / keyup が正しく書けているか確認。

---

ミス② 動きが速すぎる

👉 speed の数値を小さくする（2〜4がおすすめ）。

---

ミス③ 画面から消える

👉 xの範囲を制限する必要あり。

player.x = Math.max(0, Math.min(player.x, canvas.width - player.width));

---

次にやること（おすすめ）

ここまで来たら、次はこれです。

▶ 【当たり判定の作り方】
▶ 【敵キャラを配置する方法】
▶ 【JavaScriptゲーム基礎まとめ】

これらを組み合わせることで、
ちゃんと遊べるゲーム が完成していきます。

---

まとめ

キャラを動かせたあなたは、
もう立派な「ゲーム制作者の入口」に立っています。

最初は分からなくて当然です。
理解よりも先に 「動いた！」を大切にしてください。

このページを地図にして、
あなたのゲーム作りを一歩ずつ進めていきましょう。

🎮 次は、敵を出してみませんか？