Обнаружение попадания между 2 движущимися объектами в CreateJS

1

Мы используем createJS, и сейчас я борюсь с тестом на удар.

Я получаю эту ошибку:

"ss.js:203 Uncaught TypeError: Cannot read property 'x' of undefined
at hitTest (ss.js:203)
at doCollisionChecking (ss.js:215)
at heartBeat (ss.js:238)
at Function.b._dispatchEvent (createjs-2015.11.26.min.js:12)
at Function.b.dispatchEvent (createjs-2015.11.26.min.js:12)
at Function.a._tick (createjs-2015.11.26.min.js:12)
at a._handleTimeout (createjs-2015.11.26.min.js:12)"

Я думаю, что проблема связана с позицией x 2 объектов, но одна из них является управляемым игроком символом, а другой объект имеет случайное значение x.

Весь тестовый пример хита, который я нашел, всегда состоит из статического объекта и движущегося объекта, но на этот раз они оба движутся, и я не знаю, что делать.

var stage, hero, queue, circle, coin;
var coins = [];
var Score, tekst1, tekst2;
var speed = 3;
var keys = {
u: false,
d: false,
l: false,
r: false
};
var settings = {
heroSpeed: 15
};

function preload() {
"use strict";
stage = new createjs.Stage("ss");
queue = new createjs.LoadQueue(true);
queue.installPlugin(createjs.Sound);
queue.loadManifest([
    {
        id: 'Vacuum',
        src: "img/Vacuum.png"
    },
    {
        id: 'Dust',
        src: "img/dust.png"
    },
    {
        id: 'Pickup',
        src: "sounds/pickup.mp3"
    },
    {
        id: 'Suger',
        src: "sounds/suger.wav"
    },

  ]);
  queue.addEventListener('progress', function () {
    console.log("hi mom, preloading");
   });
   queue.addEventListener('complete', setup);
  }

 function setup() {
"use strict";

window.addEventListener('keyup', fingerUp);
window.addEventListener('keydown', fingerDown);

circle = new createjs.Bitmap("img/Vacuum.png");
circle.width = 40;
circle.height = 90;
stage.addChild(circle);
circle.y = 570;
circle.x = 460;


Score = new createjs.Text("0", "25px Impact", "white");
Score.x = 900;
Score.y = 680;
Score.textBaseline = "alphabetic";
stage.addChild(Score);

tekst1 = new createjs.Text("Score", "25px Impact", "white");
tekst1.x = 740;
tekst1.y = 680;
tekst1.textBaseline = "alphabetic";
stage.addChild(tekst1);

tekst2 = new createjs.Text("Bombs fallin", "40px Impact", "white");
tekst2.x = 10;
tekst2.y = 50;
tekst2.textBaseline = "alphabetic";
stage.addChild(tekst2);


createjs.Ticker.setFPS(30);
createjs.Ticker.addEventListener('tick', heartBeat)


}

function addCoins() {

coin = new createjs.Bitmap("img/dust.png");
coin.x = Math.random() * 900;
coin.width = 36;
coin.height = 50;
coins.push(coin);
stage.addChild(coin);

 }

function moveCoins() {
for (var i = 0; i < coins.length; i++) {
    coins[i].y += speed;
}

for (var j = 0; j < coins.length; j++) {

    if (coins[j].y > 650) {
        console.log("hejsa");
        stage.removeChild(coins[j]);
        coins.splice(j, 1);
    }
}
}

function maybeAddCoin() {

var rand = Math.random() * 500;
if (rand < 5) {
    addCoins();
}

}




 function fingerUp(e) {
"use strict";

//createjs.Sound.stop("Suger")

switch (e.keyCode) {
    case 37:
        keys.l = false;
        break;
    case 38:
        keys.u = false;
        break;
    case 39:
        keys.r = false;
        break;
    case 40:
        keys.d = false;
        break;
}
}

function fingerDown(e) {
"use strict";


switch (e.keyCode) {
    case 37:
        keys.l = true;
        break;
    case 38:
        keys.u = true;
        break;
    case 39:
        keys.r = true;
        break;
    case 40:
        keys.d = true;
        break;
 }
  }

function moveSlime() {
"use strict";

if (keys.l) {
    circle.x -= settings.heroSpeed;
    if (circle.x < 0) {
        circle.x = 0;
    }
    if (circle.currentDirection != "left") {
        circle.currentDirection = "left";

        //createjs.Sound.play("Suger");
        keys.u = false;
        keys.r = false;
        keys.d = false;

    }
 }
if (keys.r) {
    circle.x += settings.heroSpeed;

    if (circle.x > 960) {
        circle.x = 960;
    }


    if (circle.currentDirection != "right") {
        circle.currentDirection = "right";

        //createjs.Sound.play("Suger")
        keys.u = false;
        keys.l = false;
        keys.d = false;
    }
 }

 }


function hitTest(rect1, rect2) {
if (rect1.x >= rect2.x + rect2.width || rect1.x + rect1.width <= rect2.x ||
    rect1.y >= rect2.y + rect2.height || rect1.y + rect1.height <= rect2.y) 
{
    return false;
}
return true;
}



 function doCollisionChecking() {

for (var k = coins.length - 1; k >= 0; k--) {
    if (hitTest(circle, coin[k])) {
        console.log("ramt");
    }
}

}


 function scoreTimer() {

//Score.text = parseInt(Score.text + 10);

}







function heartBeat(e) {
"use strict";

doCollisionChecking()

maybeAddCoin()

//addCoins()

moveCoins()

scoreTimer()

moveSlime()

stage.update(e);




 }
 window.addEventListener('load', preload);
Теги:
createjs
detection
hit

2 ответа

0

Здесь проблема:

function doCollisionChecking() {

for (var k = coins.length - 1; k >= 0; k--) {
    if (hitTest(circle,
      coin[k] // your array is coins, not coin
    )) {
        console.log("ramt");
    }
}

}

Это может помочь вам в будущем передавать аргументы через функцию вместо того, чтобы полагаться на глобальные объекты. Они помогают вам, сохраняя изменения в ваших данных на жестком пути. С глобальными переменными все может изменять coins из любого места, и вы не сможете определить, какая функция это, если у вас есть 50+ различные функции, редактирующие эту переменную.

0

Очевидно, что один из ваших элементов не определен (circle или coins[k]). Я бы начал с выяснения, какой из них.

  1. Откройте отладчик.
  2. Включите "Пауза об исключениях" и повторите запуск кода. Когда произойдет ошибка, ваш отладчик остановится, и вы сможете проверить свой код
  3. Определите, что не определено. Это должно пролить свет на то, что вызывает ошибку

Одна из важных вещей, которые я заметил, это то, что вы ищете rect.width при проверке столкновений. Элементы EaselJS не имеют свойства width, поэтому вместо этого вы должны использовать getBounds(), который будет работать с Bitmaps после их загрузки.

// Example
var bounds = rect.getBounds();
var w = bounds.width, h = bounds.height;

Надеюсь, это поможет!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню