Lab 7: Moving images

Download this image of a jeep to the folder where you will write your HTML5/JavaScript program.

jeep for off-road drawing


Write a program that will simulate a jeep moving off-road over a terrain that is mostly green or brown.

1. Use CSS to set the background color of your canvas to the desired color.

2. Move the image of the jeep over the surface of the canvas, turning at least 5 times at different angles.

3. When the jeep turns, the image should be drawn so that the front of jeep is facing in the same direction as the current direction of movement. You will need to use a trigonometric function, such as arctan, to determine the angle of movement from the ratio of the amounts of vertical and horizontal movement.

4. Remember to use before your code that translates and rotates the coordinate system, and then use context.restore() after drawing with the translated coordinates.

5. If you have time, you may enhance the background of the terrain by loading an image or using a pattern, instead of using a plain color background.

-- RobertKasper - 2015-03-11

Topic attachments
I Attachment Action Size Date Who Comment
Jpgjpg jeepGray.jpg manage 1.8 K 2015-03-11 - 18:58 RobertKasper  
Topic revision: r1 - 2015-03-11 - RobertKasper
This site is powered by the TWiki collaboration platformCopyright &© by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding TWiki? Send feedback