皆さん、こんにちは。あんちゃんです。今回は、無料ブラウザゲームのアクション「ネジまるのカチコチ塔」を、AIのClaude（クロード）と作りました！夜明けを告げる大時計が止まってしまった古い塔で、ぜんまい仕掛けの小さな掃除ロボット「ネジまる」を動かして、床をぜんぶ掃除しながら最上階の鐘をめざします。遊び方は、ジャンプで床を下から突き上げて、その上にいる敵をひっくり返し、横から蹴り落とすだけ。レトロ風の1画面アクションです。ダウンロードもインストールもいらず、この記事の中で、パソコンでもスマホでも遊べるように作りました。操作はゲームのすぐ上のカードに書いたので、まずは1ステージ触ってみてください！
ネジまるのカチコチ塔の あそびかた
床を下から突き上げて敵をひっくり返し、横から蹴り落としてね。
敵を全部取り除けばステージクリアだよ。
1突き上げる
ジャンプで頭を床にぶつけると、その床の上にいる敵がひっくり返るよ。
2蹴り落とす
ひっくり返った敵に横から触れると、蹴り飛ばせるよ。落としたネジを拾うと得点になるよ。
3急ぐ
ほうっておくと敵は約6秒で戻って、前より速くなるよ。パチパチだけは倒せないから、ジャンプでよけてね。
4ゼンマイどん
画面の中央の下にある巻き鍵を下から突くと、全員ひっくり返るよ。1ステージ3回までだよ。
5そうさ方法
パソコン
← →移動 SpaceかZでジャンプ Pでポーズ。先にゲーム画面をクリックしてから遊んでね。
スマホ
画面の下の「ひだり」「みぎ」「ジャンプ」ボタンで遊べるよ。
音が出るよ。ゲーム上部の「サウンド」ボタンで、いつでもオフにできるよ。
遊んでみてどうでしたか？詰まったら、下の「遊び方のコツ」をのぞいてみてください！
無料ブラウザゲームのアクション
「ネジまるのカチコチ塔」は、画面が1枚だけで進む、固定画面のゲームです。画面には床が4段と地面があって、画面の左の端から出ると右の端から戻ってくる、ぐるっとつながった作りになっています（ネジまるも敵も同じです）。ネジまるにできるのは、左右に歩くことと、ジャンプすること。この2つだけで、敵をぜんぶ取り除けばステージクリアです。
突き上げて蹴り落とす遊び
このゲームの中心は、床の下からジャンプで頭をぶつけることです。頭が床に当たると床がガコンと揺れて、その床の上に立っている敵がひっくり返ります。ひっくり返った敵に横から触れると、蹴り飛ばせます。蹴り落とした敵はネジを1個落とすので、拾えば得点になります。
ひっくり返った敵は、放っておくと約6秒で元に戻ります。しかも、戻るたびに前より速くなります。ひっくり返したら、すぐに蹴りに行くのがコツです。蹴ると1匹目が800点で、2.5秒以内に続けて蹴ると400点ずつ増えていきます（2400点が上限）。ネジは1個200点、20,000点ごとに残機が1つ増えます。最初の残機は3つです。
1画面と12ステージ
ステージは全部で12。塔の3つの章に、通常の面が3つとボスの面が1つずつあります。章のボスを倒すたびに、30秒のあいだ敵がいないなかでネジを集めるボーナスステージ「ネジあつめ」が1回あって、全部で3回です。エンディングを見ると、「つよくてもういちど」が選べるようになります。敵の速さが1.3倍になって、ボーナスのネジも1.4倍に増えます。
ネジまると塔のお話
町を見下ろす古い時計塔「カチコチ塔」。夜明けを告げる大時計が、ある晩から止まってしまいました。針は4時59分のまま。朝が来ない町は、いつまでも夜のままです。
原因は、塔の中につもったホコリでした。歯車のすきまに入りこんだホコリのかたまり「ホコリ大王モワモワ」が、塔のてっぺんに居座っています。そこで目を覚ますのが、時計守のハリじいさんが最後に動かした、ぜんまい仕掛けの掃除ロボット「ネジまる」です。仕事は、1階から鐘のある最上階まで床をぜんぶ掃除して、夜明けの鐘を鳴らすこと。
ネジまる、ハリじいさん、ホーさん
- ネジまる：主人公。手のひらサイズのぜんまい仕掛けの掃除ロボットで、丸い頭に小さなブラシのとさか、背中に大きなぜんまいがあります。体は銅色で、目は水色に光ります。
- ハリじいさん：時計守です。お話の語り手で、章のはじまりの幕間に出てきます。
- ホーさん：ふくろうの案内役。ステージの前に、遊び方のヒントを一言ずつ教えてくれます。
塔は3つの章に分かれています。それぞれ、こんな場所です。
- 第1章「歯車の地下室」：ゴトゴト回る歯車のあいだが、ホコリの巣になっています。
- 第2章「ゆげの機械室」：暑くて、床が油でヌルヌルしています。
- 第3章「鐘のある最上階」：夜明けまであと少し。すきま風が吹きます。
5種の敵と、ボス3体
敵はぜんぶ、ホコリ・カビ・静電気・油のような「汚れ」です。動物はいません。種類は5つで、倒し方がそれぞれ違います。
パチパチだけは倒せません。ジャンプでよけると、約12秒で勝手に消えます。ボスは、章の最後に1体ずつ出てきます。1章はダンゴホコリ、2章はユゲダスター、そして塔のてっぺんには、ホコリ大王モワモワが待っています。
遊び方のコツ
ステージの前にはホーさんが一言ヒントをくれます。ほかにも、知っておくと楽になるコツがあります。
- 突き上げは、敵が乗っている床のすぐ下から。頭の幅より左右に画面の点3つぶんだけ余裕があるので、真下でなくても当たります。
- ひっくり返したら、すぐ蹴る。約6秒で戻って、前より速くなります。
- カビモジャは2回突く。1回目は怒って速くなるだけで、2回目で裏返ります。
- ヌルリンの油の上では、すぐに止まれません。約8秒で消えるので、ジャンプする前に早めに離れておきます。
- タマゴロは、裏返したらすぐ蹴る。放っておくと、約3.3秒で2匹のホコモコに分かれます。
- ひび割れた床は、長く乗らない。乗ると約0.75秒で抜けて、約5秒で戻ります。
- 困ったらゼンマイどん。画面の床にいる敵がぜんぶひっくり返って、パチパチは消えます。残りの回数は、巻き鍵の上の3つのランプで分かります。
ゲームができるまで
ここからは、このゲームの作り方の話です。設計も、コードも、テストも、Claudeが書きました。
ぼくが頼んだこと
ぼくが頼んだのは、レトロ風の、床を下から突き上げて敵をひっくり返すアクションを、キャラクターもお話もステージも、ぜんぶオリジナルで作ってほしい、ということでした。このブログの記事の中で遊べる、HTML（ウェブページを書くための言葉）で動くゲームにしてほしい、とも。
そこから、止まった大時計がある塔のお話と、ぜんまい仕掛けの掃除ロボットが生まれました。敵がぜんぶ「汚れ」でそろっているのも、そのお話からです。Claudeについては、Claude公式サイト（※英語サイト・自動翻訳推奨）をどうぞ。
絵と音の作り方
このゲームは、画像も、フォントも、音のファイルも、1つも読み込んでいません。外部とは何もやりとりしない、HTMLファイル1つで動きます。
絵（ドット絵）は、文字の並びで描いています。ネジまるの立ち姿は、14文字の行を16行ならべた文字列です。1文字が画面の点1つぶんで、「O」は銅色、「c」は水色の目、「.」は透明、というふうに文字ごとに色を決めてあります。画面そのものは、横256点×縦224点の小さな絵として描いてから、画面の大きさに合わせて拡大して見せています。文字は拡大したあとに描くので、小さな画面でも潰れません。
音は、ブラウザに入っている音を作る仕組み（Web Audio）を使って、効果音も曲もコードで鳴らしています。曲は「C5」「E5」のような音名と、休みの「.」、のばしの「-」を並べた文字列で書いてあって、タイトル・各章・ボス・ボーナス・エンディングの7本あります。最初にキーを押すか画面をタップするまで、音の準備はしません。
ドット絵を自分でも描いてみたくなった方には、ドット絵を自由に描いて楽しむ本があります。楽天ブックスでは、2026年10月20日の時点で2,530円でした。
突き上げの判定
このゲームの心臓部です。ネジまるが上に動いているとき、頭の先が床の裏側の高さを通り過ぎたら、その床に頭が当たったことにします。床は、段ごとに「どこが床でどこがすきまか」を32列の文字列で持っているので、頭の下に床があるのか、すきまを通り抜けるのかも、そこで決まります。
当たったら、「何段目の床の、どこからどこまで」という情報が突き上げの処理に渡ります。処理は、その段の床の上に立っている敵のうち、頭の幅より左右に3点ほど広い範囲にいる敵を探して、ひっくり返します。空中にいる敵は対象外です。ボスも同じ判定で、ひっくり返るかわりに気絶します。
床の厚みは8点、段の間隔は42点で、ジャンプの高さは約55点です。42点の段を登れて、しかも下から床に頭が届く、という両方を満たすように逆算した数字です。最初は段の間隔を44点にしていたのですが、いちばん上の段にいるボスが画面上のバーに隠れてしまったので、42点に詰めました。
12ステージとボスの設計
12のステージは、章ごとに新しい仕掛けを足していく並びです。
- 第1章：ホコモコだけの1-1で操作に慣れて、1-2でカビモジャ、1-3でパチパチが加わります。
- 第2章：ヌルリンの油、床の中央からときどき噴き上がって体を上に押し上げる蒸気（その勢いで上の床に頭が当たるので、敵をひっくり返すこともできます）、乗ると抜けるひび割れの床。
- 第3章：タマゴロと、ときどき横から押してくるすきま風。3-3は足場が少ない配置です。
油も、蒸気も、風も、ひび割れも、「時間で変わる環境」と「ものの速さに足し算する」という同じ仕組みで作ってあります。おかげで、ボスの面にも風を吹かせることができました。
ボスは、突き上げると約4秒しびれて動けなくなります。そのあいだに横から蹴ると、体力が1減ります。体力は3・4・5と増えていって、残り1になると動きが1.6倍の速さになります。2章のボス、ユゲダスターは、蒸気をまとっているあいだは触れず、突いてもしびれません。蒸気が出る前に約0.7秒の予告があって、「いまは突くな」が見えるようにしました。
自動プレイでのテスト
ボットは、人の代わりにゲームを遊んでくれる自動プレイのプログラムです。敵を裏返せる位置（敵のいる床の1段下）まですきまを探して登って、真下でジャンプして、裏返ったら蹴る、という動きを70行ほどのコードで書いて、残機を99にした条件で、15ステージ（通常とボスが12、ボーナスが3）を最後まで通しました。
ボットはやられながら通ります。2-4では14回、3-4では12回です。これでわかるのは、どの面にも行き止まりがなく、残機さえあれば最後までたどり着けるということ。いちばん長くかかった2-4は、ボットで約4分40秒でした。最初にボットが通れなかった3-3は、すきまだらけで敵が1〜2秒で下に落ちてしまう配置が原因だったので、すきまを広く、敵の数を減らして直しています。
テストは、プログラムだけを試す169項目と、ブラウザを動かして通しで試す122項目があって、どちらも全部通りました。テストがちゃんと働くかも試しています。コヨーテタイムを無効にする、ゼンマイどんを4回使えるようにする、ボスの体力を1減らす、とわざとゲームを壊してみて、そのたびにテストが落ちることを見ました。
コードの肝5つ
ここからは、コードの話です。コードはぜんぶ、このゲームのソース（最後の1つだけは、テストのコード）からの抜粋で、間にあるコメントや別の部分は省いて並べています。プログラムを書かない方も、「へえ、こう考えて作るのか」くらいの気持ちで眺めてもらえたらうれしいです。ゲームの中身は、1秒を60コマに分けたフレームという単位で進みます。
肝①：左右のつながり
左右がつながった世界では、2つのものの距離を測るときに注意がいります。たとえば、右の端ぎわ（横の位置が250）にいるネジまると、左の端ぎわ（横の位置が6）にいる敵。ふつうに引き算すると244も離れていますが、画面はつながっているので、ぐるっと回れば12しか離れていません。
function dxWrap(a, b){ var d = ((b - a) % W + W) % W; if(d > W / 2){ d -= W; } return d; }
function overlap(a, b){
if(Math.abs(dxWrap(a.x, b.x)) >= a.hw + b.hw){ return false; }
return (a.y - a.h) < b.y && (b.y - b.h) < a.y;
}dxWrap は、近いほうの回り方で2つの位置の差を出す関数です（W は画面の幅の256）。差が半周の128を超えたら、反対向きに数え直しているだけです。overlap は、この差が2つの体の半分の幅の合計より小さくて、上下も重なっているときに「ぶつかっている」と答えます。蹴りも、敵に触れてやられる判定も、ネジを拾う判定も、ぜんぶこの関数を通っています。これで、画面の端をまたいでも、ちゃんと敵に当たります。
肝②：ジャンプの猶予
ジャンプのボタンを押すタイミングは、どうしてもずれます。着地する少し前に押してしまったり、足場から離れた少しあとに押してしまったり。そこで、2つの猶予を入れてあります。
- 先行入力：着地の7フレーム前（約0.12秒）までに押したジャンプは覚えておいて、着地した瞬間に出す。
- コヨーテタイム：足場を離れたあとも、7フレーム以内ならジャンプできる。ゲーム作りでそう呼ばれている工夫です。
if(p.on){ p.coy = CFG.coyote; } else if(p.coy > 0){ p.coy--; }
if(p.jb > 0 && (p.on || p.coy > 0)){
p.vy = -CFG.jumpV; p.on = false; p.coy = 0; p.jb = 0; p.jumping = true;
ev(w, "jump", { x: p.x, y: p.y });
}
if(p.jumping){
if(p.vy >= 0){ p.jumping = false; }
else if(!inp.j && p.vy < -CFG.cutV){ p.vy = -CFG.cutV; p.jumping = false; }
}p.jb が先行入力のメモで、ボタンを押した瞬間に7が入って、1フレームごとに1ずつ減ります。p.coy がコヨーテタイムのメモで、足が床についているあいだは7に戻され、離れると減っていきます。どちらかが残っていれば、ジャンプが出ます（p.vy は縦の速さで、上向きがマイナスです）。最後の4行は、ボタンを離したら上向きの速さを3.4まで切る処理です。ちょん押しなら低く、押しっぱなしなら高く跳べるようにしてあって、押しっぱなしで約55点、ちょん押しでも約30点は上がります。
肝③：床の角のあつかい
すきまを抜けて上の段に登るとき、頭が床の角にかすっただけで止められると、思ったより登りにくくなります。そこで、頭が床の角に少しだけ引っかかったときは、ぶつけたことにせず、横にずらして通しています。
function cornerNudge(w, b, lv){
var c0 = Math.floor((b.x - b.hw) / TS), c1 = Math.floor((b.x + b.hw - 0.001) / TS), c, n = 0, only = -1;
for(c = c0; c <= c1; c++){ if(solidAt(w, lv, c)){ n++; only = c; } }
if(n !== 1 || c0 === c1){ return false; }
if(only === c0){
var ov = (c0 + 1) * TS - (b.x - b.hw);
if(ov <= CFG.cornerPx){ b.x = (c0 + 1) * TS + b.hw + 0.05; return true; }
}else if(only === c1){
var ov2 = (b.x + b.hw) - c1 * TS;
if(ov2 <= CFG.cornerPx){ b.x = c1 * TS - b.hw - 0.05; return true; }
}
return false;
}c0 と c1 は、頭の左端と右端が、どの列（横8点ごとに1列）に入っているかです。頭の下で床がある列がちょうど1つで、その列への食い込み（ov）が CFG.cornerPx、つまり5点以内なら、食い込んだぶんだけ横にずらして true を返します。true が返ると、突き上げの処理は飛ばされて、ネジまるはそのまま上に抜けます。
肝④：戻るたびの加速
ひっくり返した敵が、戻るたびに前より速くなる仕組みです。これだけの数行で、できています。
function enemySpeed(w, e){
var d = ENEMY[e.kind];
if(e.kind === "spark"){ return d.spd * (w.def.spd || 1) * (w.hard ? CFG.hardSpeed : 1); }
var s = d.spd * (1 + 0.28 * Math.min(e.lvl, 4)) * (w.def.spd || 1) * (w.hard ? CFG.hardSpeed : 1);
if(e.angry){ s *= 1.5; }
return s;
}e.lvl は敵の速さの段階で、裏返って戻るたびに1上がり、上限は4です。段階が4になると、もとの速さの2.12倍（1＋0.28×4）です。カビモジャが怒ると段階が1上がって、さらに1.5倍になります。w.def.spd はステージごとの倍率（0.9〜1.15）で、w.hard は「つよくてもういちど」のときだけ1.3倍になります。パチパチ（spark）だけは段階がなく、速さは決まっています。放っておくほど手強くなる、というのが、この数行の中身です。
肝⑤：ブラウザなしのテスト
最後は、作り方の肝です。敵の動き、当たり判定、得点といったゲームの中身は、絵を描く部分やブラウザの部品にいっさい触らない1つの塊にまとめてあります（ソースの中の /* @@LOGIC-BEGIN */ から /* @@LOGIC-END */ まで）。テストは、その塊だけを取り出して、そのまま実行します。
const a = src.indexOf('/* @@LOGIC-BEGIN */'), b = src.indexOf('/* @@LOGIC-END */');
if (a < 0 || b < 0) { console.log('FAIL: logic markers not found'); process.exit(1); }
const KT = new Function(src.slice(a, b) + '\nreturn KT;')();
function botRun(id, seed) {
const w = KT.newWorld(id, { lives: 99, seed });
let t = 0;
while (w.phase !== 'done' && w.phase !== 'over' && t < 30000) { KT.step(w, KT.botInput(w)); t++; w.ev.length = 0; }
return { w, t };
}KT.newWorld でそのステージの世界をつくり、KT.step で1フレームずつ進めます。KT.botInput が返すボットの入力は、左・右・ジャンプの3つだけです。画面のボタンと同じ3つなので、ボットも人と同じ条件でしか動けません。ブラウザを開かなくても、ゲームを丸ごと動かして、15ステージの通しまでできるわけです。
コードを書く道具には、「Claude Code」があります。Claude Codeの公式ドキュメント（日本語）も、のぞいてみてください。
コードの話が気になった方には、ブラウザゲームづくりでJavaScriptを学べる入門書もあります。楽天ブックスでは、2026年10月20日の時点で2,640円でした。
このブログには、AIと作ったゲームがほかにもあります。縦に進むシューティング、もちもちの落ち物パズル、小説を書くタイピングゲーム。どれも記事の中で遊べます。
まとめ
無料ブラウザゲームのアクション「ネジまるのカチコチ塔」の話を、最後にまとめておきます。
- ブラウザですぐ遊べる：無料で、ダウンロードもインストールもいりません。この記事の中で、パソコンでもスマホでも遊べるように作りました。
- 床を突き上げて、蹴り落とす：1画面で遊べて、12のステージとボーナス3回、敵5種とボス3体です。
- 絵も音もコードで作った：画像も音のファイルも使わない、HTML1つのゲームです。
- AIと作った：自動テスト169項目とブラウザの通しテスト122項目が全部通り、ボットで15ステージを最後まで通しました。
ボットでは最後まで通れましたが、人が遊んだときにちょうどいい難しさになっているかは、これから知りたいところです。難しすぎた面、簡単すぎた面、ここで詰まったという面があれば、コメントで教えてください。音の感想や、動かなかったときの報告も歓迎です。動かして試したのは、ChromeやEdgeのもとになっているブラウザ（Chromium）だけなので、SafariやFirefoxで動かなかったら、ぜひ教えてください。
まずは1-1の、ホコモコ3匹から。全部のステージをクリアできたか、教えてくださいね！
コメント