Coursework 1: JavaScript Animation Game– Post 2

In my last post regarding JavaScript animation I explained how to:

• Make an image move on screen by using JavaScript
• Identify the user’s browser screen size
• Make the image go back to its original position

Today I will start by simply adding how I managed to disable and enable HTML objects programmatically and then continue by explaining how I made my paper object go up and then back down, in-order to simulate a throw.

Disable any important controls programmatically while the animation is in process

While your animation is in process, you may want to disable some HTML objects to prevent the user from using them and later re-enable them when it’s safe to do so. I decided that I want to disable the ‘Throw’ button while the paper is moving, in-order to prevent the user from re-sending the throw command and re-enabling it when the user clicks on the ‘Restart’ button.

To do so I had to set the ‘Throw’ button’s name attribute, so I could reference it in my JavaScript code.

<input name="btnThrow" type="button" value="Throw" onclick="throwPaper();" />

To do so I had to do some research on how to access the ‘disabled’ attribute of an HTML element and I found my answer at CodeToad, so this is what you have to do:

1.   Place your element in an HTML form (<form></form>) as this will only work on elements within the form tags. (N.B. – You have to set the form’s name attribute in-order to reference it).

2.   Set the element’s name attribute, as I did with my ‘Throw’ button.

<form name="MainForm">
   <input name="btnThrow" type="button" value="Throw" onclick="throwPaper();" />
</form>

3.  Reference the element using the values you given in the name attributes like so:

//disables the 'Throw' button

document.MainForm.btnThrow.disabled=true;

4.  Now you want this code to be executed when a certain event takes place, so I’m just going to insert it in the function the ‘Throw’ button calls when clicked, which is ‘throwPaper()’.

To re-enable the element is just a simple matter of changing the Boolean value from “true” to “false” like so:



//makes sure the 'Throw' button is enabled   
document.MainForm.btnThrow.disabled=false;

Again, you want to execute this code when a certain event occurs, so I just put it in my ‘start()’ function, as this is called by the ‘Reset’ button when clicked on.

So there you go, now you know a way how to programmatically disable and enable HTML form elements

Make the paper go up and then back down

Up till now I have managed to get my paper to go in a straight line, but want to be able to throw it into a bin, therefore I need to make it go up and at some point get back down. To do this I could implement a function which works out a quadratic equation and passes the exact coordinates to my ‘move()’ function, this would make my paper ball travel in a perfect arch rather than a straight line, I could also make the quadratic equation function receive parameters to simulate different angles and force, but to keep matters simple I thought of a different way which I will now explain.

My paper ball is set to move 10 pixels to the right, every time I call the function ‘move()’, now if I make it go up a number of pixels, while still maintaining the movement to the right, my paper ball would move diagonally from the bottom-left of the screen to the top-right, thus simulating lift. But my paper ball can’t just keep on going upwards, I mean common it’s a paper ball…not a helium balloon!

So at some point I want to stop moving it upwards and start moving it downwards. To identify this position I started out by establishing a position of where I want my paper to land and that was the bottom-right corner. So I used the browser’s screen width, which is now being stored in a global variable called ‘screenW’ thanks to the ‘getScreenSize()’ function I mentioned earlier, deducted 40 pixels from it in-order to compensate for the table and div elements’ borders, divided it in half and stored it in a global variable named ‘middleX’, as this point is the middle of the x-coordinate range.

//determines the middleX value
middleX = ((screenW-40)/2);    

I placed this calculation in the 'start()' function as I don't need to calculate this position every time I shoot. Now that I have the point where I want my paper ball to start dropping down, naturally I now need to establish the middle of the y-coordinate range so I declared a global variable called ‘middleY’ and stored a value of 250 (N.B. - The height of the game area will be 400 pixels,  you might be thinking that 250 isn’t the middle of the y-coordinate range, but I did this to amplify the upwards movement, as I will explain shortly). 

But I still haven’t decided how much I am going to raise up the paper ball every time I call the ‘move()’ function. To work this out, I divide the value in ‘middleY’ with the value in ‘middleX’, multiply them with the amount of pixels the paper will move to the right (which I have now stored in a global variable called ‘Xpaces’)and multiply the answer with 2, in-order to make the paper ball reach the maximum height possible. 

//calculate the yPaces

yPaces = ((middleY/middleX)*xPaces)*2;

I have now established this value and stored it in a global variable called ‘Ypaces’, but it is important to think a bit where to carry out this summation. If I placed it in the ‘move()’ function my application would still work, but this would also mean that the user’s machine will work out this summation every time the this function is called (with a screen width of 1240 pixels and an X pace of 10 pixels, that would amount to 124 times) and that results to wasted processing power and bad performance. So I decided to place it in the ‘throwPaper()’ function, this way the summation is carried out only once and the value is stored globally so it can be reached from within the ‘move()’ function.

Once I have established the amount of upward pixels my paper should move and the point in which it should start to come down, all I have left to do is  make the necessary changes in my ‘move()’ function like so:

//checks the number of available moves left.
//if moves are still available, move the paper.
//else stop the interval.
function move(){
     //get paper's current location
     var paperXLocation = parseInt(myPaper.style.left);
     if(availableMoves > 0){//still have moves available
           if(paperXLocation<middleX){//paper goes up
                 myPaper.style.top = parseInt(myPaper.style.top) - yPaces+'px';//move paper up
           }else{//paper goes down
                 myPaper.style.top = parseInt(myPaper.style.top) + yPaces+'px';//move paper down
           }
           myPaper.style.left = parseInt(myPaper.style.left) + xPaces + 'px';//move paper right
     }else{//no more moves left
           availableMoves--;
     }
}

What I am doing here is:

1.       Get the paper’s current location.

2.       Check if there are any available moves left.

a.       If moves are still available:

                                                   i.      Check if the paper has reached the point of going down

                                          1.       If not, move the paper up yPaces

                                                    2.       Else, move the paper down yPaces

                                                   ii.      Move the paper to the right xPaces

b.      Else, stop the motion interval.

3.       Reduce the amount of available moves by 1.

The image below illustrates the progress so far for today:

This post describes how the 'Throw' button is disabled/re-enabled and how
 I made the paper ball go up and down while still moving to the right.

That’s it for now, in my next post I will discuss how I handle collision detection and how I provide the user with a way to change the shooting angle. Hope you enjoyed reading this post.