边界检测

我正在研究一个简单的脚本，它允许用户创建游戏。我试图用简单的方法，尽可能为用户，所以我必须建立一个图像到路系统，从@markE一些很大的帮助：边界检测

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

虽然我的边界检测遇到了一些麻烦。

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

裁判被用于REF在我的主要目标：虽然性格是步行，我的每一步使用此功能（基于一个白色或黑色像素返回true或false）检查边界脚本和REF.sceneW是画布的宽度。参考点位于角色的底部/中间。

我甚至创建了一个绿点以匹配参考点，所以我可以在角色在场景中漫步时观看它。一切看起来不错，当参考点击中黑/白线时，边界检测被识别。

enter image description here

问题当字符是站在黑/白线和匝（在上图中示出）发生 - 或与不稳定的运动。只要参考点位于黑色像素中（超出范围）......游戏就结束了。

也许有人可以指出我的边界检查功能的问题或建议使用游戏编码技术来保持角色的边界？我错过了什么？

谢谢！

更新： 我相信我已经将问题跟踪到角色动画中的步骤回调函数。我正在使用jQuery在移动过程中对角色执行一些不同的操作，并且在步骤回调中调用了边界检测...但是这被称为AFTER的每一步都是将字符推入黑色像素后 - 然后调用边界检测。我相信这是问题。有没有解决方法？

来源

2014-05-01 Aaron

说明，请:)你想让它使用户不能移动的绿点的白色区域之外？用户是用键盘还是鼠标移动绿点？ – markE

正确:)用户正在点击开始动画的屏幕上的任何位置。 – Aaron

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

示例代码和演示：http://jsfiddle.net/m1erickson/pq7QZ/

<!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>

来源

2014-05-01 19:35:01 markE

你真棒！我必须稍微处理一下，以便对点击事件进行调整，但逻辑正是我所缺少的。太感谢了！：d – Aaron

回答

相关问题