My Animation
For my animation I decided to create
a scene with a cannon and a ship approaching the cannon. When the mouse is over
the background, the ship starts to move towards the cannon. Meanwhile, the
cannon’s angle follows the mouse. When the mouse is clicked, dragged and
released, the cannon fires a bomb in a projectile motion, with the angle of the
projectile motion taken from the angle of the cannon and the velocity taken by
the distance between the mouse down position and the mouse up position.
Constructing the scenery
The application scenery is made up of several HTML divs. There are 5 divs in total. The first div contains the background image. All the others divs are contained within the first div. There is a div for the cannon, for the bomb, for the ship, and also for the explosion which is hidden on window load. By using CSS to determine the style of the divs, the final product was very nice.
Using CSS 3
I am using CSS 3 to position the
divs in an absolute position in the browser and also to set other particular
details. I am using several properties such as position, left and top, width
and height, background-image and z-index. I am using position: absolute so that
the divs would not move around within the browser. Left and top are used to determine
the position of the div in relation to the top left corner of the browser
window. Width and height are used to determine the size of the div.
background-image is used to define the properties of the div where images are
concerned. I am using the property url() to pass the url of the image to the
div.
I am also using the
background-repeat property with the value no-repeat so that the image will not
be repeated. I am using z-index property to give a sense of layers so that the
divs will be positioned behind each other as needed. The background div has an
index of 0 so that it will be at the back. The cannon has a larger value than
the bomb so that the bomb will appear to be going out of the cannon. The last static property I am using is the
visibility property. This is used to declare a div visible or hidden. I have a
div with an explosion that I want to start as hidden and this is defined in the
style sheet.
Another small trick is when the
player looses the game. When the ship reaches the cannon base, the image is
replaced to show that the game is over. This is done by replacing the image of
the div by using JavaScript to change the CSS value of the background-image.
Using Transformations of CSS 3
A very nice feature of CSS 3 is
the transformation. I found this a very important feature for my animation. I
am using transformations mainly to rotate the cannon, but I can also use it to
move the ship and the bomb. One important aspect to understand is that
transformations work different in different browsers. As a matter of fact there
are four transformation properties, one for Webkit browsers, another one for Mozilla,
for Opera and also for Internet Explorer. This means that in order for the
animation to work on the different browsers, special code has to be written for
each browser.
For this particular animation I
am only doing two transformations: changing the rotation of the div and also
changing the origin of the div. The angle of the div is changed so that the
cannon aims at the mouse position. The origin of the div is changed so that the
cannon rotates on his back part making the animation more realistic. If it
rotates on the centre, it would seem to be going into the rocks. Again,
transform-origin is also specified for each browser. The shift of the origin
can be done by using percentage or by using actual pixels.
|
28
|
-webkit-transform:
rotate(-0deg);
|
|
29
|
-webkit-transform-origin:
28% 50%;
|
|
30
|
-moz-transform:
rotate(-0deg);
|
|
31
|
-moz-transform-origin:
28% 50%;
|
|
32
|
-o-transform:
rotate(-0deg);
|
|
33
|
-o-transform-origin:
28% 50%;
|
|
34
|
-ms-transform:
rotate(-0deg);
|
|
35
|
-ms-transform-origin:
28% 50%;
|
Figure 2: Code to
move the origin and set the initial angle
Modify CSS with JavaScript
By using JavaScript, I was able
to change the style of the divs based on specific location of the mouse. This
was done by using the code:
document.getElementById(“element name”).style.property
= “value”
Using this piece of code I could change the angle of the cannon such as follows:
document.getElementById(“cannon”).style.webkitTransform = ‘rotate(-‘+angle+’deg)’;
This changes the value of the CSS of the element “cannon” to the value containing the value of the angle. One thing you may observe is the difference of the property when using JavaScript, webkitTransform, and when using CSS, -webkit-transform. There is a whole table of such differences, which can be found here: http://www.universalwebservices.net/web-programming-resources/javascript/modify-css-with-javascript
HTML Event Handlers
I needed the animation to be playable while the mouse is in the animation area. I am making use of HTML event handling to handle events such as onMouseOver, onMouseOut, onMouseDown, onMouseUp.
onMouseOver
This event triggers a function so
that the game will start or continue to play. This function is like an infinite
loop to keep the game going.
onMouseOut
This event triggers another
function to stop the game from playing. If the mouse goes out of the main div
area, the game stops running.
onMouseDown and onMouseUp
onMouseDown calculates the value of x and y of the mouse position on the div and stores it in a twp variables. onMouseUp a function is called and this calculates the distance between the point of mouse down and the point of mouse up using a mathematical formula called Pythagorean Theorem. This distance is then passed as the velocity to the function calculating the path of the bomb. This will be discussed in Part 2 of this blog.
These events are written in the
HTML for the div of the background:
<div id="content"
onMouseOver="rotate()" onMouseOut="mouseOut()"
onMouseDown="getInitial()" onMouseUp="projectile()"
draggable="false">
Figure 3: The bomb in
the air and the ship already moving
No comments:
Post a Comment