Game Development Reference
In-Depth Information
draw the data as though it
// was being drawn for the actual game in
action
for (var i = 0, len = obj.snake.length; i <
len; i++) {
renderer.clear();
renderer.draw(obj.snake[i],
snake.getSkin());
renderer.draw(obj.fruit[i], fruit.img);
var screenShot = renderer.toImg();
screenShots.push(screenShot);
}
return screenShots;
}
// Display a list of images to the user
function drawScreenShots(imgs) {
var panel =
document.querySelector("#screenShots");
for (var i = 0, len = imgs.length; i < len;
i++) {
var a = document.createElement("a");
a.target = "_blank";
a.href = imgs[i].src;
a.appendChild(imgs[i]);
panel.appendChild(a);
}
}
Observe that we simply draw the points representing the snake and the fruit into that
canvas. All of the other points in the canvas are ignored, meaning that we generate
a transparent image. If we want the image to have an actual background color (even
if it is just white), we can either call
fillRect()
over the entire canvas surface be-
fore drawing the snake and the fruit, or we can traverse each pixel in the
pixelData
array from the rendering context, and set the alpha channel to 100 percent opaque.
Even if we set a color to each pixel by hand, but leave off the alpha channel, we'd
have colorful pixels, but 100 percent transparent.
