CODEWITHSUNDEEP
javascripthtml
Ainsof26
Ainsof26

Reputation: 11

I'm creating a block avoiding game with JavaScript

<style>
    * {padding: 0; margin: 0;}
    #game {width: 300px; height: 400px; border: 2px solid #222; background-color: #ccc; margin: 50px; position: relative; overflow: hidden;}
    #character {width: 20px; height: 20px; background-color: #ffc554; border: 2px solid #222; position: absolute; bottom: 0; left: 0;}
    .block {width: 10px; height: 10px; background-color: #ff5252; border-radius: 50%; border: 2px solid #222; position: absolute; top: -50px; left: -20px;}
    .falling {animation: fall 2s infinite linear;}
    @keyframes fall {
      0% {top: -50px}
      100% {top: 450px;}
    }
</style>

<body>
  <div id="game">
    <div id="character"></div>
  </div>
</body>

SCRIPT

var block = [];
    function createEnemy(nth) {
      var divAddText = '<div class="block ' + nth + '"></div>'
      document.getElementById('game').innerHTML += divAddText;
      block[nth] = document.getElementsByClassName(nth)[0];
      block[nth].classList.add("falling");
      setInterval(function() {
        block[nth].style.left = Math.floor(Math.random() * 290) + "px";
      }, 2000);
    }

As you can see in the SCRIPT part, I tried to write a block creating and falling code. It worked well when I executed createEnemy(1) in chrome console. The first block created went smoothly falling from random left points as I expected. But as soon as I added createEnemy(2), the first block started to fall from the same left point while the second block was just fine falling from random left points. Could any of you guys give me some insight into this issue?

Upvotes: 0

Views: 83

Answers (1)

bertdida
bertdida

Reputation: 5298

Don't use innerHTML when displaying your enemies, instead use createElement and appendChild.

const enemies = [];
const game = document.getElementById("game");

function createEnemy(name) {
  const enemy = document.createElement("div");
  enemy.classList.add("block", "falling", name);

  enemies.push(enemy);
  game.appendChild(enemy);

  setInterval(function() {
    enemy.style.left = Math.floor(Math.random() * 290) + "px";
  }, 2000);
}

createEnemy(1);
createEnemy(2);
* {
  padding: 0;
  margin: 0;
}

#game {
  width: 300px;
  height: 400px;
  border: 2px solid #222;
  background-color: #ccc;
  margin: 50px;
  position: relative;
  overflow: hidden;
}

#character {
  width: 20px;
  height: 20px;
  background-color: #ffc554;
  border: 2px solid #222;
  position: absolute;
  bottom: 0;
  left: 0;
}

.block {
  width: 10px;
  height: 10px;
  background-color: #ff5252;
  border-radius: 50%;
  border: 2px solid #222;
  position: absolute;
  top: -50px;
  left: -20px;
}

.falling {
  animation: fall 2s infinite linear;
}

@keyframes fall {
  0% {
    top: -50px;
  }
  100% {
    top: 450px;
  }
}
<div id="game">
  <div id="character"></div>
</div>

PS: I'm not sure why your code is not working as expected, I believe it has something to do with innerHTML. Hopefully someone could explain.

Upvotes: 1

Related Questions