10 代の自分が作ったゲームをハードディスクから見つけたので、その技術解説をする。
以下は当時の雰囲気を再現した図である。(Windows Me 環境はヤフオク!で落札して用意した)
ゲームは以下にアップロードしており、実際に遊ぶことができる。当時のプログラムがそのまま 2025 年現在でも Google Chrome 143 で動くのだから、Web ブラウザの互換性というものは凄まじい。
開発環境について
当時 Windows でゲームを作るなら Visual C++、Web でゲームを作るなら Flash や Java アプレットが最良だったかもしれない。
しかしまだ中学生ぐらいでお金のない自分はそのような環境を整えることができなかったので、実家にあったパソコンと備え付けのソフトウェアでプログラミングを始めた。
パソコン
当時のパソコンのスペックの詳細はもうわからない。某メーカー製で、ストレージは数十 GB、メインメモリは 64MB、OS は Windows Me だった。
このパソコンは電源を入れてデスクトップが表示されたと思ったらフリーズしていたとか、起動途中でフリーズしてしまいデスクトップの表示に至らないとか、そういうことが日常茶飯事だった。
しかし当時の自分にはこれしかなかったので、パソコンとはこういうものだと思っていた。
ちなみに残念なことに、Windows Me の評判はあまり良くない。
Internet Explorer 6
パソコンに備え付けられていた Web ブラウザは Internet Explorer 6 だった。
今ならタブがないだの拡張機能が使えないだの表示がおかしいだの言えるかもしれない。
しかし当時の自分にはこれしかなかったので、不満を抱くこともなく Web ブラウザとはこういうものだと思っていた。
ちなみに残念なことに、Internet Explorer 6 の評判はあまり良くない。
メモ帳
Windows Me にデフォルトのプログラミングエディタは存在せず(今の Windows もないけど)、テキストファイルを読み書きできるのはメモ帳だけだった。
秀丸エディタは世に存在していただろうが、収入のない当時の自分に買うことはできなかっただろう。サクラエディタもおそらく既にあっただろうが、自分は存在を知らなかった。
この記事を書くにあたって改めてメモ帳を触って気がついたのだが、Ctrl+Sを押しても上書き保存されず、警告音が鳴るだけである。なんと上書き保存の操作にショートカットキーが割り振られていないのだ(図の左上)。信じられない。
なおCtrl+Zはかろうじて存在する。(図の右上。しかし直前の入力状態に戻すだけで、無限 Undo ではない)
メインループの作成について
まず一定周期でゲームの状態を更新するメインループを作る必要があった。
今ならwindow.requestAnimationFrame()を使って関数を呼び出すだろうが、当時そんなものは存在しなかった。あるのはwindow.setTimeout()かwindow.setInterval()だった。
そのため当時の自分はwindow.setInterval()を使って処理を定期的に実行させることにした。
function init() {
if (!sflag) {
sflag = true;
// 略
loop = setInterval("main()", 50);
}
}
待ち時間を減らすほど高速に動かせるはずだが、当時の PC スペックや Web ブラウザには限界があり、100ms 未満の領域はもたついて期待通りにはならなかった。
画面の描画について
このころの主流は HTML 4.01 で、canvas要素は存在しなかった。(canvas要素が登場したのは HTML5 である)したがって JavaScript で自由に絵を描くことはできなかった。
そのため当時の自分はimg要素を並べて、style属性のleftとtopで表示位置を指定することにした。
<body style="background-color:#BBDDFF;" onkeydown="keyCheck(event.keyCode)">
<img src="sun.png" id="time" style="position:absolute;left:144px;top:16px;" />
<img src="cloud.png" id="cloud" style="position:absolute;left:0px;top:0px;" />
<img
src="ball_0.png"
id="ball"
style="position:absolute;left:120px;top:208px;"
/>
<img
src="racket.png"
id="rack"
style="position:absolute;left:96px;top:240px;"
/>
<script type="text/JavaScript">
<!--
for(y=0;y<yline;y++){
bflag[y]=new Array();
for(x=0;x<xline;x++){
bflag[y][x]=false;
document.write("<img src='block.png' id='block"+x+":"+y+"' style='position:absolute;left:"+(x*32)+"px;top:"+(y*16)+"px;'>");
}
}
//-->
</script>
<div id="score" style="position:absolute;left:16px;top:208px;">0</div>
</body>
function main() {
ballx += movex;
bally += movey;
// 略
document.getElementById("ball").style.left = ballx;
document.getElementById("ball").style.top = bally;
}
動作確認について
console.log()は存在しなかった。似た機能にwindow.alert()があるが、ダイアログ表示中はプログラムの動きが止まるし、console.log()ほど柔軟な表示もしてくれない。
開発者ツールは存在しない。結果は自分の目で確認するのだ。
Internet Explorer 6 はエラーが発生しても最低限の情報しか教えてくれない。
頼みの綱は行数だけだが、当時のメモ帳には行番号の表示機能がない。
上の画像からエラーの原因を見つけられるだろうか。(ヒントはカーソルのある行だ)
おわりに
このようにして自分はゲームを作って、以来ソフトウェア開発に興味を持ち始め、紆余曲折を経て、微力ながらソフトウェア開発の世界に携っている。
現代では Web のフロントエンドを効率良く開発することができる。
Web のフロントエンドは HTML、CSS、JavaScript で動いている。これは今も昔もほぼ変わっていない。
自分のような人間でも効率よく開発できるのは HTML、CSS、JavaScript のバージョンアップだけでなく、周囲のツールやコミュニティの登場のおかげだと思う。
- Web ブラウザの開発者向け機能が強化され、簡単にステップ実行やレイアウト確認ができるようになった
- ライブラリを自由に公開・インストールできるようなエコシステムが登場した
- バンドラーが登場し、ファイルを分割して開発できるようになった
- AltJS が登場し、型安全性が強化されるようになった
- ホットリロードが発明され、F5 を押さなくて良くなった
- プログラミングエディタが発展し、インデントのためにスペースキーを連打しなくて良くなった
- 技術共有サイトが登場して、簡単に情報を知ることができるようになった
ざっと思いつくだけで、こんなにある。
自分はこれらの恩恵にあやかることで、ブロック崩しより少しだけ規模の大きい開発を行うことができるようになっている。
現代のこれらのツールやコミュニティに、感謝の思いを伝えたい。
自分にソフトウェア開発のきっかけを与えてくれた Windows Me と、Internet Explorer 6 と、メモ帳にも、感謝の思いを伝えたい。