HTML5/kineticJS реализация "getIntersection" функция (Canvas Game)

Question

Я пытаюсь воссоздать игру http://www.sinuousgame.com/ и начал изучать html5 холст и kineticJS.

Как вы можете видеть, мой Fiddle: 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).

Может ли кто-нибудь помочь мне с этим?

EDIT: Исправлена ​​ошибка, но обнаружение столкновений не работает. Новый скрипт: 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!!!"); 
    } 
}; 

Смотрите обновленный скрипку.