2

私はhtml5キャンバスとjavascriptを使用して迷路ゲームに取り組んでいます(コーディングにはjqueryライブラリを使用することを好みます)。-このゲームはモバイル デバイス向けで、タッチ イベントの使用に関してはまったくの初心者です。

キャンバスに、迷路の画像 (白黒の gif 迷宮) を追加しています。

迷路をナビゲートするためにトラウチを使用します。

これが私がやったことです：

  1. タッチ用のイベント リスナーを追加します。

    window.addEventListener("touchmove", handleMove, false);

  2. 移動を処理する関数を追加しました:

    function handleMove(e){ e.preventDefault();

    // Check the touch position on canvas
var checkx = event.targetTouches[0].pageX - canvas.offsetLeft;
var checky = event.targetTouches[0].pageY - canvas.offsetTop;

var collision = checkcollision(checkx,checky);

if (collision == 0){
    x = checkx;
    y = checky;
    draw(imgWidth,imgHeight,ctx);
} else {
    // HERE IS THE PROBLEM - WHAT SHOULD I DO? 
    //BECAUSE IF THE TOUCH EVENT CONTINUES, THE COLLISION  
    // FUNCTION WILL HIT THE WHITE COLOR AGAIN 
    //AND THE BALL WHICH I AM NAVIGATING THROUGH THE MAZE WILL 
    // PASS THE BORDER.
}

    };

  3. 衝突をチェックしています -ここに私の問題があります

黒い枠にぶつかったらどうすればいいですか?

ユーザーが動き続けてタッチイベントが続くと、再び白を打ったときに、迷路をナビゲートしているボールが黒い境界線を飛び越えます。

それで、私はイベントを止めることができました... 何かアイデアはありますか?

衝突関数は次のとおりです。

function checkcollision(checkx, checky){
        var collision = 0;
        var imgd = ctx.getImageData(checkx, checky, 15, 15);
        pix = imgd.data;
        for (var i = 0; n = pix.length, i < n; i += 4){
            if (pix[i] == 0) {
                collision = 1;
            } else if(pix[i] == 255 && pix[i + 1] == 0){
                winner = "yes";
            }
        }
        //console.log("colision fromn the function: "+collision);
        return collision;
    }
4

2 に答える 2

1

ここに1つのアイデアがあります：

ボールの現在の位置を常に知っていて、ユーザーが移動するために常に画面に触れており、タッチをやめて指を新しい場所に移動し、再びタッチしてボールを動かすことはできないと仮定しますその時点まで。

checkcollision関数が を返すと、1衝突の位置がわかります。できることは、その位置を保存し、タッチ イベントがボールと衝突の間にない限り、ボールがその位置を更新しないようにするフラグを設定することです。これにより、壁の方向に関係なく、ユーザーは壁を通り抜けることができなくなります。それはこのように見えるでしょう

var updateBall = true;
var collisionPosX, collisionPosY;

function handleMove(e) {
   // do collision check


   if (collision == 0 && updateBall == true) {
     // update ball
   }
   else if (collision == 0 && /* touch is between collisionPos and current ball position */ ){
      updateBall = true;
   }
   else if (updateBall) {
      collisionPosX = checkx;
      collisionPosY = checky;
      updateBall = false;
   }      
}

ゲームがどのように機能するか、および有効な動きとして何を許可するかに基づいて、「衝突位置と現在のボール位置の間にある」チェックを記述する方法を理解するのに、いくつかの困難があります (指で壁に乗ってからさらに下に移動するなど)。有効だったので、これはボールをその場所にテレポートしますか?)。そのようなチェックを行ってもうまくいかないかもしれませんが、うまくいけば、この設計の構造がどのようなチェックがうまくいくかを知るのに役立つでしょう。

繰り返しますが、これは 1 つのアイデアにすぎません。

于 2013-08-07T16:59:03.527 に答える