1

我目前正在使用 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 位置会粘在墙上。

我应该怎么办？感谢您的帮助和关注！

4

0 回答 0