p5.jsでゲーム制作｜最小の避けゲーを作って各行を読む

p5.jsのゲームは、HTMLファイル1つ（70行）で動きます。

今回作ったのは、上から落ちてくる四角を左右の矢印キーで避ける「避けゲー」です。ブロックに当たるとゲームオーバーになり、スペースキーでやり直せます。

コードはAI（Claude）に書いてもらい、手元のChromeで実際にキー入力を送って確かめました。完成コードの全文と、各行が何をしているかの対応表を載せます。

作ったものと、頼んだ条件

コードを書くときに出した条件は、次の5つです。

1. HTMLファイル1つで動く

2. p5.jsはCDNから読み込む。バージョンは固定する

3. 左右の矢印キーで下の自機を動かす

4. 上から落ちてくる四角に当たったらゲームオーバー

5. スペースキーでやり直せる

結果は、最初に書いたコードがそのまま動きました。書き直しは発生していません。確かめた内容は、後ろの「動かして確かめた結果」にまとめています。

p5.jsとは何か、どう読み込むか

p5.jsは、絵を描いたり動かしたりするためのJavaScriptのライブラリです。ゲーム用の専用ツールではなく、画面に四角を描く、キーの状態を調べる、といった道具の集まりです。

HTMLの中でp5.jsを読み込むと、setupとdrawという名前の関数を書くだけで、動く画面を作れます。

読み込みには、公式のダウンロードページに載っているCDNのURLを使いました。2026年10月28日に確認した時点で、公式は次のURLを「現在のバージョン」として案内しています。

https://cdn.jsdelivr.net/npm/p5@2.3.3/lib/p5.min.js

同じページには、2系の最新を常に読み込むURL（p5@2）もあります。ただしそれだと、後日バージョンが変わったときにコードの動きが変わるかもしれません。番号まで書いた形を使いました。

setupとdrawの役割

公式リファレンスの説明を、この記事の言い方でまとめます。

• setup()は、スケッチが始まるときに1回だけ呼ばれる。キャンバスを作る、変数を初期化するといった準備に使う

• draw()は、スケッチが動いている間、繰り返し呼ばれる。標準では1秒に60回実行しようとする

• createCanvas()は、setup()の最初に1回だけ呼ぶ。2回以上呼ぶと動きが不安定になると公式に書かれている

ゲームで言えば、setupが盤面を用意する係で、drawが1コマずつ画面を描き直す係です。

完成コード全文

次のファイルが完成コードです。index.htmlという名前で保存してブラウザで開くと動きます。ファイルの保存のしかたと開き方は、HTML1ファイルで動くゲームの作り方と保存のしかたで手順を書きました。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>避けゲー</title>
<script src="https://cdn.jsdelivr.net/npm/p5@2.3.3/lib/p5.min.js"></script>
</head>
<body>
<script>
let px;
let blocks;
let frames;
let over;

function setup() {
  createCanvas(400, 500);
  rectMode(CENTER);
  textAlign(CENTER, CENTER);
  startGame();
}

function startGame() {
  px = width / 2;
  blocks = [];
  frames = 0;
  over = false;
}

function draw() {
  background(15, 37, 64);

  if (!over) {
    if (keyIsDown(LEFT_ARROW)) px -= 5;
    if (keyIsDown(RIGHT_ARROW)) px += 5;
    px = constrain(px, 20, width - 20);

    if (frameCount % 30 === 0) {
      blocks.push({ x: random(15, width - 15), y: -15 });
    }
    for (const b of blocks) {
      b.y += 4 + frames / 300;
      if (abs(b.x - px) < 35 && abs(b.y - 460) < 25) over = true;
    }
    blocks = blocks.filter(b => b.y < height + 20);
    frames++;
  }

  fill(255, 159, 28);
  for (const b of blocks) rect(b.x, b.y, 30, 30);
  fill(46, 196, 182);
  rect(px, 460, 40, 20);

  fill(255);
  textSize(20);
  text(floor(frames / 60) + " 秒", width / 2, 24);
  if (over) {
    textSize(32);
    text("ゲームオーバー", width / 2, 220);
    textSize(18);
    text("スペースキーでもう一度", width / 2, 262);
  }
}

function keyPressed() {
  if (over && key === " ") startGame();
  return false;
}
</script>
</body>
</html>

CDNに届かない状態で開くと、p5.jsを読み込めないので画面は白いままです。この点は後ろで確かめた結果を載せます。

各行の役割の対応表

行番号は、上のコードをindex.htmlに保存したときの行です。エディターで行番号を出して見比べてください。

表の中で、初めて見ると分かりにくい行を3つ補足します。

33行目と34行目：キーを押している間だけ動く

keyIsDown(LEFT_ARROW)は、そのキーが今押されているかどうかをtrueかfalseで返します。公式リファレンスには、複数のキーを同時に調べるときに便利、と書かれています。drawの中に書いてあるので、押している間は、1フレームごとにpxが5ずつ減る形です。

公式リファレンスによると、p5.js 2.0以降のkeyIsDown()では、キーの番号（88のような数字）を渡す書き方ができません。LEFT_ARROWのような名前付きの定数か、'x'のような文字を渡します。以前の解説記事のコードをそのまま貼ってキーが効かないときは、ここを疑ってください。

42行目：当たり判定は「差の大きさ」を見るだけ

abs(b.x - px) < 35は、ブロックの中心と自機の中心の横の距離が35より近い、という意味です。35は、ブロックの幅30の半分（15）と自機の幅40の半分（20）を足した数です。縦の25も同じ考え方で、ブロックの高さ30の半分（15）と自機の高さ20の半分（10）を足しています。横も縦も近ければ、2つの四角は重なっています。

rectMode(CENTER)（17行目）で、四角の座標を中心に揃えました。そのおかげでこの計算で足ります。

64行目から67行目：キーを押した時の処理

keyPressed()は、キーを押した時点で1回だけ呼ばれます。drawの中のkeyIsDownとは役割が違い、「押している間ずっと」ではなく「押した合図」を受け取ります。やり直しは1回押せば足りるので、こちらの担当です。

最後のreturn false;は、ブラウザが元々持っている動きを止めるための1行です。公式リファレンスには、スペースキーでページの下へ移動するブラウザがあるので、止めたいときはreturn false;を書く、と説明があります。

動かして確かめた結果

2026年10月28日、手元のWindows 11 HomeでChrome 156を画面なしの状態（headless）で起動し、実際のキー入力を送って確かめました。1台のPCでの結果です。

プレー中と、ゲームオーバーの画面を撮った画像は次のとおりです。

結果から読み取れることを並べます。

• 左キーを0.5秒押すと、pxは200から45になった。そのあいだのフレーム数は31で、31×5=155、200-155=45と計算も合う。コードの「5」が、動く速さそのものだと分かる

• 左右に押し続けると、20と380で止まった。35行目のconstrainの効果

• 入力せずに放置すると、3回とも約2〜3秒でゲームオーバーになった。ブロックの位置は毎回ランダムなので、秒数は変わる

• 終了後にAキーでは再開せず、スペースキーでは状態が最初に戻った

• 矢印キーを自動で押す簡単なスクリプトを自分で書いて3回走らせたところ、22.9秒でゲームオーバーが1回、25秒で打ち切って生存が2回だった。避け続けることはできるが、遊ぶほど速くなる

確かめられたのは、ここまでです。次の2点は、確かめた結果が「問題あり」か「分からない」でした。

1. CDNに届かない状態（接続を拒否させた状態）でファイルを開くと、キャンバスが作られず、画面は白いままだった。コンソールには、p5.min.jsを読み込めなかったという内容のエラーが出た。ファイルが壊れているわけではなく、読み込みの失敗です

2. スペースキーを押してもページが下へ動かないか、は確かめきれなかった。return false;を外した対照でも動かなかったので、この試験では差が出ず、判断に使えない

バージョン表示について

読み込んだのはp5@2.3.3です。配布物のpackage.jsonには"version": "2.3.3"とありましたが、ブラウザでp5.VERSIONを表示すると2.3.1と出ました。p5.min.jsの中に書かれたバージョン文字列が2.3.1になっていました。動作には影響しませんでしたが、バージョンをメモするときは、読み込んだURLの番号を控えておくと間違えません。

数字を変えて遊ぶ

動かせたら、数字を1つだけ変えて、何が変わるかを見ます。表の行と照らして、計算で分かる範囲を並べます。

• 33行目と34行目の5を大きくすると、自機が速く動く。1フレームの移動量なので、10なら1フレームの移動量が2倍になり、同じ0.5秒で左の壁（20）まで着く

• 37行目の30を小さくすると、ブロックが増える。15なら、約0.25秒ごとに1つ足される

• 41行目の4は、落ちる速さの最初の値。frames / 300の300を小さくすると、速くなる勢いが増す

この3つは、コードから計算した説明で、変えた版を動かして確かめたものではありません。

ここまでで、避けゲーの全行を読めるようになりました。AIが書いた別のコードを読むときの見方は、JavaScriptゲームのコードの読み方を表にした記事にまとめています。遊ぶ題材を変えたいときは、ゲーム作り 初心者のジャンルの選び方で、ジャンルごとの難しさを同じ基準で並べました。

p5.jsの公式リファレンスと、ダウンロードページの内容は、2026年10月28日に確認しました。画面の説明や配布するバージョンは更新されることがあるので、動かないときは公式の最新も見てください。

次に変えるなら、ブロックに「当たると得点が増える種類」を足す形が、いまのコードの延長で作れます。blocksの中身に種類の印を1つ足し、42行目の判定で分けます。