Firstly, I'm new to programming, and Stackoverflow scares me, but I tried to contain all the relevant code and explain my problem well. I saw many other messages about people trying to make clones of Space invaders and even specifically "invaders" who are not moving in unison. However, these posts did not solve my problem, and I would be very grateful if someone could indicate where I might have been mistaken.
A prototype is available here . Full code here
The code contains comments on me trying to drown out the code :). I use the library "processing.js", but this should not prevent anyone from understanding my code.
My particular problem is that the behavior of the invaders when moving along the X axis is consistent, and they do not always move at the same time. At first it seems that everything is in order (minus the very first invader, a little retarded), but over time, the behavior becomes unstable, and they begin to move out of line.
I really understand the flaw in my logic, but I don’t know how to solve it. However, before I explain ..
I load spatial invaders into a 2d array as follows:
var enemies = []; for(var i = 0; i < ROWS; i++) { var newRow = []; for(var y = 0; y < COLS; y++){ newRow.push(new Enemy(y * 40 + 40, i * 30)); } enemies.push(newRow); }
My enemy class:
var Enemy = function(x,y) { this.height = 30; this.width = 30; this.x = x; this.y = y; this.speed = 15; }; Enemy.prototype.draw = function() { image(invader, this.x, this.y, this.width, this.height); };
They are drawn and moved to the "draw" loop (mainly process.js "update"). For instance:
for(var i = 0; i < enemies.length; i++) { var enemy = enemies[i] for(var y = 0; y < enemy.length; y++){ enemy[y].draw(); enemy[y].move(); enemy[y].fire(); } }
Then (where, most likely, the problem) I process the movement like this:
Enemy.prototype.move = function(){ if(nextAlienMove > millis()){ return; } for(var i = 0; i < enemies.length; i++) { var enemy = enemies[i] for(var y = 0; y < enemy.length; y++){ var len = enemies[i].length - 1; if(enemies[i][len].x >= width - enemies[i][len].width) { this.speed = -15; } else if(enemies[i][0].x <= 0) { this.speed = 15; } enemy[y].x += this.speed; } } nextAlienMove = millis() + alienDelay; };
Now I believe / know that the problem is that I interact with arrays and check the first and last element to control the position of X. Therefore, there will be some lag between the program that changes direction and with it the search for an object that matches the criteria of the if statement / else. (Hope this makes sense).
I thought about somehow creating a column object with its independent X and Y axis and containing the invaders there. Thus, I do not need to rely on separate "invaders" to call if / else criteria. However, does anyone know a different / simpler approach or a different gap in my logic?