javascript - 加速したボールからの壁衝突の検証 - JavaScript HTML5

Question

私は現在、Javascript を使用してラビリンス ボール ゲームを作成しています。まず、キャンバスに迷路のイメージを描きます。迷路は次のようになります。

次に、加速されたボールがあります (関数を使用して x,y パラメータを使用し、 を使用しnavigator.accelerometer.watchAccelerationて 33.3 ミリ秒ごとに描画しますRequestAnimationFrame)。最も難しい部分は、壁の衝突を検証することです。

コードは次のとおりです。

    function draw(){
            switch(state)
            {
                case 'start' :
                    posX=150; //start pos of the ball
                    posY=30;
                    drawStart();
                break;
                case 'initgame' :
                    initGame();
                break;
                case 'game':
                    drawGame(); //draw the image canvas 
                    update(acceleration);
                break;
                case 'end':
                    drawEnd();
                break;  
            }
        requestAnimationFrame(draw);
    };

    function update(acceleration){
            animate(posX+(acceleration.x)*10, posY(acceleration.y)*10);
    };

    function checkCollision(x,y) {
        var canvas=document.getElementById('canvas');
        var ctx = canvas.getContext('2d');

            //get 5x5 pixels data of next position of the ball  
        var imgd = ctx.getImageData(x, y, 5,5); 
        var pix = imgd.data; //pix is 5x5x4=100 array length 
        for (var i = 0; n = pix.length, i < n; i += 4) {
            if (pix[i] == 0) //first of every four arrays is "black(0,0,0,255)"
                            {
                        collision = 1;
                        break;
                    }
                }
            }

    function animate(newX, newY){
            var canvas=document.getElementById('canvas');
            var context=canvas.getContext('2d');

            drawGame(); //draw the image canvas

            posX=newX;  
            posY=newY;

            checkCollision(posX,posY);

            if(collision==1)
            {
                //hit wall, need proper code
            }
            else{
                            //move freely
                context.moveTo(posX,posY);
                context.beginPath();
                context.arc(posX, posY, 5, 0,2*Math.PI),false;
                context.closePath();
                context.fillStyle='green';
                context.fill()
                context.lineWidth=5;
                context.strokeStyle='#003300';
                context.stroke();
    }

ボールが壁に当たったときに適切なコードが必要です。論理的には、たとえば、ボールが垂直の壁に当たり、プレーヤーが x 位置 (上下) を加速した場合、ボールは引き続き (上下に) 移動しますが、y 位置は壁にくっつきます。

私は何をすべきか？感謝のヘルプと注意をありがとう!