2

我正在使用 html5 画布和 javascript 开发迷宫游戏（我更喜欢使用 jquery 库进行编码）。-该游戏适用于移动设备，我对使用触摸事件完全陌生

在画布上，我添加了迷宫图像 - 一个黑白 gif 迷宫。

我将使用 trouch 来在迷宫中导航。

这是我所做的：

  1. 为触摸添加事件监听器：

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

  2. 添加了处理移动的功能：

    函数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

这是一个想法：

我假设您始终知道球的当前位置，并且用户不断触摸屏幕来移动，并且无法停止触摸，将手指移动到新位置，然后再次开始触摸以移动球到那时。

当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;
   }      
}

根据您的游戏如何运作以及您允许的有效动作（例如用手指骑墙然后进一步向下进入白色），了解如何编写“在碰撞位置和当前球位置之间”检查会有一些困难路径，这是否会将球传送到该位置，因为它是有效的？）。哎呀，可能是做那种检查不起作用，但希望这种设计的结构能帮助你知道什么样的检查会起作用。

再说一次，这只是一个想法，所以把它当作它的价值。

于 2013-08-07T16:59:03.527 回答
0

你的另一个问题被删除了，所以我会在这里回答：

我猜你是要求做函数链或者它是如何工作的。

看一看：

//chaining basics
var obj = {
   a: function(){
        //do something...
        return this;
     },
   b: function() {//do somethingelse 
        return this;
     }
};

然后你可以调用这样的东西...... obj.a().b();

所以在你的例子中，这需要做：

function  makeObj(id){
   var ele = document.getElementById(id);
   this.red= function(){
      ele.style.backgroundColor='red';
        return this;
    };
    this.blue= function(){
      ele.style.backgroundColor='red';
        return this;
    };
  //and so on...
}

var p = new makeObj('paragraph1');

或者如果你像这样编写 makeObj 函数，你可以这样

var p = makeObj('paragraph1'); //remember $ is just a character. Which you can use too.

function  makeObj(id){
   var ele = document.getElementById(id);
return {
   red: function(){
      ele.style.backgroundColor='red';
        return this;
    },
   blue: function(){
      ele.style.backgroundColor='blue';
        return this;
    }
  //and so on...
      };
}

现在你可以这样做：

var p = makeObj('idofelem');
p.red();
p.red().blue();
p.blue():
于 2013-08-26T17:39:00.623 回答