Making the pipes move is
ridiculously easy.
Because the pipes just slide past at a constant rate, all we have to do is set the x-velocity when we create them, and they'll just do their own thing.
var pipe_speed = -2; // how quickly the pipes move left
function add_pipe(x_pos, top_of_gap, gap_width) {
// First the top pipe
var top_pipe = new MySprite();
top_pipe.MyImg = pipe_piece;
top_pipe.x = x_pos;
top_pipe.y = top_of_gap - pipe_piece.height;
top_pipe.velocity_x = pipe_speed;
pipes.push(top_pipe);
// Then the bottom pipe
var bottom_pipe = new MySprite();
bottom_pipe.MyImg = pipe_piece;
bottom_pipe.flipV = true;
bottom_pipe.x = x_pos;
bottom_pipe.y = top_of_gap + gap_width;
bottom_pipe.velocity_x = pipe_speed;
pipes.push(bottom_pipe );
}
In other example games, when we've had an array of MySprite objects, we
carefully determined when the sprite was no longer required and
deleted it from the array.
We could do that here, but we don't really need to.
Because we're hand-crafting each pipe, there's only a limited number of them and we can afford to have a dozen or so way off-screen to the right and/or left. There's only ever going to be a fixed number, so efficiency isn't a concern.