iPhone特有のタグを挿入

パソコンの場合であれば、これで動作テストを行いバグがなければOKですが、iPhoneの場合は少し調整が必要になります。何の調整が必要なのかというと画面の表示サイズです。

パソコンの場合は基本的に1ピクセル＝1ピクセルで表示されますが、iPhoneの場合はページサイズに合わせて縮小表示されます。このため、想定しているゲーム画面とは見た目(表示サイズ)異なってしまうことがあります。そこで、最初の画面のスケール(拡大縮小率)を<meta>タグを使って指定しておきます。原寸大にするには以下のように指定します。

<meta name="viewport" content="initial-scale=1">

1でなく0.5にすると50%、2にすると200%になります(下図)。iPhoneの場合、さらに設定する項目があります。これはiPhoneならではの操作である「ピンチ」「ピンチイン/アウト」による操作を禁止するものです。ゲーム中に間違ってピンチ操作が行われてしまうと画面が拡大縮小されてしまいゲームに支障をきたすためです。ピンチ操作を禁止する、つまりスケール処理を禁止するには以下の<meta>タグを指定します。

<meta name="viewport" content="user-scalable=no">

0.5を指定した場合、50%サイズで表示される

2を指定した場合、200%サイズで表示される

完成したゲームのコード

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <meta name="keywords" content="iPhone,ゲーム,Game,ぷちぷち" />
        <meta name="viewport" content="initial-scale=1">
        <meta name="viewport" content="user-scalable=no">
        <title>プチプチiPhone 3G</title>
        <script type="text/javascript"><!--
        var startTime = endTime = 0;
        var total = 0;  // プチプチの合計数
        var count = 0;  // つぶしたプチプチの数
        // プチプチを生成 (Create Puchi Puchi)
        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を画面に出力
        }
        function crash(imageObj){
            imageObj.src = "images/off.gif";    // つぶした画像に変える
            if (count == 0){
                startTime = (new Date()).getTime(); // 最初の1つをつぶし始めたら計測を開始する
            }
            count++;    // つぶした数をカウント
            if (count >= total){    // 全部つぶしたら時間を表示してゲームオーバー
                var endTime = (new Date()).getTime();
                var time = (endTime - startTime) / 1000;
                alert("全部つぶしました。タイムは"+time+"秒でした");
                document.getElementById("result").innerHTML = "全部つぶしました。タイムは"+time+"秒でした";
            }
            imageObj.onclick = null;
        }
        // --></script>
    </head>
    <body>
        <h1>プチプチiPhone 3G</h1>
        <div id="gameScreen"></div>
        <div="description" style="font-size:9pt">
            iPhone 3Gのタッチパネルを利用したプチプチです。最初のプチプチをつぶし始めた瞬間から計測を開始し、最後のプチプチをつぶし終わった時間までを競います。残念ながら音は出ません・・・<br>
        再度ゲームを行う場合には、リロード（再読み込み）を行ってください。<br>
        このゲームのソースは完全にフリーなので自由に改造しても構いません。画像も自由に書き換えても構いません。ただ、できれば<a href="http://www.openspc2.org/">http://www.openspc2.org/</a>にリンクしてもらえると嬉しく思います。<br>
        <br>
        <div id="result" style="color:red;font-weight:900"></div>
    </div>
</body>
</html>