碰撞檢測使用kineticJS（getIntersection功能不工作）

我試圖重新比賽http://www.sinuousgame.com/開始學HTML5畫布和kineticJS。碰撞檢測使用kineticJS（getIntersection功能不工作）

最近我遇到了getIntersection功能和coudnt找到關於它。但是很多細節與我有什麼，我也做一個代碼來獲得使用getIntersection（）功能進行碰撞檢測。但它似乎並沒有工作。

正如你所看到的，我小提琴：http://jsfiddle.net/p9fnq/8/

//The working player code 
var LimitedArray = function(upperLimit) { 
    var storage = []; 

    // default limit on length if none/invalid supplied; 
    upperLimit = +upperLimit > 0 ? upperLimit : 100; 

    this.push = function(item) { 
     storage.push(item); 
     if (storage.length > upperLimit) { 
      storage.shift(); 
     } 
     return storage.length; 
    }; 

    this.get = function(flag) { 
     return storage[flag]; 
    }; 

    this.iterateItems = function(iterator) { 
     var flag, l = storage.length; 
     if (typeof iterator !== 'function') { 
      return; 
     } 
     for (flag = 0; flag < l; flag++) { 
      iterator(storage[flag]); 
     } 
    }; 
}; 

var tail = new LimitedArray(50); 

var flag = 0, jincr = 0; 
var stage = new Kinetic.Stage({ 
    container: 'container', 
    width: window.innerWidth, 
    height: window.innerHeight, 
    listening: true 
}); 
var layer = new Kinetic.Layer({ 
    listening: true 
}); 
stage.add(layer); 
var player = new Kinetic.Circle({ 
    x: 20, 
    y: 20, 
    radius: 6, 
    fill: 'cyan', 
    stroke: 'black', 
    draggable: true 
}); 
var line = new Kinetic.Line({ 
    points: [], 
    stroke: 'cyan', 
    strokeWidth: 2, 
    lineCap: 'round', 
    lineJoin: 'round' 
}); 
layer.add(line); 
layer.add(player); 

// move the circle with the mouse 
stage.getContent().addEventListener('mousemove', function() { 
    player.position(stage.getPointerPosition()); 
    var obj = { 
     x: stage.getPointerPosition().x, 
     y: stage.getPointerPosition().y 
    }; 

    tail.push(obj); 
    var arr = []; 
    tail.iterateItems(function(p) { 
     arr.push(p.x, p.y); 
    }); 
    line.points(arr); 
}); 

var x = 0; 
var y = 0; 
var noOfEnemies = 200; 
var enemyArmada = new Array(); 


createEnemy(); 

function createEnemy() { 
    for (var i = 0; i < noOfEnemies; i++) { 
     var enemy = new Kinetic.Circle({ 
      x: Math.random() * window.innerWidth, 
      y: Math.random() * window.innerHeight, 
      radius: 4.5 + 1.5 * Math.random(), 
      fill: 'red', 
      stroke: 'black' 
     }); 
     enemy.speedX = enemy.speedY = (0.5 + Math.random() * 50); 
     enemyArmada.push(enemy); 
     layer.add(enemy); 
    } 
} 


var checkCollide = function() { 
     var position = stage.getPointerPosition(); 
     if(position == null) 
      position = player.position(); 
     if(position == null) 
      position = {x:0,y:0}; 
     var collided = stage.getIntersection(position); 
     console.log(position); 
     if (typeof collided !== 'Kinetic.Shape') { 
      console.log("not shape"); 
     } 
     else { 
      console.log("BOOOM!!!"); 
     } 
    }; 

var anim = new Kinetic.Animation(function(frame) { 
    checkCollide(); 
    for (var i = 0; i < noOfEnemies; i++) { 
     var e = enemyArmada[i]; 
     e.position({ 
      x: e.position().x - e.speedX * (frame.timeDiff/400), 
      y: e.position().y + e.speedY * (frame.timeDiff/400) 
     }); 

     if (e.position().y < 0 || e.position().x < 0) { 
      e.position({ 
       x: (Math.random() * (window.innerWidth + 600)), 
       y: -(Math.random() * window.innerHeight) 
      }); 
     } 
    } 

}, layer); 
anim.start();

我需要檢測碰撞。我已經寫在這裏的作用是checkCollide及其kinetic.Animation函數中調用。

誰能幫我這個？（如果你不知道的解決方案，請做這樣的帖子，我需要迫切解決方案）

來源

2014-02-13 Nevin Madhukar K

問題的根源

getIntersection(point)手段「是任何對象在這一點上」。因爲球員總是在自己的位置

由於您使用的點是玩家的位置，getIntersection將始終返回true！

一個解決方案

把你的球員一個層和一個單獨的層的所有敵人上。

這樣，你可以不打玩家目標的干擾測試敵人層。

代碼和演示：http://jsfiddle.net/m1erickson/JCfW8/

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Prototype</title> 
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.1.min.js"></script> 
<style> 
body{padding:20px;} 
#container{ 
    border:solid 1px #ccc; 
    margin-top: 10px; 
    width:350px; 
    height:350px; 
} 
</style>   
<script> 
$(function(){ 

    var stage = new Kinetic.Stage({ 
     container: 'container', 
     width: 350, 
     height: 350 
    }); 
    var enemyLayer = new Kinetic.Layer(); 
    stage.add(enemyLayer); 
    var playerLayer = new Kinetic.Layer(); 
    stage.add(playerLayer); 

    var player = new Kinetic.Circle({ 
     x:100, 
     y:100, 
     radius: 10, 
     fill: 'green', 
     draggable: true 
    }); 
    player.on("dragmove",function(){ 
     if(enemyLayer.getIntersection(player.position())){ 
      this.fill("red"); 
      playerLayer.draw(); 
     } 
    }); 
    playerLayer.add(player); 
    playerLayer.draw(); 

    var enemy = new Kinetic.Circle({ 
     x:200, 
     y:100, 
     radius: 20, 
     fill: 'blue', 
     draggable: true 
    }); 
    enemyLayer.add(enemy); 
    enemyLayer.draw(); 

}); // end $(function(){}); 

</script>  
</head> 

<body> 
    <h4>Drag the green player<br>Player will turn red if it collides<br>with the blue enemy</h4> 
    <div id="container"></div> 
</body> 
</html>

另一種解決方案

數學測試對每一個敵人的玩家：

警告：未經測試的代碼 - 一些調整，可能需要

function playerEnemyCollide(){ 
    var playerX=player.x(); 
    var playerY=player.y(); 
    var playerRadius=player.radius(); 

    for(var i=0;i<enemyArmada.length;i++){ 
     var e=enemyArmada[i]; 
     if(circlesColliding(playerX,playerY,playerRadius,e.x,e.y,e.radius)){ 
      return(true); 
     } 
    } 
    return(false); 
} 

function circlesColliding(cx1,cy1,radius1,cx2,cy2,radius2){ 
    var dx=cx2-cx1; 
    var dy=cy2-cy1; 
    return(dx*dx+dy*dy<(radius1*2+radius2*2); 
}

來源

2014-02-13 18:56:45 markE

我會運用這種方法，並回復你。有點忙於項目。 –

嘿，它工作。 :) Thanx 這是小提琴，如果你想看看它。 http://jsfiddle.net/p9fnq/11/ 順便說一句是layer.draw（）真的有必要嗎？ –

http://jsfiddle.net/p9fnq/18/ –

碰撞檢測使用kineticJS（getIntersection功能不工作）

回答

相關問題