HTML5/kineticJS 「getIntersection」 功能的實現（帆布遊戲）

Question

我試圖重新比賽http://www.sinuousgame.com/開始學HTML5畫布和kineticJS。

正如你所看到的，我小提琴：http://jsfiddle.net/p9fnq/5/ （你可以嘗試評論我checkCollide函數的定義和其通話，看到我的輸出）

（新小提琴在後的底部）

//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 collided = stage.getIntersections(stage.getPointerPosition()); 
    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(); 

這是我終於結束了錯誤：

Uncaught TypeError: Cannot read property 'x' of undefined

我需要糾正此錯誤加上檢測到的衝突（顯示控制檯消息，因爲我已經寫入checkCollide函數）。

任何人都可以幫助我嗎？

編輯：已糾正錯誤，但碰撞檢測不起作用。 新提琴：http://jsfiddle.net/p9fnq/8/

Answer 1

您的檢查碰撞函數有一個簡單的缺陷，如果指針（光標/鼠標）不在屏幕上，它將失敗，因爲指針位置爲空。由於指針位置與玩家位置相關，您可能需要檢查玩家位置，而不是指針位置。

http://jsfiddle.net/p9fnq/8/

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

查看更新後的小提琴。