Looking for help using setInterval on the 2nd enemy in this simple run game

Viewed 22

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 -->
1 Answers

Not sure if this will work as expected. Hope this might help.

One of the issue was there were some misplaced brackets. And when I fixed the misplaced brackets I noticed that these two lines are trying to access the properties (enemy and enemy2) which are scoped inside the method runEnemy.

enemy.animate(properties, options);
enemy2.animate(properties, options2);

I made runEnemy methods to return properties that above two line requires.

$(function () {
  var runGame;
  var dones = false;

  var runEnemy = function () {//ENEMY
    var enemy = $(".enemy");
    var properties = {
      right: $(".container").width(),
      display: "block"
    };
    return {enemy, properties}
  };

  var runEnemy2 = function () {//ENEMY2
    var enemy2 = $(".enemy2");
    return {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);
        }
        
      }
    };
    
    runEnemy().enemy.animate(runEnemy().properties, options);
    runEnemy2().enemy2.animate(runEnemy().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

});
Related