Coursework 1 - Part 2

Welcome to the second part of the blog covering my animation for the coursework. This time I will be writing about the flow of the application and also about the algorithms used for the game to function well.  An important consideration here is Internet Explorer. Although caution was used to take into consideration the things that do not work on Internet Explorer, especially before version 9, some features do not work.

Get Mouse Position

The first part I did was to get the position of the mouse. This is a very important part since the mouse is used to play the game. A function was created to calculate the position of the mouse. Internet Explorer has a different way of getting the position of the mouse.

93	document.onmousemove = getMouseXY;

The code above shows the event handler to start the function to get the mouse position. The code in the function for calculating the mouse position is different for Internet Explorer and for the other browsers.

100	(event.clientX + document.body.scrollLeft)-80
101	388-(event.clientY + document.body.scrollTop)
104	e.pageX-80
105	388-e.pageY

The first two lines above get the coordinates of the mouse in IE while the other two lines get the coordinates for other browsers. For X position, I am then removing 80 pixels so that the mouse position is 0 when the mouse is directly at the top of the turning point (the origin) of the cannon. Also, the value of y is subtracted from 388. Again, this is done so that the 0 position of the Y is at right of the turning point of the cannon and increases as the mouse goes upwards. This is done because the usual 0 position of the mouse on the screen is just under the address bar of the browser. To make the animation simpler, negative values are translated into a 0. Also, this function calculates the angle of the mouse from the origin of the cannon. This is done by finding the inverse tangent of the Y value divided by the X value and multiplied by 180 divided by Pie.

Figure 1: Some coordinate examples

An object for the bomb is created. This object has values for x, y, radius r, velocity v, and angle theta. A value for g, gravitational acceleration is set to 9.8, while an initial value of 0 is set to a variable named framecount.

onMouseDown

When the mouse is clicked, a function is called to take in the original value of the mouse position in relation to the main div. Values for X and Y are stored in a variable to be used later on.

onMouseUp

A variable named tocheck of Boolean value is declared at the top with an initial value of false. This will be used to check if the bomb is already in the air. If the bomb has not landed yet, the cannon will not be able to fire again. When the mouse is release a function is called. The job of the function is to calculate the mouse position again and calculating a value for velocity using Pythagorean Theorem. This function also gives initial values to the bomb object of initial position, velocity, and angle. The function then sets the framecount to 0 and gives the value for the force in the horizontal direction and a value of the force in the vertical direction. From projectile motions in physics we know that an object moving in a projectile motion has both a horizontal force and a vertical force. Then the function changes the value of tocheck to true so that another function can now take care of the bomb.

153	vX = bomb.v * Math.cos(bomb.theta * Math.PI/180)
154	yX = bomb.v * Math.sin(bomb.theta * Math.PI/180)

The code segment above shows the force in the X direction and in the Y Direction. Afterwards this function sets the value of tocheck to true so that another function can start the animation of the bomb.

onMouseOver

The HTML event onMouseOver triggers a function which is responsible for the running of the animation. This is done by using a function called setInterval(). This function is constantly running when the mouse is over the main div. At the first part of this function JavaScript is used to change the value of the CSS of the cannon.

161	document.getElementById('cannon').style.webkitTransform = 'rotate(-'+angle+'deg)';
162	document.getElementById('cannon').style.MozTransform = 'rotate(-'+angle+'deg)';
163	document.getElementById('cannon').style.OTransform = 'rotate(-'+angle+'deg)';
164	document.getElementById('cannon').style.msTransform = 'rotate(-'+angle+'deg)';
165	document.getElementById("ship").style.left = shipx;

The code above changes the angle of the cannon according to the mouse position. There are four lines with a different CSS transform property so that this animation will work on the majority of the browsers. The last line sets the position of the ship across the sea. The value of shipx changes as the animation is running and that line sets that value to the CSS property and makes the ship moving.

When the onMouseUp function sets the value of the variable tocheck to true, is satisfies a condition in this function to start the movement of the bomb. If the value of x and of y of the bomb is within the div area, is calculates the position of the bomb. For the y displacement, it uses a mathematical formula s=ut + 1/2at². This is translated into JavaScript with the value of acceleration being the acceleration due to gravity. Since the 0 position of Y is at the top of the canvas, the calculated value of Y is subtracted from the initial value of Y. The position of X is calculated by multiplying the horizontal force to the framecount. The position of x and y is assigned to the div of the bomb by passing the values to the left and top properties respectively. This can be seen below.

169	bomb.y = startY - ( yX * frameCount - (1/2 * g * Math.pow(frameCount,2)) );
170	bomb.x = startX + vX * frameCount;
186	document.getElementById("bomb").style.left = bomb.x;
187	document.getElementById("bomb").style.top = bomb.y;

Then, an if condition checks if the bomb has hit the position of the ship. This is done by checking if the value of x of the bomb falls within the range of the starting and the ending x position of the ship. If the condition is satisfied, then an animated gif of an explosion is shown, an alert box says that You Won the game. Then the ship position is restored to the original and the speed of the ship is increased. The animated gif of the explosion is hidden again.

The last part of the animation checks if the ship has reached a particular position associated with the base of the cannon. If the ship comes too close, at an x position of 270, then image changes to another version of the ship with red sails saying game over. Then, an alert window says that the game is over.  Then the ship position and the ship speed are reset.

Figure 2: The end of the animation

onMouseOut

The HTML event handler calls a function to clear the animation thread so that the game stops running when the mouse is not over the main div.

This is the end of the first Coursework. Follow the link below to have a go yourselves

http://dbsolutionsmt.com/webapp/