Applying Old-School Video Game Techniques in Modern Web Games - HTML5 Game Development Insights - page 139

var red = backgroundTextureData[((backgroundTexture.width * i) + j) * 4],
green = backgroundTextureData[((backgroundTexture.width * i) + j) * 4 + 1],
blue = backgroundTextureData[((backgroundTexture.width * i) + j) * 4 + 2],
hex = numberToHexadecimalValue(red) + numberToHexadecimalValue(green) +
numberToHexadecimalValue(blue);
if (pixelGroups[hex] === undefined) {
pixelGroups[hex] = [];
}
pixelGroups[hex].push({ x: i, y: j });
}
}
What you're really doing here is using the hex code of the color as a key, and then you're storing each pixel as a
small object with x and y coordinates. This will be extremely useful later on when you need to cycle through it. Finally,
you'll need to paint the texture on the canvas again, and call the update loop, as shown in Listing 8-31.
Listing 8-31. Painting the texture in the Canvas object and calling the Updalet Loop
// Paint the image on the canvas again
ctx.drawImage(backgroundTexture,
0,
0);
// Call requestAnimationFrame as soon as we make sure the image is loaded
requestAnimationFrame(update);
}, false);
Within your update loop, you're going to shift the colors by one, placing the first item as the last one, as
shown in Listing 8-32.
Listing 8-32. Shifting Colors in the Update Loop
// Shift the order by one item (grab the first value and put it last)
var firstValue = currentColourOrder[0];
// Remove the first value of the order array
currentColourOrder.splice(0, 1);
// And place it last
currentColourOrder.push(firstValue);
Once you've done that, you'll need to replace the pixels in the last order, with the new colors. In order to do this,
you're going to prepare a utility function called paintPixels() that does just that, as shown in Listing 8-33.