所以我正在为学校制作这个项目，我们必须创建一个游戏，然后我选择了太空入侵者。所以它很顺利，但碰撞检测不起作用。我花了几个小时在谷歌试图找到我的问题，但我不能。这是2个JS文件。
var newPlayer=0;
var hero = new Object();
var playerCount=0;
var pTag="";
var redImage=$("#red");
var blueImage=$("#blue");
var greenImage=$("#green");
function Hero(n,life,speed,buls)
{
var that=this;
playerCount++;
this.name=n;
this.lives=life;
this.speed=speed;
this.bulSpeed=buls;
this.warning=lowLives;
function stats()
{
alert("Name: " + that.name + "\n" + "Lives: "+ that.lives + "\n" + "Speed: " + that.speed + "\n" + "Bullet speed: " + that.bulSpeed);
}
function lowLives(life)
{
if(life==1)
alert("You have low lives. Be careful!");
else
alert("Don\'t worry! You still have " + life + " lives left");
}
this.buttonTag=$("#" + n + "B")
this.buttonTag.dblclick(startTheGame);
this.imageTag=$("#" + n);
this.imageTag.click(stats);
}
function newPlayerCreation1()
{
hero=new Hero("Red",3,5,6);
$("#RedB").off('click');
}
function newPlayerCreation2(){
hero=new Hero("Blue",4,3,4);
$("#BlueB").off('click');
}
function newPlayerCreation3(){
hero=new Hero("Green",2,8,2);
$("#GreenB").off('click');
}
$(document).ready(function(){
$("#RedB").click(newPlayerCreation1);
$("#BlueB").click(newPlayerCreation2);
$("#GreenB").click(newPlayerCreation3);
});
这是所有动作发生的代码
var position;
var position1;
var bulletCount=0;
var enemy=new Array(20);
var enemyVerticalCenter;
var enemyHorizontalCenter;
var verticalDifference;
var horizontalDifference;
var bulVerticalCenter;
var bulHorizontalCenter;
function startTheGame()
{
$("p").remove();
$("button").remove();
$("img").remove();
document.title="Space invaders";
var backGround = $("<div id='bground' style='background-color:black; width: 500px; height: 600px; position: relative; top: 0px; bottom: 0px; left: 0px; right: 0px; margin: auto; background-repeat:no-repeat; border:10px;'>");
$("body").append(backGround);
var player = $("<img id='player' src='" + hero.name + ".png' style='position: absolute; height:40px; width:40px; left: 250; top: 540;'>");
var base1 = $("<img src='baseshelter.jpg' style='position: absolute; height:80px; width:60px; left:36; top: 440;'>");
var base2 = $("<img src='baseshelter.jpg' style='position: absolute; height:80px; width:60px; left:153; top: 440;'>");
var base3 = $("<img src='baseshelter.jpg' style='position: absolute; height:80px; width:60px; left:286; top: 440;'>");
var base4 = $("<img src='baseshelter.jpg' style='position: absolute; height:80px; width:60px; left:413; top: 440;'>");
for(i=1;i<=15;i++){
if(i<=5)
enemy[i]=$("<img src='space_invaders_alien.png' style='position: absolute; height:80px; width:60px; left:" + (i-1)*98 + "; top:0;'>");
else if(i>5 && i<=10)
enemy[i]=$("<img src='space_invaders_alien.png' style='position: absolute; height:80px; width:60px; left:" + i%5*98 + "; top:100;'>");
else
enemy[i]=$("<img src='space_invaders_alien.png' style='position: absolute; height:80px; width:60px; left:" + i%5*98 + "; top:200;'>");
}
$("#bground").append(base1);
$("#bground").append(base2);
$("#bground").append(base3);
$("#bground").append(base4);
$("#bground").append(player);
for(i=1;i<=15;i++)
$("#bground").append(enemy[i]);
$("html").keyup(stop).keydown(moveAndFire);
function enemyMoving()
{
for(var i=1;i<=15;i++)
{
enemy[i].animate({left: "+=50" + "px"}, 1000, "linear")
.animate({left: "-=50" + "px"},1000, "linear");
}
}
function stop(evt)
{
player.stop(true);
}
function moveAndFire(evt)
{
if (player.position().left > 0 && evt.keyCode == 37)
{
player.css("left", (player.position().left - hero.speed) + "px");
}
else if (player.position().left < (backGround.width() - player.width()) && evt.keyCode == 39)
{
player.css("left", (player.position().left + hero.speed) + "px");
}
else if (evt.keyCode==32)
{
bulletCount++;
position=player.position();
var bullet=$("<img id='bullet' src='bullet.png' style='position: absolute; height:30px; width:5px;'>");
$("#bground").append(bullet);
$("#bullet").css({ position: "absolute",top: player.position().top + "px", left: (player.position().left + 18) + "px"});
bullet.animate({top: "-=540" + "px"},{
duration: 3000/hero.speed,
step: checkCollision(bullet,enemy),
done: bullet.remove()
});
}
}
var interval=setInterval(enemyMoving,1000);
}
function checkCollision(bul,obs)
{
for(i=1;i<=15;i++)
{
enemyVerticalCenter = obs[i].position().top + obs[i].height()/2;
enemyHorizontalCenter=obs[i].position().left + obs[i].width()/2;
verticalDifference = bul.height()/2 + obs[i].height()/2;
horizontalDifference = bul.width()/2 + obs[i].width()/2;
bulVerticalCenter = bul.position().top + bul.height()/2;
bulHorizontalCenter = bul.position().left + bul.width()/2;
if(Math.abs(bulVerticalCenter - enemyVerticalCenter) <= verticalDifference && Math.abs(bulHorizontalCenter - enemyHorizontalCenter) <= horizontalDifference)
{
$(bul).remove();
$(obs[i]).remove();
}
}
}
这是html代码
<html>
<head>
<title>Character creation</title>
</head>
<body>
<p id="name">Choose your Character</p>
<p class="info">Click the button once to create a hero, click the image of a hero to view its stats after creating him and double click the button to start the game with that hero</p>
<p class="info">The hero you start the game with must be the last one you created</p>
<img name="image" id="Red" src="Red.png" width="100px" height="100px">
<img name="image2" id="Blue" src="Blue.png" width="100px" height="100px">
<img name="image3" id="Green" src="Green.png" width="100px" height="100px">
<br>
<button id="RedB" style = "position: absolute; left:12px; top:213px">Choose Red!</button>
<button id="BlueB" style = "position: absolute; left:112px; top:213px">Choose Blue!</button>
<button id="GreenB" style = "position: absolute; left:212px; top:213px">Choose Green!</button>
<script src="jquery.js"></script>
<script src="startGame.js"></script>
<script src="script.js"></script>
</body>
</html>
所以我的子弹甚至都不会被创造出来。当我删除第二个jquery文件中的done: bullet.remove()时，它不会与敌人发生冲突。有人可以告诉我为什么吗？