Hey guys! I was looking to get some help with some more advanced code for the game I am building in hype for a project. I am trying to simulate gun fire that will move in the direction of the mouse. Now I recently posted question in getting my character to always look in the direction of the mouse and I have received some excellent help so I was hoping I might be able to get some more excellent help trying to writ this new code for gunfire.
So my plan is to create 5- 10 ellipses that will all stay stacked under the player character or “castle” (previous called box) then when the left mouse button is pressed I want the function to call on each bolt from the array and make them move in the direction that the mouse was at when they were fired.
For now this is the code I have.
function moveShot() {
var bolts = [ “bolt1”, “bolt2”, “bolt3”, “bolt4”, “bolt5” ]
.style.visibility = “hidden”;
mouseX = e.pageX;
mouseY = e.pageY;
// CHECK IF WENT OFF SCREEN
if ((boltTop == -14) || ((boltLeft == 614)) {
// Reset each bolt as they leave vertical and/or Horizontal sides
resetBolt();
// HIT NOTHING. MOVE IT UP BY 5 PX
} else {
}
}
What I am not sure how to do is write it so that the function calls each part of the array with a .5 second delay.
My code so far for moving the bolt is
xp += (mouseX - xp) / 10;
yp += (mouseY - yp) / 10;
.style.left = xp + ‘px’;
.style.top= yp + ‘px’;
setTimeout(animate,50);
Lastly I need to make each bolt reset after they have “collided” with an enemy or gone out of bounds.
anything that starts with .style is unfinished lines because I am not sure how to link the array yet.
Do a google for , JavaScript iterate over Array.
And also JavaScript timeout function
I am going to write up my full array quickly and then ask my question with a more proper wording.
Give your bolts all the same class name and the gather those into the array.
var boltsArray = document.getElementsByClassName('bolts') //— WE GET AN ARRAY OF A CLASS OF ELEMENTS
You will probably need a counter var that starts with the number of the length of the array ( - 1 ) and use that counter as the index number for an array object each time the fire key is pressed.
Example.
Window.boltCounter = boltsArray.length - 1;
In what ever code you use to move the bolt
boltsArray[Window.boltCounter]
Then at the end of call to fire, reduce the counter number.
Window.boltCounter--
I decided it would be easier to start with a single bolt get that working then move up into implementing an array later. This is the code I have developed so far.
function moveShot() {
var boltTop = parseInt(hypeDocument.getElementById(“punisherBolt”).style.top);
var boltLeft = parseInt(hypeDocument.getElementById(“punisherBolt”).style.left);
var bossStatus = hypeDocument.getElementById(“boss”).style.visibility;
var bossTop = parseInt(hypeDocument.getElementById(“boss”).style.top);
var bossLeft = parseInt(hypeDocument.getElementById(“boss”).style.left);
shootX = event.pageX;
shootY = event.pageY;
// CHECK IF WENT OFF SCREEN
if (boltTop == 0 || boltTop == 600 || boltLeft == 0 || boltLeft == 600) {
resetLaserBolt();
// CHECK IF HIT boss
} else if ((boltTop == 32) && (bossStatus == “visible”) &&
(boltLeft >= bossLeft) && (boltLeft < (bossLeft + 68))) {
hypeDocument.getElementById(“boss”).style.visibility = “hidden”;
resetLaserBolt();
// CHECK ROWS 0 THROUGH 5
// HIT NOTHING. MOVE IT UP BY 2 PX
} else {
boltTop = boltTop - 2;
hypeDocument.getElementById(“punisherBolt”).style.top = boltTop + “px”;
}
}
this [art is the code that fires the shot
else if ((input1 == “32”) && (window.shotVisible == false)) { // SPACE BAR
window.shotVisible = true;
hypeDocument.getElementById(“laserBolt”).style.visibility = “visible”;
window.intervalShot = setInterval(moveShot, 5);
}
The part I am having the hardest trouble with now is the last piece, telling it to move from the position of the character, and in the direction the mouse was when it was clicked.