1

私は論理的な問題を抱えています。多分あなたは賢い人が私を解決するのを手伝ってくれるでしょう。私はCanvasでJavascriptを学んでおり、純粋なJavascriptを使用して一種の「ブレイクアウト」ゲームを構築しようとしています。

http://www.seas.upenn.edu/~cis120e/hw/SwingGame/images/breakout.png

パドル、ボール、そしてブロックの配列を作成しました-さまざまなプロパティ（xPos、yPos、width ...など）を持つオブジェクト、今私はボールと上部のブロックとの衝突を検出しようとしています画面。

これは私が行う方法です：

//This is my block Object definition
function block(x,y,width,height){
this.x = x;
this.y = y;
this.width = width;
this.height = height;
ctxBlock.fillStyle = 'green';
ctxBlock.fillRect(this.x, this.y, this.width, this.height);

}

//This is for draw blocks on the canvas
mattone.prototype.draw = function(){
ctxBlock.fillStyle = 'green';
ctxBlock.fillRect(this.x, this.y, this.width, this.height);

}

//This is the check for collision method
var blocks = [];
function checkCollision(){
for (var i = 0; i < blocks.length; i++){

    if(ballY - ballRadius <= blocks[i].y + blockWidth){
        ctxBlocks.clearRect(tmpx, tmpy, blockWidth, blockHeight);
        speedY = (-speedY);
        break;
    }
}

checkColl = requestAnimationFrame(checkCollision);

}

基本的に、ボールの「Y」が「<」の場合、ブロックの配列内のブロックの1つの「Y」（トラフをループしてすべてのブロックをチェックする）を削除する必要があることをキャンバスに伝えようとしています。そのブロックと跳ね返ります。

しかし、それが行うことは、彼が触れたブロックではなく、常にそのブロックの行の左側の最初のブロックをキャンセルすることです。

これは私のコードリンクへのリンクである必要があります *コードでブロックの代わりにmattoniという単語を使用したことに注意してください

みなさん、良い一日を。

4

2 に答える 2

1

非常に素晴らしい！完全なjsfiddleも提供していただきありがとうございます。私はそれを更新しました：http：
//jsfiddle.net/43mwc/2/。説明のために、衝突チェックでは、実行中の下部だけでなく、各ブロックのすべての境界をチェックする必要があります。だから私はこれを変更しました：

if(ballY - ballRadius <= blocks[i].y + blockWidth){

これに（あなたのjsfiddleの言葉遣いで）：

if(ballY-ballRadius <= mattoni[i].y + 10- padding && (ballX - ballRadius) >= mattoni[i].x && (ballX + ballRadius) <= (mattoni[i].x + mattWidth)){

説明すると、コードはすべてのブリックをループして、ボールが各ブリックの真下にあるかどうかを確認します。一番下の行のブリック全体がその基準を満たしているためbreak;、一番下の行にあるループの最初のブリックでループが壊れました（のように）。これで、x軸に沿ったボールの位置が、各ブリックの左端と右端の間にあるかどうかがチェックされます。ここで取り上げていないシナリオがまだ1つあります。それは、レンガが上から打たれることです。それはあなたにお任せします。

于 2012-08-17T23:26:02.757 に答える
1

衝突チェックではy値のみをチェックし、x値はチェックしませんでした。最後の行でブリックをヒットするたびに、y値と一致したため、左端のブリックがクリアされました。その後、ループから抜け出します。

次に、どのブロックがすでにクリアされているかを追跡していません。その結果、各ループがクリアされたのは最後の行の左側のブリックであり、他のブリックは、その後のループから抜けたため、クリアされるように変更されませんでした。

http://jsfiddle.net/43mwc/3/

于 2012-08-17T23:27:07.277 に答える