I'm looking for help to use setInterval on the second enemy in this simple runner game.
Ultimately I am trying to use on both of them so that they are displayed intermittently from one another, but when I add a separate setInterval and try add in runEnemy2 console is giving me an error saying that "enemy 2 is not defined in runEnemy". I thought each enemy should be in separate functions so I'm guessing it's probably the ways it's written .
The way the code is here runEnemy is displayed as it should be, but if I try to use runEnemy2 nothing shows up.
<!-- begin snippet: -->
<!-- language: lang-js -->
$(function () {
var runGame;
var dones = false;
var runEnemy = function () {//ENEMY
var enemy = $(".enemy");
var properties = {
right: $(".container").width(),
display: "block"
};
var runEnemy2 = function () {//ENEMY2
var enemy2 = $(".enemy2");
};
var options = { //ENEMY ATTACK DURATION
duration: 2500,
done: function () {
var w = $(this).width() * -1;
$(this).css({
right: w
});
},
};
var options2 = { //ENEMY2 ATTACK DURATION
duration: 5000,
done: function () {
var w2 = $(this).width() * -1;
$(this).css({
right: w2
});
},
progress: function () {
console.log(overlaps($(".hero"), $(".enemy"), $(".enemy2")));
var laped = overlaps($(".hero"), $(".enemy"), $(".enemy2"));
var heroLoc = document.getElementsByClassName("hero")[0].offsetTop;
var enemyLoc = document.getElementsByClassName("enemy")[0].offsetTop;
var enemy2Loc = document.getElementsByClassName("enemy2")[0].offsetTop;
var loc = enemyLoc + enemy2Loc - heroLoc;
console.log(
"enemy: " + enemyLoc + enemy2Loc + " hero: " + heroLoc + " loc: " + loc
);
//Hitbox
if (loc > 0 && laped === false) {
dones = true;
console.log("WIN");
} else if (laped === true && loc < 0) {
dones = false;
$(".enemy").stop();
$(".enemy2").stop();
var score = parseInt($(".score").html());
$(".hero").addClass("stopAnimate");
$(".container").addClass("stopAnimate");
$(".lose p").html("You Scored : " + score);
clearInterval(runGame);
$(".lose").addClass("lost");
console.log("LOSE");
}
},
complete: function () {
if (dones === true) {
var score = parseInt($(".score").html());
$(".score").html(score + 1);
}
}
};
enemy.animate(properties, options);
enemy2.animate(properties, options2);
};
var overlaps = (function () {
function getPositions(elem) {
var pos, width, height;
pos = $(elem).position();
width = $(elem).width();
height = $(elem).height();
return [
[pos.left, pos.left + width],
[pos.top, pos.top + height]
];
}
function comparePositions(p1, p2) {//COMPARE POSITIONS
var r1, r2;
r1 = p1[0] < p2[0] ? p1 : p2;
r2 = p1[0] < p2[0] ? p2 : p1;
return r1[1] > r2[0] || r1[0] === r2[0];
}
return function (a, b) {
var pos1 = getPositions(a),
pos2 = getPositions(b);
return (
comparePositions(pos1[0], pos2[0]) && comparePositions(pos1[1], pos2[1])
);
};
})();
// Events
$(this).keypress(function (e) {
console.log("JUMP");
if (e.keyCode === 32) {
if ($(".lose").hasClass("lost") === false) {
$(".hero")
.toggleClass("jump")
.bind(
"webkitTransitionEnd oTransitionend oTransitionEnd msTransitionEnd transitionend",
function (e) {
if ($(this).hasClass("jump")) {
console.log("DROP");
$(this).toggleClass("jump");
}
}
);
}
}
});
setTimeout(function () {
runGame = setInterval(function () {
runEnemy()
}, 2000);//ENEMY INTERVAL
}, 0);//+INITIAL WAIT
});
<!-- end snippet -->