Attempted to create a for loop for my aliens to zig-zag across the grid after the eventlistener button is clicked- not working

Question

is there something wrong with the syntax and or logic? the aliens just aren't moving on the grid i have built. when the game loads, the aliens are triggered by the eventlistener of the start button. the aim is tohave the aliens move one box to the left, then one row down, then once box to the right, and one row down again. this is the loop i wanted to create with these movements.

function aliensMove() {
      for (i = 0; i < 1; i++)
     if cell.addEventListener('click', ('.start') => {     
     (alien > ((gridSize) - width - 1)) {
      return
       }
    cells[alien].classList.remove('alien')
    alien = alien + width
    cells[alien].classList.add('alien')

if (alien > ((gridSize) - width - 1)) {
     return
    }
 cells[alien].classList.remove('alien')
 alien = alien + width
cells[alien].classList.add('alien')

if (alien === 0) {
     return
  }

cells[alien].classList.remove('alien')
 alien = alien - 1
   cells[alien].classList.add('alien')
  break

if (alien > ((gridSize) - width - 1)) {
     return
   }
   cells[alien].classList.remove('alien')
  player = player + width
    cells[alien].classList.add('alien')
   }

Answer 1

Your question looked like a fun project, so I gave it a try. I did not really understand your code, so this might not really answer your question, but it might give you some ideas. Try it by clicking on the blue button under the code:

 var $grid = document.getElementById('grid'), width = 40, height = 10, $rows = makeGrid($grid, width, height); function makeGrid($container, width, height) { var $rows = []; for (var y = 0; y < height; y++) { var $row = document.createElement('div'); $row.className = 'row'; $rows.push([]); for (var x = 0; x < width; x++) { var $cell = document.createElement('div'); $cell.className = 'cell'; $row.appendChild($cell); $rows[y].push($cell); } $container.appendChild($row); } return $rows; } function Alien($rows, x, y) { this.$rows = $rows; this.x = x; this.y = y; // Create an array of moves you will loop through this.moves = ['left', 'down', 'right', 'down']; this.toggleAlienClass(true); } Alien.prototype.move = function() { this.toggleAlienClass(false); switch (this.moves[0]) { case 'left': this.x -= 1; break; case 'right': this.x += 1; break; case 'up': this.y -= 1; break; case 'down': this.y += 1; break; } this.toggleAlienClass(true); // Remove the first move and push it to the end this.moves.push(this.moves.shift()); } Alien.prototype.toggleAlienClass = function(show) { if (this.$rows.length > this.y && this.$rows[this.y].length > this.x) { this.$rows[this.y][this.x].classList[show? 'add': 'remove']('alien'); } } var aliens = [ new Alien($rows, 10, 2), new Alien($rows, 20, 2), new Alien($rows, 30, 2) ]; setInterval(function() { aliens.forEach(function(alien) { alien.move(); }); }, 500);

 #grid { background: #222; width: 40em; margin-left: auto; margin-right: auto; }.row:after { content: ""; display: block; clear: both; }.cell { width: 1em; height: 1em; float: left; }.cell.alien { background: center / contain no-repeat url('https://files.gamebanana.com/img/ico/sprays/render_9.gif'); }

 <div id="grid"></div>