背景の移動処理

レースゲームの雰囲気を出すために道路を高速に移動させる必要があります。道路の背景は<body>タグの背景画像として設定します。背景画像の移動処理ですが表示位置を示す変数bgYに値を加算し、その値を背景画像のY座標に設定します。これだけで自動的に背景が延々と下に移動することになります。デフォルトのスタイル設定では背景画像は上下左右にタイル状に敷き詰められますから、このようにするだけで背景画像が切れ目なく表示され移動させることができます。

ただ、設定可能な背景のY座標がオーバーフローする可能性もあるので以下のようにして127との論理積をとってY座標値が0～127の範囲に収まるようにしています。0x7fは127を16進数で表記したものです。

bgY = bgY & 0x7f;

この127というのは背景画像の縦幅が128ピクセルのため、この値になっています。背景画像の縦幅が256なら255、16進数なら0xffにします。 特に論理演算を行わずに割り算の余り(剰余)を使っても速度的には大差ないでしょう。2のn乗なら論理演算、そうでなければ剰余を使うという手もあります。2のn乗にするというのはコンピューターらしい面もありますが、Safari + JavaScriptでの組み合わせによるゲーム作成では大きなメリットはないかなと思います。

コード06

        function moveBG(){
            bgY = bgY + 16; // 16ピクセルごと背景画像を下に移動
            bgY = bgY & 0x7f;   // 127との論理積
            document.body.style.backgroundPositionY = bgY;
            score++;
            document.getElementById("score").innerHTML = score + "点";
        }