我试图制作游戏，但我无法找到如何使用阵列进行碰撞检测。我试过这个，但它只适用于数组的第一个对象，而不适用于其余的对象：
for (i = 0; i < monsterArray.length; i++) { //Voor else monster in monsterArray
var monsterX = parseInt(monsterArray[i].style.left);
var monsterY = parseInt(monsterArray[i].style.top);
var monsterSize = monsterArray[i].style.width;
if (spelerX + spelerSize >= monsterX && spelerX <= monsterX + monsterSize && spelerY + spelerSize >= monsterY && spelerY <= monsterY + monsterSize) {
//location.reload();
test.innerHTML = "hit"
} if (!(spelerX + spelerSize >= monsterX && spelerX <= monsterX + monsterSize && spelerY + spelerSize >= monsterY && spelerY <= monsterY + monsterSize)) {
test.innerHTML = "clear"
}
}
有人知道如何解决这个问题吗？提前谢谢！
我已将整个代码放在下面，但它就像300行，sooo ..是的......
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Form Fight: Cube vs Disks</title>
<link href="../Style/style.PoPeriode2.css" rel="stylesheet" type="text/css">
<link rel="icon" href="../Afbeeldingen/Enemy%20Sprite.png" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
//Variable aanmaken
var bulletPauze = false; //Een onderbreking tussen het afschieten van de bullets
var bulletRatio = 4; //De verhouding tussen de grootte van de speler en de grootte van de bullet
var bulletFireRate = 300; //Hoevaak je een kogel kan afschieten
var containerWidth = 1280; //De breedte van de container
var containerHeight = 720; //De hoogte van de container
var keyState = []; //Een array waarin de staat (true of false) van de ingedrukte toetsen wordt opgeslagen
var down = false;
var left = false;
var right = false;
var up = false;
var monsterArray = []; //Een array met alle monsters
var spelerSize = 50; //De grootte van de speler
var spelerSpeed = 2; //Hoeveel pixels de speler elk 'frame' beweegt
var spelerX = containerWidth / 2 - (spelerSize / 2); //De X-coordinaat van de speler
var spelerY = containerHeight / 2 - (spelerSize / 2); //De Y-coordinaat van de speler
//EventListeners
window.addEventListener('keydown', function(e) { //Bij keydown
keyState[e.keyCode] = true; //In de array keyState wordt de waarde van de keycode van het event 'true'
}, true); //Event capturing
window.addEventListener('keyup', function(e) { //Bij keyup
keyState[e.keyCode] = false; //In de array keyState wordt de keycode van het event 'false'
}, true); //Event capturing
function gameLoop() { //De voortduring van het spel
//Container collision
if (spelerX <= 0) { //Check of de speler rechts buiter de container gaat
spelerX = 1; //Verander de positie van de speler zodat hij weer binnen de container zit
}
if (spelerX >= (containerWidth - spelerSize)) { //Check of de speler links buiter de container gaat
spelerX = containerWidth - spelerSize; //Verander de positie van de speler zodat hij weer binnen de container zit
}
if (spelerY <= 0) { //Check of de speler boven buiter de container gaat
spelerY = 1; //Verander de positie van de speler zodat hij weer binnen de container zit
}
if (spelerY >= (containerHeight - spelerSize)) { //Check of de speler onder buiter de container gaat
spelerY = containerHeight - spelerSize; //Verander de positie van de speler zodat hij weer binnen de container zit
}
//Controls
if (keyState[37] || keyState[65]) { //Als a of left arrow is ingedrukt
//Maak de waarde van left 'true' en de rest 'false'
up = false;
down = false;
left = true;
right = false;
spelerX -= spelerSpeed; //Beweeg de speler naar links
}
if (keyState[39] || keyState[68]) { //Als d of right arrow is ingedrukt
//Maak de waarde van right 'true' en de rest 'false'
up = false;
down = false;
left = false;
right = true;
spelerX += spelerSpeed; //Beweeg de speler naar rechts
}
if (keyState[38] || keyState[87]) { //Als w of up arrow is ingedrukt
//Maak de waarde van up 'true' en de rest 'false'
up = true;
down = false;
left = false;
right = false;
spelerY -= spelerSpeed; //Beweeg de speler naar boven
}
if (keyState[40] || keyState[83]) { //Als s of down arrow is ingedrukt
//Maak de waarde van down 'true' en de rest 'false'
up = false;
down = true;
left = false;
right = false;
spelerY += spelerSpeed; //Beweeg de speler naar beneden
}
if (keyState[32] && bulletPauze == false) { //Als spatie is ingedrukt en bulletPauze over is
//Schiet in de richting die 'true' is
if (right == true) {
shootR()
} else if (left == true) {
shootL()
} else if (up == true) {
shootU()
} else if (down == true) {
shootD()
}
//Hier wordt een pauze tussen het schieten van de bullets gemaakt, zodat je niet steeds achter elkaar kan blijven schieten
bulletPauze = true; //De pauze begint
setTimeout(function() { bulletPauze = false; }, bulletFireRate); //Na de waarde van bulletFireRate in ms is de pauze over
}
speler.style.left = spelerX + "px"; //Verander elke keer dat het spel geupdated wordt het X coordinaat van de speler naar de waarde van het variable spelerX
speler.style.top = spelerY + "px"; //Verander elke keer dat het spel geupdated wordt het Y coordinaat van de speler naar de waarde van het variable spelerY
//Monster Collision
for (i = 0; i < monsterArray.length; i++) { //Voor else monster in monsterArray
var monsterX = parseInt(monster.style.left);
var monsterY = parseInt(monster.style.top);
var monsterSize = monster.style.width;
if (spelerX + spelerSize >= monsterX && spelerX <= monsterX + monsterSize && spelerY + spelerSize >= monsterY && spelerY <= monsterY + monsterSize) {
//location.reload(); //Herlaad de pagina
test.innerHTML = "hit"
} if (!(spelerX + spelerSize >= monsterX && spelerX <= monsterX + monsterSize && spelerY + spelerSize >= monsterY && spelerY <= monsterY + monsterSize)) {
test.innerHTML = "clear"
}
}
setTimeout(gameLoop, 10); //Update de game elke 10 ms
}
function monstersAanmaken() { //div's aanmaken die als monster fungeren
for (i = 0; i < 2; i++) { //Bepaal hoeveel monster worden aangemaakt
monster = document.createElement("div");
monster.className = "monster"; //Elk aparte div een Class geven
container.appendChild(monster); //Elk aparte div onder de div 'container' zetten
monster.style.left = Math.random() * 500 + 'px'; //Willekeurige positie voor het monster gegeven op de X-as
monster.style.top = Math.random() * 500 + 'px'; //Willekeurige positie voor het monster gegeven op de Y-as
monsterX = monster.style.left; //Verander de waarde van monsterX naar de 'left' waarde van het HTML element monster
monsterY = monster.style.top; //Verander de waarde van monsterY naar de 'top' waarde van het HTML element monster
monsterArray.push(monster) //Elk monster apart toevoegen aan het array
}
var monstersAnimerenInterval = setInterval(monstersAnimeren, 200) //Beweeg elke 200 ms de monsters
}
function monstersAnimeren() { //Animatie van de monsters
$(".monster").stop();
$(".monster").animate( {
left: speler.style.left, //X-coördinaten van de monsters gelijk maken aan die van de speler
top: speler.style.top //Y-coördinaten van de monsters gelijk maken aan die van de speler
}, 8000, 'linear');
return monster.style.left, monster.style.top;
}
function shoot(bullet) {
container.appendChild(bullet); //Voeg de bullet toe onder de container in de DOM
bullet.style.width = spelerSize / bulletRatio + "px"; //De grote van de bullet is do grootte van de speler gedeeld door de bulletRatio (Mochten we de grootte later nog veranderen, zodat alles in verhouding blijft)
bullet.style.height = spelerSize / bulletRatio + "px";
bullet.style.background = "lightgrey"; //Verander de achtergrondkleur van de bullet naar lichtgrijs
bullet.style.position = "absolute"; //Verander de positie van de bullet naar absoluut
bullet.style.top = parseInt(speler.style.top) + spelerSize / 2 - (spelerSize / bulletRatio / 2) + "px"; //De coordinaten van het midden van de bullet zijn het midden van de speler
bullet.style.left = parseInt(speler.style.left) + spelerSize / 2 - (spelerSize / bulletRatio / 2) + "px";
}
function shootD() {
var bullet = document.createElement("div");
shoot(bullet); //Voer de functie 'shoot' uit met 'bullet' als argument
var bulletX = parseInt(bullet.style.left); //De waarde van bulletX wordt de 'left' van het het HTML element 'bullet' in de vorm van een integer
var bulletY = parseInt(bullet.style.top); //De waarde van bulletY wordt de 'top' van het het HTML element 'bullet' in de vorm van een integer
var animeBullet = setInterval(frame, 1); //Voer elke ms de functie 'frame' uit
function frame() {
if (bulletY >= containerHeight - spelerSize / bulletRatio) { //Check of de bullet zich onder buiten de container bevindt
clearInterval(animeBullet); //Stop de animatie van de bullet
container.removeChild(bullet); //Verwijder de bullet uit de DOM
} /*else if (bulletX >= monsterX ) { //Check of de coordinaten van bullet overlappen met de coordinaten van het monster
clearInterval(animeBullet); //Stop de animatie van de bullet
container.removeChild(bullet); //Verwijder de bullet uit de DOM
}*/ else { //Als de bullet niet buiten de container is, en ook geen monster raakt
bulletY += 2; //Schuif de positie van de bullet steeds met 2 pixels naar onder
bullet.style.top = bulletY + "px"; //De 'top' waarde van het HTML element 'bullet' wordt het aantal pixels van de waarde van bulletY
}
}
}
function shootL() {
var bullet = document.createElement("div"); //Maak een div aan die in het javascript bestand 'bullet' heet
shoot(bullet); //Voer de functie 'shoot' uit met 'bullet' als argument
var bulletX = parseInt(bullet.style.left); //De waarde van bulletX wordt de 'left' van het het HTML element 'bullet' in de vorm van een integer
var bulletY = parseInt(bullet.style.top); //De waarde van bulletY wordt de 'top' van het het HTML element 'bullet' in de vorm van een integer
var animeBullet = setInterval(frame, 1); //Voer elke ms de functie 'frame' uit
function frame() {
if (bulletX <= 0) { //Check of de bullet zich links buiten de container bevindt
clearInterval(animeBullet); //Stop de animatie van de bullet
container.removeChild(bullet); //Verwijder de bullet uit de DOM
} else if (bulletX >= monsterX && bulletX <= (monsterX + monsterSize) && bulletY >= monsterY && bulletY <= (monsterY + monsterSize)) { //Check of de coordinaten van bullet overlappen met de coordinaten van het monster
clearInterval(animeBullet); //Stop de animatie van de bullet
clearInterval(animeBullet); //Verwijder de bullet uit de DOM
container.removeChild(bullet);
} else { //Als de bullet niet buiten de container is, en ook geen monster raakt
bulletX -= 2; //Schuif de positie van de bullet steeds met 2 pixels naar links
bullet.style.left = bulletX + "px"; //De 'left' waarde van het HTML element 'bullet' wordt het aantal pixels van de waarde van bulletX
}
}
}
function shootR() {
var bullet = document.createElement("div"); //Maak een div aan die in het javascript bestand 'bullet' heet
shoot(bullet); //Voer de functie 'shoot' uit met 'bullet' als argument
var bulletX = parseInt(bullet.style.left); //De waarde van bulletX wordt de 'left' van het het HTML element 'bullet' in de vorm van een integer
var bulletY = parseInt(bullet.style.top); //De waarde van bulletY wordt de 'top' van het het HTML element 'bullet' in de vorm van een integer
var animeBullet = setInterval(frame, 1); //Voer elke ms de functie 'frame' uit
function frame() {
if (bulletX >= containerWidth - spelerSize / bulletRatio) { //Check of de bullet zich rechts buiten de container bevindt
clearInterval(animeBullet); //Stop de animatie van de bullet
container.removeChild(bullet); //Verwijder de bullet uit de DOM
} else if (bulletX >= monsterX[i] && bulletX <= (monsterX[i] + monsterSize) && bulletY >= monsterY[i] && bulletY <= (monsterY[i] + monsterSize)) { //Check of de coordinaten van bullet overlappen met de coordinaten van het monster
clearInterval(animeBullet); //Stop de animatie van de bullet
container.removeChild(bullet); //Verwijder de bullet uit de DOM
monsterShot()
} else { //Als de bullet niet buiten de container is, en ook geen monster raakt
bulletX += 2; //Schuif de positie van de bullet steeds met 2 pixels naar rechts
bullet.style.left = bulletX + "px"; //De 'left' waarde van het HTML element 'bullet' wordt het aantal pixels van de waarde van bulletX
}
}
}
function shootU() { //Maak een div aan die in het javascript bestand 'bullet' heet
var bullet = document.createElement("div");
shoot(bullet); //Voer de functie 'shoot' uit met 'bullet' als argument
var bulletX = parseInt(bullet.style.left); //De waarde van bulletX wordt de 'left' van het het HTML element 'bullet' in de vorm van een integer
var bulletY = parseInt(bullet.style.top); //De waarde van bulletY wordt de 'top' van het het HTML element 'bullet' in de vorm van een integer
var animeBullet = setInterval(frame, 1); //Voer elke ms de functie 'frame' uit
function frame() { //Maak een div aan die in het javascript bestand 'bullet' heet
if (bulletY <= 0) { //Check of de bullet zich boven buiten de container bevindt
clearInterval(animeBullet); //Stop de animatie van de bullet
container.removeChild(bullet); //Verwijder de bullet uit de DOM
} else if (bulletX >= monsterX && bulletX <= (monsterX + monsterSize) && bulletY >= monsterY && bulletY <= (monsterY + monsterSize)) { //Check of de coordinaten van bullet overlappen met de coordinaten van het monster
clearInterval(animeBullet); //Stop de animatie van de bullet
clearInterval(animeBullet); //Verwijder de bullet uit de DOM
container.removeChild(bullet);
} else { //Als de bullet niet buiten de container is, en ook geen monster raakt
bulletY -= 2; //Schuif de positie van de bullet steeds met 2 pixels naar boven
bullet.style.top = bulletY + "px"; //De 'top' waarde van het HTML element 'bullet' wordt het aantal pixels van de waarde van bulletY
}
}
}
function zzLoadEvents() {
monstersAanmaken(); //Voer de functie 'monstersAanmaken' uit
var container = document.getElementById("container"); //Geef het HTML element 'container' ook de naam 'container' in het Javascript bestand
var speler = document.getElementById("speler"); //Geef het HTML element 'speler' ook de naam 'speler' in het Javascript bestand
var test = document.getElementById("test") //Geef het HTML element 'test' ook de naam 'test' in het Javascript bestand
container.style.width = containerWidth + "px"; //De width van het HTML element 'container' wordt het aantal pixels van de waarde van containerWidth
container.style.height = containerHeight + "px"; //De height van het HTML element 'container' wordt het aantal pixels van de waarde van containerHeight
monsterSize = monster.style.width + "px"; //De waarde van monsterSize wordt de width van het HTML element monster
speler.style.width = spelerSize + "px"; //De 'width' waarde van het HTML element 'speler' wordt het aantal pixels van de waarde van spelerSize
speler.style.height = spelerSize + "px"; //De 'height' waarde van het HTML element 'speler' wordt het aantal pixels van de waarde van spelerSize
gameLoop(); //Vanaf nu begint het spel echt
}
window.onload = zzLoadEvents; //Voer bij het laden van de pagina de functie 'zzLoadEvents' uit (zz zodat de functies op alfabetische volgorde blijven staan)
</script>
</head>
<body>
<p id="test">text</p>
<div id="container">
<div id="speler">
</div>
</div>
</body>
</html>