邊界檢測

我正在研究一個簡單的腳本，它允許用戶創建遊戲。我試圖用簡單的方法，儘可能爲用戶，所以我必須建立一個圖像到路系統，從@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

回答

相關問題