車の移動処理

今回のサンプル1
今回のサンプル2
サンプルの全ファイル

車の移動処理。車特有の前進やバックをしている時のみハンドルを切る効果が有る(進行方向の変更を受け付ける)様に実装。

サンプル1
プログラムの主な部分はこちら。

        car.deg = -90;
        car.addX = 0;
        car.addY = 0;
        car.speed = 3.0;
        car.setDeg = function(deg) {
            this.deg = deg;
            this.rotation = deg + 90;
            this.addX = Math.cos(deg*Math.PI/180);
            this.addY = Math.sin(deg*Math.PI/180);
        };
        car.setDeg(car.deg);
        car.addEventListener('enterframe', function() {
            var isMove = false;
            if (game.input.up || game.input.down) isMove = true;
            if (isMove && game.input.left) {
               this.deg -= 4;
               if (this.deg < 0) this.deg += 360;
               this.setDeg(this.deg);
            }
            if (isMove && game.input.right) {
               this.deg += 4;
               if (this.deg > 360) this.deg -= 360;
               this.setDeg(this.deg);
            }
            if (game.input.up) {
               this.x += this.addX*this.speed;
               this.y += this.addY*this.speed;
            }
            if (game.input.down) {
               this.x -= this.addX*this.speed;
               this.y -= this.addY*this.speed;
            }
            if (this.x < -this.width) this.x = game.width;
            if (this.x > game.width) this.x = -this.width;
            if (this.y < -this.height) this.y = game.height;
            if (this.y > game.height) this.y = -this.height;

            //console.log(this.x + ' ' + this.y);
        });

主なプロパティの説明。

プロパティ	説明
deg	車の向き
addX/addY	1フレーム毎のX方向、Y方向への移動量
speed	1フレーム毎の移動量

setDeg関数では回転量を元にX方向、Y方向への移動量の計算をしています。
this.rotation に代入するときにに +90 しているのは本来であれば 0° の時には車の正面は右を向くはずですが画像は -90° 回転した上を向いた画像となっています。これを補正する為に +90 しています。

        car.setDeg = function(deg) {
            this.deg = deg;
            this.rotation = deg + 90;
            this.addX = Math.cos(deg*Math.PI/180);
            this.addY = Math.sin(deg*Math.PI/180);
        };

今回は例えば、車が画面上部から外に出た場合は画面下部から登場するなど上下左右が繋がっている状態にしてあります。

しかし、先ほどのサンプル1では自分が操作している車の位置を一瞬、見失う状態が発生してしまってあまり良いゲームデザインでは有りませんでした。

その辺りを改善したものがこちらのサンプル2です。サンプル1と比べてみてどこが違うか調べてみて下さい。

サンプル2ではその違う部分を実装する為に通常に使用する car 以外に、画面の境界に車が移動した時に使用する subCar というSpriteを追加しています。

後、サンプル2では車の一部がゲーム画面外に出た時に描画させない様に配置している画像をの幅や高さを車と同じサイズの32ピクセルから46ピクセルに変更しています。

一見、車の画像が32x32ピクセルなので32ピクセルで足る様に思えますが今回の場合は車が斜めを向いている場合も考慮しないといけません。

その為、サイズは最大のサイズとなる車の対角線の長さで考えないといけません。

車の画像の縦横の比は1:1なので対角線は√2となります。32 * √2 が求めるサイズです。√2は「一夜一夜に〜」なので1.4142…。小数点以下が長いので 1.42 位で計算する事にします。

32*1.42 = 45.43999

端数が出たので切り上げて46ピクセル。という事でサンプル2では幅や高さは46ピクセルにしてあります。

まぁ、そもそもこの画面外の部分を描画しない処理はCSSの設定で上手く隠せる様な気がするのでどこかのタイミングでそちらの実装に切り替えたい所では有るのですが… だれか作ってくれないかなぁw