The grand plan is we'll make a
new image variable that holds our
single piece of pipe, like so:
var pipe_piece = new Image();
pipe_piece.src = "http://s2js.com/img/etc/flappypipe.png" ;
We'll make a bunch of
MySprites, one for each half of pipe, and we'll store all the halves in a
global array:
var pipes = []; // all our pipe-halves
In our frame renderer, we'll cause all the pipe-halves to be displayed:
function Do_a_Frame () {
ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
bird.Do_Frame_Things();
show_the_pipes();
make_bird_tilt_appropriately();
make_bird_slow_and_fall();
}
And we'll define
show_all_the_pipes:
function show_the_pipes() {
for (var i=0; i < pipes.length; i++) {
pipes[i].Do_Frame_Things();
}
}
Notice how I've split the rendering of pipes out into a
separate function and given it a nicely
descriptive name. This sort of technique keeps code
clearer and easier to read.