iPhoneゲーム自作工房 - iPhone用ゲームを手軽に作る

作り方はこれまでと全く同じ

それでは実際のゲーム制作に入りましょう。最初に用意するのが、Webサイトを制作するためのアプリケーションです。これまでWebサイトを作成してきた人にとっては新たな投資は必要ありません。これなら低コストでiPhoneのゲームを制作することができます。

まず、画像を用意します。用意する画像は「潰す前の画像」と「潰した後の画像」の2枚です。他は用意する必要はありません。画像の形式ですが、WebブラウザはSafariですのでGIFやJPEG、PNGなど一般的な形式であれば問題なく表示できます。PNG形式を利用して、綺麗に合成するような作り方をするのも良いでしょう。

最初にページが読み込まれたら「プチプチ」の画像を描画します。ここでは9×5サイズのプチプチ画像を描画します。これはfor()を使って出力するHTMLタグを生成します。この時にクリック時に処理するイベントも同時に書き出します。後付けでイベントを設定することもできますが、この方が手軽です。

クリックした時にはcrash()関数を呼び出すようにします(onclick="crash(this)"の部分)。ここでthisを指定していますが、このようにするとクリックされた画像自身の情報がcrash()関数に渡されます。

コード01

        window.onload = function(){
            var htmlStr = "";   // プチプチのHTML文字列
            for (var i=0; i<5; i++){
                for (var j=0; j<9; j++){
                    htmlStr += '<img src="images/on.gif" width="32" height="32" alt="on" onclick="crash(this)">';
                    total++;
                }
                htmlStr += "<br>";
            }
            document.getElementById("gameScreen").innerHTML = htmlStr;  // 生成したHTMLを画面に出力
        }