javascript snake lag

[arbitter]

Hi there,

 

I am making a snake with javascript, and every block that the snake eats, the colors of the block, snake, and background change. But it's this change that lags, causing the snake to stop for several milliseconds (or at least it annoys me).

This is the javascript:

var allColors = new Array('darkmagenta','fuchsia','orange','yellow','white','black','lime','green','cornflowerblue','cyan','yellowgreen','red');
function changeColor(){
colorSnake = Math.floor(Math.random()*12);
colorCells = Math.floor(Math.random()*12);
colorBall = Math.floor(Math.random()*12);
while(colorSnake == colorCells){
	colorCells = Math.floor(Math.random()*12);
}
while((colorCells == colorBall)||(colorSnake == colorBall)){
	colorBall = Math.floor(Math.random()*12);
}
setColor();	
}
function setColor(){
document.body.style.background = allColors[colorCells];
document.getElementById(cellid).bgColor = allColors[colorBall];
document.getElementById('spatiebalk').style.color = allColors[colorSnake];
for(i=0;i<blockPos.length;i++){
	document.getElementById(blockPos[i]).bgColor = allColors[colorSnake];
}
}

 

So what it does is generate three random numbers different from each other, and then it well, changes the colors. My snake runs in a table with 100 rows and 100 columns, but all cell color values are noe except for the one with the 'ball' and the one(s) with the snake, so that js doesn't have to color every cell but only the body background. That's why I don't understand why it goes this slow...

[RussellReal]

#1, you're not realizing that document.getElementById() isn't the most effective method in the world, it is most likely going to scan all elements, everytime you call that method, unless ofcourse it is indexed, but in any event its still alot of looping to do.

 

You're better off simply naming your elements that the snake is on "colorMe", you can have multiple elements with the same name.. That simplifies everything in the long run...

 

Then it costs the browser only 1 big loop, to fetch all the "colorMe" elements, then your smaller loop, to actually color them.. it should dramatically improve performance.

[arbitter]

Hmm... But how can I then define what cells are 'blocked' in a level, and how the snake moves and all? Currently the id's of cells that the snake has get stored in an array, and the new element gets inserted in the beginning and the last one gets deleted... Don't really understand how I can determine the place of the snake without the cell id's...