碰撞检测只影响最后渲染的对象
Collision detection is only affecting the last rendered object
我制作了一款简单的2D游戏。点击开始按钮,然后点击枪射击移动目标,这些目标是随机生成的,具有随机的类别,速度和高度。出于调试目的,我禁用了大多数随机性。我们添加了碰撞检测功能,这样与子弹相撞的飞船就会变成红色,玩家得一分,子弹就会被移除。这一切都在工作,除了一个问题:只有最后一艘船被检测为碰撞。任何帮助都会很感激。我读了这篇文章,但我不确定它是否适用于我的情况。
https://dl.dropboxusercontent.com/u/1656361/test_game_v1-0/index.html(与Dropbox托管:演示将无法工作,除非你允许脚本从Dropbox运行在Chrome或firefox -点击小屏蔽图标)
JS
$(document).ready(function() {
var score = 0;
function getRandomInt (min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
// New Ship Creation //
function newShip (){
var ship = 1; // var ship = Math.floor((Math.random()*3)+1);
var shipPosition = Math.floor((Math.random()*150)+1);
var speed = 0;
var speedRandom = Math.floor((Math.random()*999)+1);
if (ship == 1){
ship = "slowShip";
speed = 4001+speedRandom;
} else if (ship == 2) {
ship = "mediumShip";
speed = 3001+speedRandom;
} else if (ship == 3) {
ship = "fastShip";
speed = 2500+(speedRandom/2);
}
var div = "<div class='allShips " + ship + "'></div>";
var shipClass = "."+ship;
$('#gameFrame').prepend(div);
$(shipClass).animate({left: 400}, speed, "linear", function(){
$(this).remove();
});
$('.allShips').first().css("top", shipPosition);
}
// Game Start //
$("button.start").click(function(){
var randomTime = getRandomInt(2000,2000); // (500,4500);
setInterval(function() {
newShip(); }, randomTime);
// Gun Control //
$('.gun').click(function() {
$('.gun').after("<div class='bullet'></div>");
$(".bullet").animate({top: '-10px'}, 1000,"linear", function(){
$(this).remove();
});
});
// Collision Detection //
function collisions($div1, $div2) {
var shipCount = $div1.length;
var bulletCount = $div2.length;
// console.log(shipCount);
if (shipCount > 0 && bulletCount > 0) {
var x1 = $div1.offset().left;
var y1 = $div1.offset().top;
var h1 = $div1.outerHeight(true);
var w1 = $div1.outerWidth(true);
var b1 = y1 + h1;
var r1 = x1 + w1;
var x2 = $div2.offset().left;
var y2 = $div2.offset().top;
var h2 = $div2.outerHeight(true);
var w2 = $div2.outerWidth(true);
var b2 = y2 + h2;
var r2 = x2 + w2;
if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) {
return false;
} else {
return true;
}
};
}
// Collision Consequences //
setInterval(function(){
$('.allShips').each(function(){
if(collisions($('.allShips'), $('.bullet'))){
$(this).css("background-color", "red");
score += 1;
$('#score').text(score);
$('.bullet').remove();
}
});
}, 10);
});
});
试试碰撞函数:
function collisions($div1, $div2) {
var shipCount = $div1.length;
var bulletCount = $div2.length;
// console.log(shipCount);
if (shipCount > 0 && bulletCount > 0) {
$div2.each(function(){
var x1 = $div1.offset().left;
var y1 = $div1.offset().top;
var h1 = $div1.outerHeight(true);
var w1 = $div1.outerWidth(true);
var b1 = y1 + h1;
var r1 = x1 + w1;
var x2 = $(this).offset().left;
var y2 = $(this).offset().top;
var h2 = $(this).outerHeight(true);
var w2 = $(this).outerWidth(true);
var b2 = y2 + h2;
var r2 = x2 + w2;
if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) {
return false;
} else {
return true;
}
});
};
}
相关文章:
- 如何从对象数组中获取最后一项
- 如何查找流星集合中最后一个元素/对象的id
- Parse.com在循环中保存对象,只保存最后一个对象
- ..的Javascript..循环中的对象没有在最后一个属性上运行
- 如何在Javascript中的对象数组的最后一个对象之后附加几个新对象
- 对象绑定模式的rest属性应该是最后一个
- 是否可以获得“”的事件对象;当前“;或“;最后一个“;事件,而不将其作为处理程序中的参数接收
- 获取对象Javascript或jQuery的最后一个值
- Javascript事件处理程序总是被添加到数组中的最后一个对象
- Javascript - 循环访问对象数组,仅显示最后一个对象
- 最后定义的原型函数始终在对象初始化时运行
- 数组上的挖空子对象具有最后一个项的值
- 如何按排序键顺序获取对象中的最后一项
- JavaScript:.push() 将所有存储的值替换为最后一个推送对象的值
- JS将对象推送到变量,将最后一个对象添加到所有元素中
- 如何将另一个 JSON 中的 JSON 对象移动到最后一个位置
- 如何在 JavaScript 中获取对象的第一个、最后一个和其他值
- 如何推送到实际对象的数组最后状态,清除它并像新对象一样单独编辑
- 数组最后一个单元格中不需要的对象
- jQuery将inArray添加为最后一个数组/对象元素