Question

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

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

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

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是我在整个脚本中用于REF的主要对象，REF.sceneW是画布的宽度。参考点位于角色的底部/中间。

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

enter image description here

当角色站在黑/白线上并转动（如图所示） - 或者运动不稳定时，就会出现问题。一旦参考点位于黑色像素中（超出界限）......它的游戏就结束了。

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

谢谢！

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

Answer 1

您可以保存绿点的最后一个“有效”（白色区域）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>

边界检测

1 个答案: