The animation is initialised prior to each race.
The odds of each horse wining the race are entered on the information board.
The odds are generated at random prior to each race.
It is possible for the same odds to be assigned to more than one horse.
The race course is divided into 3 zones: in the first zone each horse accelerates.
The acceleration values for each horse are generated randomly.
In zone 2, each horse travels at the speed it has when it leaves zone 1.
In zone 3, randomly generated accelerations are assigned to each horse.
The same randomly generated values can be assigned to more than one horse.
The horse positions are entered into the information board as they finish.
It is possible for horses to tie e.g. when two horses tie for first place, they are both assigned first place.
The horse that finishes next is assigned third place.
The outcome of each race is unpredictable, each race is different.
The horses are all placed on canvas c01-1.
A Simple Horse Racing Game
This simple animation uses six horses that race against each other.
The animation uses two canvases, c01 the bottom layer canvas and c01-1, and a second canvas layered above it.
Canvas c01 has a width of 800px and a height of 600px
The buttons Play, Pause, Repeat and Next are in a button zone on c01, they allow the user to control the animation.
The height of the button zone is 30px
The remainder of c01 is available for drawing and is called the drawing Zone. The height of the drawing zone = 800-30=770px.
Canvas c01-1 has a width of 800px and a height 770px: this allows the buttons on c01 to be clicked.
Canvas c01-1 has its background set to transparent.
The animation background is drawn on c01, which is never cleared during the animation.
Information about the race is displayed on a board, each horse is identified.
The horses are created from jpeg images, which have been resized.
The horse images have been saved in png format and their backgrounds have been set to transparent.
