better way to proceed instead of repeating

Question

I assume there is a better way then repeating the same process over and over for each one?

and the collision method, the collision method only works with center to center collision, which is really good.

var ereset = function(){
 //Attacker 1
 att1.x = 0 + (Math.random() * (canvas.width - 64));
 att1.y = -60 ; 
 //Attacker 2
 att2.x = 0 + (Math.random() * (canvas.width - 64));
 att2.y = -60 ; 
 //Attacker 3
 att3.x = 0 + (Math.random() * (canvas.width - 64));
 att3.y = -60 ; 
 //Attacker 4
 att4.x = 0 + (Math.random() * (canvas.width - 64));
 att4.y = -60 ; 
 //Attacker 5
 att5.x = 0 + (Math.random() * (canvas.width - 64));
 att5.y = -60 ; 
}
 if (
 hero.x <= (att1.x + 20 || att1.x + 32)
 && att1.x <= (hero.x + 20 || att1.x + 32)
 && hero.y <= (att1.y + 20 || att1.y - 32)
 && att1.y <= (hero.y + 20 || att1.y - 32)
 ){
 end();
 } else if(
 hero.x <= (att2.x + 20 || att2.x + 32)
 && att2.x <= (hero.x + 20 || att2.x + 32)
 && hero.y <= (att2.y + 20 || att2.y - 32)
 && att2.y <= (hero.y + 20 || att2.y - 32)
 ){
 end();
 }else if(
 hero.x <= (att3.x + 20 || att3.x + 32)
 && att3.x <= (hero.x + 20 || att3.x + 32)
 && hero.y <= (att3.y + 20 || att3.y - 32)
 && att3.y <= (hero.y + 20 || att3.y - 32)
 ){
 end();
 }else if(
 hero.x <= (att4.x + 20 || att4.x + 32)
 && att4.x <= (hero.x + 20 || att4.x + 32)
 && hero.y <= (att4.y + 20 || att4.y - 32)
 && att4.y <= (hero.y + 20 || att4.y - 32)
 ){
 end();
 }
};

• epascarello: make a function? Pass in the object with the values.
• Musa: An array and a loop?

Answer 1

Since you're doing the same thing to each attacker, it's probably best to make a function that does that action, and run it against each attacker. Here, I'll put all the attackers in an array and use forEach to iterate through the list.

var attackers = [
 att1, att2, att3, att4, att5
];
function ereset(){
 attackers.forEach(moveAttacker);
}
function moveAttacker(attacker){
 attacker.x = 0 + (Math.random() * (canvas.width - 64));
 attacker.y = -60 ; 
}

• zerkms: This solution would be even better if ereset accepted attackers as an argument. The less free variables - the better.
• Aleve Winter: Why didn't I think of that... Thanks :)
• Patrick Gunderson: @zerkms I decided against that because ereset() looks like a control method like play() or stop() that may be called from places that don't necessarily have access to the list of attackers. If resetting the attackers what more complex than just moving them, I would think about making another function called resetAttackers() that would take the array as an argument.
• zerkms: @Patrick Gunderson: that's actually a good point. I wish I could upvote twice just for that.

Answer 2

OOP Job:

var Attacker = function() {
 this.x = 0;
 this.y = 0;
 this.init = function(ix, iy) {
 this.x = ix;
 this.y = iy;
 };
};
var ereset = function(){
 this.attackers = 5;
 this.swat = [];
 for ( var n = 0; n < this.attackers; n++ )
 {
 var att = new Attacker();
 att.init(0 + (Math.random() * (canvas.width - 64)), -60 );
 this.swat.push(att);
 }
};
var checkHero = function (hero, attackers)
{
 for ( var n = 0; n < attackers.length; n++ )
 {
 if (
 hero.x <= (attackers[n].x + 20 || attackers[n].x + 32)
 && attackers[n].x <= (hero.x + 20 || attackers[n].x + 32)
 && hero.y <= (att1.y + 20 || attackers[n].y - 32)
 && attackers[n].y <= (hero.y + 20 || attackers[n].y - 32)
 ){
 end();
 }
 }
 };

or something like this, this is not tested code, just an approach!

• zerkms: Thanks for demonstrating how OO is usually bloated compared to procedural/functional :-) PS: it would be better to use constructor instead of init
• Axel Amthor: "bloated" - this is totally generic and easily extensible code. Why else should we all have OOP then? You may go with fortran77, that's pure functional, and be happy.
• Axel Amthor: constructor - due to the name "ereset" I assumed that this is merely a function to reset things than create them. Semantics ...
• zerkms: "Why else should we all have OOP then? You may go with fortran77, that's pure functional, and be happy." --- I actually try to use pure functional languages and I am happy :-) So, existence of something is a bad justification for using something. Not to mention that this code does not bring any benefits over object literals apart of that "bloatness"
• Axel Amthor: @zerkms I must admit that from a certain point on you need to get functional when it comes to the real stuff ...