1
\$\begingroup\$

I am working on a top down shooter project, utilizing the Tumult Hype program ( this means I cannot use Canvas and anything that works within canvas does me no good.) I have hit a small snag. The code I am working with only allows me to have 1 bullet on screen at it utilizes a single image that moves and then returns to it's default position after collision is detected or it leaves bounds.

I however need to write code that fires off duplicates of an ellipse I made as bullets ( so I can have multiple bullets at a time on screen) in the direction of the mouse, and detect collision with enemies moving on the screen and the games bounds.

That is a a bit above my skill level with javascript right now. I was hoping somebody might be able to show me the pieces I need, and provide just enough information for a beginner like me to figure out how to put the pieces together one my own. Any help would be greatly appreciated.

Here is my existing code, this is the part that fires on space bar press

var input1 = event.which || event.keyCode;

if (((input1 == "37") || (input1 == "49")) && (window.setLoopLeft == false) && (window.waveOver == false)) { // LEFT ARROW
    window.setLoopLeft = true;
    window.setLoopRight = false;
    window.intervalLeft = setInterval(moveLeft, 10);
} else if (((input1 == "39") || (input1 == "51")) && (window.setLoopRight == false) && (window.waveOver == false)) { // RIGHT ARROW
    window.setLoopRight = true;
    window.setLoopLeft = false;
    window.intervalRight = setInterval(moveRight, 10);
} else if ((input1 == "32") && (window.shotVisible == false) && (window.waveOver == false)) { // SPACE BAR 
    window.shotVisible = true;
    hypeDocument.getElementById("laserBolt").style.visibility = "visible";
    hypeDocument.startTimelineNamed('laserFired');
    window.intervalShot = setInterval(moveShot, 5);
}

Here is the main function moving the shot

function moveShot() {
    var boltTop = parseInt(hypeDocument.getElementById("laserBolt").style.top);
    var boltLeft = parseInt(hypeDocument.getElementById("laserBolt").style.left);
    var motherShipStatus = hypeDocument.getElementById("motherShip").style.visibility;
    var motherShipLeft = parseInt(hypeDocument.getElementById("motherShip").style.left);
    // CHECK IF WENT OFF SCREEN
    if (boltTop == -14) {                                                 
        resetLaserBolt();
    // CHECK IF HIT MOTHERSHIP
    } else if   ((boltTop == 32) && (motherShipStatus == "visible") && 
                (boltLeft >= motherShipLeft) && (boltLeft < (motherShipLeft + 68))) {                    
        hypeDocument.getElementById("motherShip").style.visibility = "hidden";
        hypeDocument.startTimelineNamed('motherShipHit');
        updateScore(1000);
        hypeDocument.getElementById("motherShipScore").style.left = motherShipLeft + "px";
        resetLaserBolt();
    // CHECK ROWS 0 THROUGH 5
    } else if (boltTop == window.row0Bottom) { 
        checkAlienHit(0, boltLeft, boltTop); 
    } else if (boltTop == window.row1Bottom) { 
        checkAlienHit(1, boltLeft, boltTop); 
    } else if (boltTop == window.row2Bottom) { 
        checkAlienHit(2, boltLeft, boltTop); 
    } else if (boltTop == window.row3Bottom) { 
        checkAlienHit(3, boltLeft, boltTop); 
    } else if (boltTop == window.row4Bottom) { 
        checkAlienHit(4, boltLeft, boltTop); 
    } else if (boltTop == window.row5Bottom) { 
        checkAlienHit(5, boltLeft, boltTop); 
    // CHECK IF HIT BARRIER
    } else if  ((boltTop == 542) && (window.barriersVisible == true) &&
                (((boltLeft > 158) && (boltLeft < 192)) || 
                ((boltLeft > 254) && (boltLeft < 288)) ||
                ((boltLeft > 350) && (boltLeft < 384)) || 
                ((boltLeft > 446) && (boltLeft < 480)))) {               
        resetLaserBolt();
    // HIT NOTHING. MOVE IT UP BY 2 PX
    } else {                                                           
        boltTop = boltTop - 2;
        hypeDocument.getElementById("laserBolt").style.top = boltTop + "px";
    } 
}

This is code I used and messed with to simply make a bolt move, but it only takes a rectable object and makes it move until it collides with one of the objects on screen or leaves the bounds.

I need it to fire in the direction of the mouse when the left mouse button is clicked. My main issues if really just figuring out how to make an object spawn ( instead of making a single existing object move ) and have it move in the direction of the mouse. All code is formatted to work in hype since that is the program my partner wanted to experiment with.

\$\endgroup\$
  • \$\begingroup\$ No one will help you if you don't show your current bullet shooting code. \$\endgroup\$ – rlam12 Apr 28 '17 at 2:23
  • \$\begingroup\$ Yeah, I apologize, I should have linked the code I was using initially. I have been in a scramble trying to code at a more advanced level than I am at and didn't think. I have since added my code. Again I apologize for not linking it initially. \$\endgroup\$ – Zephyranthes Apr 28 '17 at 4:16
  • 1
    \$\begingroup\$ Why not just use an array? \$\endgroup\$ – Bálint Apr 28 '17 at 7:51
0
\$\begingroup\$

OK it's a shooter so you definitely need to create a bullet pool. The game is firing only one bullet because there's only one bullet (see how you are getting the laserBolt by getting it's ID).

Now that we know what the issue is, we can easily fix the issue. To be more specific, you can easily fix the issue (I'm sadly not very well versed when it comes to Tumult Hype).

You can accomplish this like so:

var bulletPool = [];

for (var i = 0, numBullets = 20; i < numBullets; i++) {
  // You can create a div or whatever element you are using
  var bullet = document.createElement('div');

  // You won't be needing an ID or class attribute since you'll know where the elements are stored (in bulletPool)

  // We set the hidden attribute which acts as a way for us to know if the bullet is still alive. This is important when we are about to shoot
  bullet.setAttribute('hidden', true);

  // We then push it into the array...
  var index = bulletPool.push(bullet) - 1;

  // This will place the element in the body element
  document.body.appendChild(bulletPool[index]);
}

// making sure that the bullet pool is working
document.getElementById('totalbullets').innerText = "Total Number of bullets created: " + bulletPool.length;

// You can then shoot like so

function shoot() {
  var bullet = getFirstDeadBullet();

  // Make sure you have bullets available...
  if (bullet) {
    // ... you have a bullet available, now do your movement and collision checks here
  }

}

function getFirstDeadBullet() {
  for (var i = 0, length = bulletPool.length; i < length; i++) {
    if (bulletPool[i].hidden === true) {
      // Our bullet isn't on screen so we can use it
      return bulletPool[i];
    } else {
      return false;
    }
  }
}
<div id="totalbullets"></div>

You'll want to of course do all this in some function, not the global scope like I did lol.

But anyway, hope this helped. You can see a much better example here. The example is based on a canvas game but the concept is still the same.

Tell me if you need anything else! GODSpeed!

\$\endgroup\$
  • \$\begingroup\$ btw @Zephyranthes, I can help you streamline your code if you like. For example, one thing you could have done is create an object for each sprite and have it reference the html element, then you can store other data about the element inside this object. Thisway you don't need to bother the dom much. But yea, that kind of stuff. You can message me on Twitter \$\endgroup\$ – Kitanga Nday Apr 28 '17 at 8:18
  • 1
    \$\begingroup\$ Thank you I will give this along to my partner and run tests in hype with it and see if we can get it working. I will definitely take you up on that offer to help streamline the code! \$\endgroup\$ – Zephyranthes Apr 28 '17 at 23:59
  • \$\begingroup\$ @Zephyranthes,, just passing this by you, you know that if you believe this is the answer then you usually accept it as the answer or up vote it. \$\endgroup\$ – Kitanga Nday Apr 29 '17 at 8:52
  • 1
    \$\begingroup\$ Ah thanks for letting me know, I have marked it as solved. I tested it in jsfiddle and all seems to work, all I need to do is translate it into hype. Thanks for all the help! \$\endgroup\$ – Zephyranthes Apr 30 '17 at 4:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.