Fatal编程技术网

Javascript 边界检测

javascript canvas

Javascript 边界检测,javascript,canvas,collision,detection,boundary,Javascript,Canvas,Collision,Detection,Boundary,我正在开发一个简单的脚本，允许用户创建游戏。我正在尝试为用户使用尽可能简单的方法，因此我已经设置了一个图像到路径系统，@markE提供了一些很好的帮助： 用户为场景选择黑白图像。该图像被绘制到画布上，像素信息存储到一个数组中，然后隐藏。然后我可以参考数组，看看我的角色是站在白色像素还是黑色像素上。这允许用户快速绘制场景的路径 不过，我的边界检测遇到了一些麻烦。当角色行走时，我使用此函数在每一步检查边界（根据白色或黑色像素返回true或false）： REF是整个脚本中用于REF的主要对象，RE

我正在开发一个简单的脚本，允许用户创建游戏。我正在尝试为用户使用尽可能简单的方法，因此我已经设置了一个图像到路径系统，@markE提供了一些很好的帮助：

用户为场景选择黑白图像。该图像被绘制到画布上，像素信息存储到一个数组中，然后隐藏。然后我可以参考数组，看看我的角色是站在白色像素还是黑色像素上。这允许用户快速绘制场景的路径

不过，我的边界检测遇到了一些麻烦。当角色行走时，我使用此函数在每一步检查边界（根据白色或黑色像素返回true或false）：

REF是整个脚本中用于REF的主要对象，REF.sceneW是画布的宽度。参考点位于角色的底部/中间

我甚至创建了一个小绿点来匹配参考点，这样我就可以在角色在场景中走动时观看它。当参考点碰到黑白线时，一切看起来都很好，边界检测被识别出来

当角色站在黑白线上并转弯（如上图所示）或动作不稳定时，就会出现问题。只要参考点处于黑色像素（超出边界）。。。比赛结束了

也许有人可以指出我的边界检查功能的问题，或者推荐一种游戏编码技术来保持角色的边界？我错过什么了吗

谢谢

更新： 我相信我已经追踪到了角色动画中的步骤回调函数。我正在使用jQuery在移动期间对角色执行一些不同的操作，并在步骤回调中调用边界检测。。。然而，这是在动画的每一步之后调用的，动画将角色推入黑色像素，然后调用边界检测。我相信这就是问题所在。有什么解决办法吗？

您可以将最后一个“有效”（白色区域）x/y保存为绿点。如果点后来移动到无效区域，则可以将点定位回最后一个有效位置

示例代码和演示：


正文{背景色：象牙；}
画布{边框：1px纯红；}
$（函数（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var$canvas=$（“#canvas”）；
var canvasOffset=$canvas.offset（）；
var offsetX=canvasOffset.left；
var offsetY=canvasOffset.top；
var PI2=数学PI*2；
变量greenX，greenY，lastValidGreenX，lastValidGreenY；
var数据；
var img=新图像（）；
img.onload=启动；
img.crossOrigin=“匿名”；
img.src=”https://dl.dropboxusercontent.com/u/139992952/multple/temp00.png";
函数start（）{
canvas.width=img.width；
canvas.height=img.height；
ctx.fillStyle=“绿色”；
ctx.drawImage（img，0,0）；
data=ctx.getImageData（0,0，canvas.width，canvas.height）；
$（“#canvas”）.mousemove（函数（e）{handleMouseMove（e）；}）；
}
功能手柄移动（e）{
e、 预防默认值（）；
e、 停止传播（）；
greenX=parseInt（e.clientX-offsetX）；
greenY=parseInt（即clientY-offsetY）；
var isWhite=（数据[（绿色*画布宽度+绿色）*4]>200）；
如果（是白色的）{
lastValidGreenX=绿色x；
最后有效绿色=绿色；
}否则{
greenX=最后有效的greenX；
绿色=最后有效绿色；
}
clearRect（0,0，canvas.width，canvas.height）；
ctx.drawImage（img，0,0）；
ctx.beginPath（）；
ctx.arc（绿x，绿y，3,0，PI2）；
ctx.closePath（）；
ctx.fill（）
}
}); // end$（函数（）{}）；
请澄清：）您想让用户无法将绿点移到白色区域之外吗？用户是在用键盘还是鼠标移动绿点？正确：）用户在屏幕上的任何地方点击开始动画。你真是太棒了，马克！我必须对它进行一些调整，以适应点击事件，但逻辑正是我所缺少的。万分感谢D 
inBounds:function(REF){
     var obj=$(this), 
     CH=obj.outerHeight(true), 
     CW=obj.outerWidth(true),
      L=obj.offset().left+(CW/2), 
      T=obj.offset().top+CH;

 return REF.pathData[(T * REF.sceneW + L)*4]>200;
}

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>
<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var $canvas=$("#canvas");
    var canvasOffset=$canvas.offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;

    var PI2=Math.PI*2;
    var greenX,greenY,lastValidGreenX,lastValidGreenY;

    var data;

    var img=new Image();
    img.onload=start;
    img.crossOrigin="anonymous";
    img.src="https://dl.dropboxusercontent.com/u/139992952/multple/temp00.png";

    function start(){
        canvas.width=img.width;
        canvas.height=img.height;
        ctx.fillStyle="green";
        ctx.drawImage(img,0,0);
        data=ctx.getImageData(0,0,canvas.width,canvas.height).data;
        $("#canvas").mousemove(function(e){handleMouseMove(e);});
    }

    function handleMouseMove(e){
      e.preventDefault();
      e.stopPropagation();
      greenX=parseInt(e.clientX-offsetX);
      greenY=parseInt(e.clientY-offsetY);

      var isWhite=(data[(greenY*canvas.width+greenX)*4]>200);
      if(isWhite){
          lastValidGreenX=greenX;
          lastValidGreenY=greenY;
      }else{
          greenX=lastValidGreenX;
          greenY=lastValidGreenY;
      }
      ctx.clearRect(0,0,canvas.width,canvas.height);
      ctx.drawImage(img,0,0);
      ctx.beginPath();
      ctx.arc(greenX,greenY,3,0,PI2);
      ctx.closePath();
      ctx.fill()


    }

}); // end $(function(){});
</script>
</head>
<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>