Moving Red Hat Boy

Moving game objects means keeping track of a position instead of hardcoding it, as you might have expected. We'll create a Point structure in engine that will hold an x and a y position for RHB. On every update call, we'll also calculate a velocity for him, based on which keys are pressed. Every direction will be the same size, so if ArrowLeft and ArrowRight are pressed at the same time, he'll stop moving. After we calculate his velocity, we'll update his position with that number. That should be enough to allow us to move him around the screen. Let's start by adding position to the WalkTheDog game struct:

pub struct WalkTheDog {
    image: Option<HtmlImageElement>,
    sheet: Option<Sheet>,
    frame: u8,
    position: Point,
}

Of course, Point doesn't exist yet, so we'll create it in engine:

#[derive(Clone, Copy)]
pub struct Point...