スネークゲームの歴史と自作方法
遊びを見つける執筆にClaudeを使用しています。
スネークゲームとは、プレイヤーが操作する蛇が画面を動き回り、エサを食べるたびに体が長くなっていくゲームです。自分の体や壁にぶつかればゲームオーバーになるというシンプルなルールが、数十年にわたって世界中で愛され続けています。 このゲームはどこから来て、なぜここまで広まったのでしょうか。そして、プログラミングの学習素材としてなぜこれほど頻繁に使われるのでしょうか。この記事では歴史的な経緯を整理したうえで、実際に自分でスネークゲームを作るための手順と判断基準を具体的に紹介します。
スネークゲームの起源と広がり
スネークゲームの直接の祖先とされるのは、1976年にアタリが発表したアーケードゲーム「Blockade」です。2人のプレイヤーがそれぞれキャラクターを動かし、自分や相手の軌跡を壁に見立てて相手を追い詰めるという形式でした。これをもとにしたバリエーションが1970年代後半から多数登場し、「Snake」「Worm」などの名前でパソコン向けにも移植されていきました。
1人プレイの形式が定着したのは、1980年代のホームコンピューター時代です。Apple IIやコモドール64などのプラットフォーム向けに無数のクローンが作られ、プログラミング雑誌にソースコードが掲載されることも珍しくありませんでした。入力が少なく、ロジックが単純なため、コードを写経するだけで動くゲームが手に入るという学習体験が、多くの開発者の原体験になっています。
最も広く知られた普及のきっかけは、1998年にノキアが携帯電話「Nokia 6110」にプリインストールした「Snake」です。ボタン操作だけで遊べる設計がモバイル端末と相性よく、世界中の携帯ユーザーに届きました。スマートフォン以前の時代に「ゲームを知らない人」にまで届いたタイトルとして、ゲーム史に独特の位置を占めています。
なぜ自作の練習題材に選ばれるのか
スネークゲームがプログラミング学習の定番になっている理由は、必要なロジックの種類がちょうど良い範囲に収まっているからです。
ゲームループ（一定間隔で画面を更新し続ける仕組み）、配列による座標管理、キー入力の処理、衝突判定——この4つが実装できれば基本形は完成します。どれもゲーム開発の基礎として何度も使う概念であり、かつスネークゲームという一つの題材の中に自然な文脈で登場します。「このロジックが何に使われるのか」を考えながら学べる点が、抽象的な演習と異なります。
一方で、完成後に機能を追加する余地も豊富です。スコア表示、難易度の段階的な上昇、障害物の追加、2人対戦モードなど、基礎を壊さずに拡張できる構造になっています。「動くものを作ってから改良する」という開発の感覚を身につける素材として、これ以上ない適性があります。
自作の前に決める3つのこと
実際に作り始める前に、次の3点を決めておくと迷いが減ります。
使う言語・環境
ブラウザで動かすことを前提にするなら、HTML・CSS・JavaScriptの組み合わせが最も手軽です。インストール不要で、書いたコードをすぐにブラウザで確認でき、完成後にそのままウェブに公開できます。Pythonで作りたい場合はPygameというライブラリがよく使われますが、ブラウザ公開には別の手順が必要になります。学習コストと公開のしやすさを両立したいなら、まずJavaScriptを選ぶのが無難です。
グリッドサイズと更新間隔
スネークゲームの画面は「グリッド（升目）」で管理するのが定石です。グリッドを20×20程度に設定すると、蛇の座標を2次元配列で管理しやすくなります。更新間隔（蛇が1マス進む速度）は150〜200ミリ秒あたりが初心者向けの難易度として適しています。後から変数一つで調整できるよう、最初から定数として切り出しておくと便利です。
ゲームオーバーの条件
壁への衝突と自己衝突の2種類が基本です。壁を通り抜けて反対側に出る「ループ型」にするか、壁でゲームオーバーにする「閉鎖型」にするかで難易度が変わります。最初は閉鎖型で作り、後からトグルで切り替えられるようにするのが改良の練習にもなります。
JavaScriptでの実装手順
ここではHTML+JavaScriptによるブラウザ版の基本手順を示します。
- HTMLにcanvas要素を用意する。<canvas id="game" width="400" height="400"></canvas> のように記述し、JavaScriptから描画コンテキストを取得します。
- 蛇の状態を配列で持つ。蛇の体は「座標オブジェクトの配列」として表現します。先頭が頭、末尾が尻尾で、毎ステップ先頭に新しい座標を追加し、末尾を削除するだけで移動が表現できます。エサを食べたときは末尾を削除しないことで体が伸びます。
- ゲームループを作る。setInterval または requestAnimationFrame を使い、一定間隔で「状態更新→描画クリア→再描画」の順に処理します。setInterval のほうが間隔の指定がシンプルで、最初の実装には向いています。
- キー入力で方向を変える。document.addEventListener('keydown', ...) で矢印キーを受け取り、現在の進行方向と逆方向への転換だけを弾く条件を加えます。この「逆方向だけ禁止」のロジックを忘れると、左向き中に右キーを押した瞬間に自分の体に突っ込んでゲームオーバーになるバグが起きます。
- 衝突判定を加える。毎ステップ、頭の座標が壁の外か・自分の体と同じ座標かをチェックします。体との比較は配列の some() メソッドを使うと1行で書けます。
- エサをランダム配置する。エサの座標は蛇の体が存在しないグリッドセルの中からランダムに選びます。蛇が長くなるにつれて空きセルが減るため、完全にランダムな座標を生成して蛇と重ならないかを確認するループで実装するのが一般的です。
最低限のスネークゲームはこの6ステップで動き始めます。コード量はコメントを除いて100〜150行程度に収まることが多く、一日で動くものを作れる規模感です。
完成後の改良アイデアと公開
基本形が動いたら、次のような機能を一つずつ追加することで実力が伸びます。
- スコア表示とハイスコア保存：localStorage を使えばブラウザを閉じてもスコアが残ります。
- スピードアップ：エサを食べるたびに setInterval の間隔を数ミリ秒ずつ短くします。
- 障害物の配置：固定または乱数生成の障害物を加えると難易度設計の練習になります。
- モバイル対応：スワイプイベントを追加するか、画面上にボタンを配置するとスマートフォンでも遊べます。
完成したゲームをHTMLファイルまたはZIPファイルとしてまとめれば、アソバースに投稿して公開することができます。自分が作ったスネークゲームを他の人に遊んでもらえる環境に置くことで、フィードバックを得ながら改良を続けるサイクルに入りやすくなります。
次の行動
JavaScriptの基本（変数・配列・関数・イベント）を一通り知っている方は、今日中に canvas 要素への描画から始めてみてください。まず20×20のグリッドを画面に表示するだけでも、座標管理の感覚がつかめます。完成したら、HTMLファイルとしてアソバースに投稿し、実際に遊んでもらいながら次の改良点を探してみてください。
参考資料
- MDN Web Docs（Mozilla）— Canvas API・setInterval・keydown イベント・localStorage の各リファレンス
- 「Blockade」アーケード版についての記録 — The Killer List of Videogames（KLOV）
- Nokia 6110 製品情報 — Nokia公式アーカイブ
