0

大学の課題でゲームを作っています。アイデアは、それらをブロックする線を描くこと (クリック、ドラッグ & リリースして線を描く) によって、入ってくる小惑星 (線) から中心円を守ることです。小惑星が線に衝突すると、小惑星と線の両方が破壊されます。

私が現在抱えている問題は、衝突が検出されないことです。

線と小惑星の両方のオブジェクトの配列があります。線は単に開始と終了の x と y で構成され、小惑星はランダムな速度とランダムな角度 (入射角) で構成されます。コンテキストが回転し、小惑星が描画され、次の行のためにリセットされます。

衝突を検出するには、getImageData を使用して小惑星の前でチェックしますが、その反復で線が進むピクセル数 (基本的には速度) と色が赤の場合は小惑星を破壊しますまだラインを破壊することは、私がそれに来たときにそのハードルに取り組むでしょう（提案は大歓迎です）.

function asteroids_draw() {
            for (var i = 0; i < asteroids.length; i++) {
                //  Drawing setup
                context.save();
                context.translate(width / 2, height / 2);
                context.rotate(asteroids[i].angle);             

                //  Detecting close asteroids
                if ((asteroids[i].distance - asteroids[i].speed) < planet.size) {
                    asteroids.splice(i, 1);
                    game_life_lost();
                    context.restore();      
                    return;

                } else if ((asteroids[i].distance - asteroids[i].speed) < 150){
                    asteroids[i].colour = '#FF0000';
                }

                //  Scanning ahead for lines                    
                for (var j = 0; j < asteroids[i].speed; j++) {
                    if (context.getImageData(asteroids[i].distance - j, 0, 1, 1).data[0] == 255) {                          
                        asteroids.splice(i, 1);
                        context.restore();      
                        return;
                    }
                }                   

                //  Drawing asteroid
                context.beginPath();
                context.moveTo(asteroids[i].distance -= asteroids[i].speed, 0);
                context.lineTo(trig, 0);
                context.strokeStyle = asteroids[i].colour; 
                context.stroke();               
                context.closePath();

                context.restore();      
            }
        }

問題は、小惑星が線と衝突することはなく、その理由や別の簡単な方法が一生わからないことです。事前に感謝します。

4

2 に答える 2

1

あなたの問題は、コンテキストを回転すると、以前に描画されたアイテム(線)が回転せず、回転後に描画されたオブジェクトのみが回転することだと思います。詳細については、このページを参照してください。

キャンバスを移動および回転する前に小惑星/線の交差テストを実行し、コサインとサインを使用して、画像データを取得するピクセルの x 座標と y 座標を見つけることができます。

var pixelLocation = 
    [Math.cos(asteroids[i].angle) * j, Math.sin(asteroids[i].angle) * j];
if (context.getImageData(pixelLocation[0], pixelLocation[1], 1, 1).data[0] == 255) {

cos と sin に渡す前に、角度がラジアンであることを確認してください。

于 2013-04-02T13:12:40.720 に答える