Coursework 1: JavaScript Animation Game– Post 4

In this post I will explain how I decided to implement the following tasks to the paper tossing game I have created while writing this blog:

1. Provide the user with control of the throwing power
2. Make the paper ball roll while moving through the air

Provide the user with control of the throwing power

In my last post on this subject I explained how I took the value containing the middle of the game area and tweaked it in-order to alter the shooting angle. This I found this to be a simple solution, so for me to implement a control on the shooting power, I decided to do the same but on the y-axis this time.

As I had stated in my second post on this subject, I stored a value of 250 in my global 'middleY' variable and used it in the calculation of the 'yPaces' value. I had also stated that I stored 250 and not 200, to amplify the upwards movement of the paper ball, so as you might have already figured out, altering the value of this variable would replicate different levels of throwing power.

As a control interface I added another <SELECT> element and stored nine different <OPTION> element within it, each representing a different power level, like so:

Power:<select id="powerSelector" title="Power">

                <option value="225">80 psi</option>

                <option value="150">70 psi</option>

                <option value="75">60 psi</option>

                <option value="25">50 psi</option>

                <option value="0">40 psi</option>

                <option value="-25">30 psi</option>

                <option value="-75">20 psi</option>

                <option value="-150">10 psi</option>

                <option value="-225">0 psi</option> 

</select>

Just like in my previous post, I gave the <SELECT> element a unique identifier, so I could later reference it and to alter my 'middleY' variable a gave each <OPTION> element a value attribute with different amounts. These amounts will be later used to increment or decrement my variable.

The next step was to alter once more my 'throwPaper()' function to connect this new user control to my JavaScript code. So, I referenced the newly created <SELECT> element via the document.getElementById() function, passing "powerSelector" as a parameter and stored its selected value by calling the object's value attribute and stored it in local variable 'power'. Once I have this object in memory I retrieved the selected value and increment it to the original value in global variable 'middleY'.

//gets the selected power and tweaks the middleY virtual poiter

//in-order to replicate a change of power

var power = document.getElementById('powerSelector').value;

middleY = middleY+parseInt(power);

I placed this code before the calculation of the yPaces and now, thanks to the altered 'middleY' variable, the throwing power can be adjusted by the user.

Make the paper ball roll while moving through the air

To make my paper ball roll I used a simple solution of making 16 copies in total, of the paper ball image and each one is rotated clockwise 22.5 degrees or 1/16 of a revolution (You could make more copies, each one rotating less than this amount for a smoother and quicker rotation).


Now that I have my paper ball copies, if I flick through them in sequential order I could see that the paper ball is rolling and this is what I decided to implement in my game.


To do this I had to change my paper ball's image continuously and sequentially in a loop, while the ball is moving and what better way to do this other than taking advantage of the loop which already exists in my application...That's right! I'm referring to the 'motion' interval that gets started when the user clicks on the Throw button.


The 'motion' interval calls my 'move()' function every 40 milliseconds and I want my paper to rotate while it is moving, therefore I had to implement this image changing code here. But this rotation feature can be classified as a function on its own, therefore I decided to create another function called 'rotatePaper()' and instead of implementing the code inside the 'move()' function, I simply call my new function.


To keep track of what image is currently being displayed I declared a global variable called 'paperImgCounter' and initialize it immediately with a value of 1. Below is the code in the 'rotatePaper()' function: 


function rotatePaper(){
     try{
           if(paperImgCounter !=17){
                 paperImgCounter = paperImgCounter +1;
           }else{
                 paperImgCounter = 1;
           }
           switch(paperImgCounter){
                 case 1:
                          myPaper.src = "paper1.jpg";
                          break ;

                 case 2:
                          myPaper.src = "paper2.jpg";
                          break ;

                 case 3:
                          myPaper.src = "paper3.jpg";
                          break ;

                 case 4:
                          myPaper.src = "paper4.jpg";
                          break ;

                 case 5:
                          myPaper.src = "paper5.jpg";
                          break ;

                 case 6:
                          myPaper.src = "paper6.jpg";
                          break ;

                 case 7:
                          myPaper.src = "paper7.jpg";
                          break ;

                 case 8:
                          myPaper.src = "paper8.jpg";
                          break ;

                 case 9:
                          myPaper.src = "paper9.jpg";
                          break ;

                 case 10:
                          myPaper.src = "paper10.jpg";
                          break ;

                 case 11:
                          myPaper.src = "paper11.jpg";
                          break ;

                 case 12:
                          myPaper.src = "paper12.jpg";
                          break ;

                 case 13:
                          myPaper.src = "paper13.jpg";
                          break ;

                 case 14:
                          myPaper.src = "paper14.jpg";
                          break ;

                 case 15:
                          myPaper.src = "paper15.jpg";
                          break ;

                 case 16:
                          myPaper.src = "paper16.jpg";
                          break ;
                 default:
                          paperImgCounter = 1;
                          myPaper.src = "paper1.jpg";
           }
     }catch(err){
           alert(err);
     }
}


What the above code does is first check if the 'paperImgCounter' has not reached 17. If it didn't, it increments it by 1, else it re-sets the counter to 1. Then a switch case statement changes the paper object's image according to the value in the counter.


The result of this code is represented by the image below:

Rotation of the paper ball during movement.

Conclusion


As much as I enjoyed this coursework, that's it for this blog subject, as a recap of what was carried out in the past four posts:

1. Make an image move on screen.
2. Identify the user’s browser screen size.
3. Make the image go back to its starting position.
4. Disable any important controls programmatically while the animation is in process.
5. Make the paper go up and then back down.
6. Collision detection.
7. Provide the user with control of the shooting angle.
8. Provide the user with control of the shooting power.
9. Make the paper ball roll while moving in the air.

    In the near future I would like to improve this application by 

• Implementing a function which works out a quadratic equation and returns the coordinates in-order to make the paper travel in an arch.
• Use GIF files for the paper ball image, without the white space around it, so I could set a background image to the game area.
• Replace the drop-down user controls with a pointer location function which would be used for the shooting direction and power, depending on how far the pointer is from the bottom left corner.

    I hope you found my posts helpful or interesting in any way. 

    

    Thanks for reading,

    Goodbye :)