昔のUSBメモリが出てきたので久しぶりに中身を見てみると、中学生の頃に趣味で作ったWin32API + GDI+ベースの簡単なゲームがでてきました。
それを最近、生成AI（ChatGPTなど）にソースコードごと丸投げして、HTML5 Canvas + JavaScriptに移植（Webアプリ化）してみたので、その過程をまとめます。なお、厳密にはWorldWideWebの機能を使っているわけでなく独立してブラウザ内で動くゲームですが、便宜上Webアプリと書かせていただきます。
オリジナルのゲームソースは学生時代のVisual C++ 2012（Win32API）に依存して動いており、現在のPC環境ではビルドしづらかったり、Windowsの実行ファイルだと気軽に動かせない状態でした。
そこで、ブラウザだけで動く形に作り直してもう一度遊びたいなと思い、生成AIに丸投げしてみました。
Webアプリ化したので、以下のページからPlay可能です：
https://takoyaki-3.github.io/takosan-no-boken
ゲーム概要
- ジャンル：いわゆる横スクロールのアクションゲーム
- 操作：左右キー（またはスマホの仮想ボタン）でキャラクター（タコ）を動かし、地面にぶつかるとバウンドする
- 目的：ゴール地点に到達したらクリア。画面外へ落下したり敵に当たるとゲームオーバー
- 移植先：HTML5 Canvas / JavaScript
もともとC++で書かれていたものを、そのままのゲームロジック（衝突判定やステージ構成など）でブラウザゲーム化しています。
作業の流れ
1. 既存のプロジェクトをAIに提示
まず、オリジナルのVisual C++プロジェクト構成がこちらでした（抜粋）。懐かしのVisual Studioのプロジェクト構成となっています。私は中学生の時に大槻有一郎さんの「13歳からはじめるゼロからのC言語ゲームプログラミング教室」でプログラミングに触れたので、その本の初級編のサンプルコードを基に開発していたので、ファイル名がその本の構成となっています。
たこさんの冒険4.0/
├── Debug/たこさんの冒険4.0.exe
├── animation.cpp
├── animation.h
├── lander.cpp
├── lander.h
├── mydshowhlp.cpp
├── mydshowhlp.h
├── たこさんの冒険4.0.sln
├── たこさんの冒険4.0.vcxproj
├── たこさんシリーズ/
│ ├── 画像/
│ │ ├── たこ(赤).png
│ │ ├── ゴール.png
│ │ ├── ロケット.png
│ ├── BGM/
│ │ ├── MainBGM.mp3
│ │ ├── ゲームオーバー.wav
...
なお、ゲームのメインロジックは animation.cpp, lander.cpp に書かれていました。これらのプロジェクトをすべてGit管理としたうえで、Gitリポジトリの中身を丸っとGeminiに投げてドキュメントを自動生成・更新してみる
のように、レポジトリに含まれるファイル全体を問答無用で投げ込みました。
2. AIへのプロンプト
以下のようなプロンプトを投げただけでPCで動く１つのHTMLファイルが返ってきました。：
次のようなWindows用のアプリを、HTML/JavaScript/CSSだけで動くWebアプリに書き換えてください。
## 構成
Debug/たこさんの冒険4.0.exe
UpgradeLog.XML
UpgradeLog.htm
animation.cpp
animation.h
lander.cpp
lander.h
mydshowhlp.cpp
mydshowhlp.h
zfchap4-1.suo
zfchap5-0.suo
zfchap5-1.opensdf
zfchap5-1.suo
zfchap5-1.vcxproj
zfchap5-1.vcxproj.filters
たこさんの冒険4.0.sln
たこさんの冒険4.0.suo
たこさんの冒険4.0.v11.suo
#### animation.cpp
#include "animation.h"
int hosidasita = 0;
void tako_c::tako_action(){
y_act++;
if(y_act >15) y_act = 15;
y+=y_act;
for(int i=0;i<zimen_kuzu;i++){
if(zimen[i].atari_hantei(x,y) == TRUE) y_act = -25;
}
...実際のコード全体をすべて一つにまとめて記述
こうすることで、AI側がC++のコードを読み取りつつ、HTML/CSS/JavaScriptに置き換えたコードを出力してくれました。
以下のようにo1が思考を行い、最終的に一つのファイルとして出力してくれました。
変換作業の始まり
WindowsのC++ GDI+/DirectShowベースのゲームコードを純粋なHTML/JavaScript/CSSに変換し、オフラインまたはブラウザでの実行を目指している。
HTMLファイル作成
ゲームのロジックを再現し、HTML、CSS、JavaScriptファイルを連携させ、画像や音声を読み込み、アニメーションを管理し、ゲームの状態を再現する準備を進めている。
ゲームリードの進化
メインループを再現し、HTML Audioを使ってサウンドを管理。キャンバスを定義し、更新・再描画関数を作成中。
コードの進行
全体のHTMLを作成し、JavaScriptでアニメーションやロジックを再現中。HTMLAudioElementsで音声を扱い、setIntervalまたはrequestAnimationFrameを使う予定。
ロジックの再現
GameIn、GameClear、GameOver、GameMenuのロジックを再現し、衝突やcontext.drawImageを処理中。BGMの参照も行っている。
コードの完成
HTML構造、キャンバス、画像リンク、スタイルシート、JavaScriptを含むコードを作成し、ゲームオブジェクトのクラス、メインロジック、ゲームループ、キーイベントを設定中。
以下に、Windows用C++(GDI+/DirectShow) を使ったゲームロジックを、HTML5 Canvas / JavaScript / CSS だけで同等の動作を目指すサンプル実装例(Webアプリ)を示します。
基本的な流れやクラス構造、衝突判定ロジックなどはC++のコードを踏襲し、DirectShowを使ったサウンド再生やGDI+描画をそれぞれHTMLAudioElementとCanvas APIに置き換えた形になっています。
なお、以下のサンプルは最小限の動作確認用のコードとなります。実際には画像ファイルや音声ファイルを用意し、パスを正しく設定し、ゲーム進行に合わせて音声の再生開始・停止を行うなどの微調整が必要です。一つのHTMLファイル内に完結させる形で記載していますが、規模に応じてJSファイルを分割したり、CSSを外部ファイルに分離して管理することを推奨します。
なんと、これだけで中学生時代に作ったWindows用のアーケード型ゲームを変換できました！！
3. スマホ対応を行う修正
生成AIに再度「スマホ操作対応にするコードも追加して」とリクエストすると、 タッチ用のボタンをHTMLに追加してスマホ操作もできるようにしれくれました。
変換で変わった点
C++版とHTML版で、以下のように置き換えられました。なお、BGMなどは私の制作でないので、公開にあたって削除いたしました。
Window関連処理や描画とイベント周りがガラッと変わりますが、ゲームロジック部分（衝突判定や座標管理等）はそのままです。
C++時代のグローバル変数や関数を、そのままJavaScriptでもグローバルに置いているので、非常にわかりやすい対応関係になっています。敵が出てくる座標なども中学生時代に作った当時のままなので、Playすると非常に懐かしい気持ちになります。
完成版HTML
最終的には、1つのHTMLファイルにJavaScriptを埋め込んだ形でまとめました。
生成AIが提示したサンプルをベースに、画像パスやゲームステート管理の流れなどを詰めていくと、
「HTML読み込み → onload でCanvas初期化 → setInterval で定期的にゲーム更新 → drawImage で描画」という流れのコードが完成します。
実際に遊べるページ
https://takoyaki-3.github.io/takosan-no-boken/
- PCでも、スマホ/タブレットでもプレイ可能です
- 画面下に左右ボタン・SPボタン（スペース）を置いています
- タコ（キャラクター）を左右に動かしてゴールにぶつかればクリア
- 画面下落下や敵に衝突でゲームオーバー
まとめ
自分が昔書いたコードだけど実行環境を整えるのも依存関係インストールするのもめんどくさくてもう動かせない…というコードが多かったのですが、今回のようにWebブラウザで動くHTMLにしてしまえばGitHubPagesにホストするだけでスマホでもパソコンでも動かすことができるとともに、非常に簡単に当時一緒に楽しんだ友人等に送ることができるので、とってもいいなと思いました。このやり方で過去に作った作品を復刻してポートフォリオ的なのを作れたらうれしいですね。