Video Game

Example

Suggested Starting Steps

Step 1: Make a box for the playing area, and put a character image in the box.

Step 2: Position the character image in the box.
Hint: If you're having trouble, rewatch the positioning video.

Step 3: Move the character in the appropriate direction when an arrow key is pressed.
Hint: Watch the keyboard events video.
Hint: Move the character by setting its left and top styles to new values.

Step 4: Prevent the character from leaving the box.
Hint: When an arrow key is pressed, check the character's position before moving it.

Step 5: Position another image in the box.

Step 6: Have the image move on its own.
Hint: If you're having trouble, rewatch the timing events video.

Step 7: Have something happen when the character touches the image.
Hint: Complete this illustration to understand the following collision detection function:
function touching(object1, object2) {
    var object1LeftSide = object1.offsetLeft;
    var object1RightSide = object1.offsetLeft + object1.offsetWidth;
    var object1TopSide = object1.offsetTop;
    var object1BottomSide = object1.offsetTop + object1.offsetHeight;

    var object2LeftSide = object2.offsetLeft;
    var object2RightSide = object2.offsetLeft + object2.offsetWidth;
    var object2TopSide = object2.offsetTop;
    var object2BottomSide = object2.offsetTop + object2.offsetHeight;

    var objectsTouchingHorizontally = object1RightSide >= object2LeftSide && object1LeftSide <= object2RightSide;
    var objectsTouchingVertically = object1BottomSide >= object2TopSide && object1TopSide <= object2BottomSide;

    return objectsTouchingHorizontally && objectsTouchingVertically;
}

Debugging help

Last topic Next topic