Random number generation, Math object and methods, HTML elements in motion, setinterval and clearinterval

Size: px

Start display at page:

Download "Random number generation, Math object and methods, HTML elements in motion, setinterval and clearinterval"

Sydney Taylor
5 years ago
Views:

Lab04 - Page 1 of 6 Lab 04 Monsters in a Race Random number generation, Math object and methods, HTML elements in motion, setinterval and clearinterval Additional task: Understanding pass-by-value

The race is finished Winner: Monster 2 We can press the start button to begin. Then the monsters move in different velocities towards the right. (The button will be disabled when they start.

When the fastest monster has passed the goal (red vertical border on the right), the game is ended. The winning alert box will be shown (Figure 2).

1 Lab04 - Page 1 of 6 Lab 04 Monsters in a Race Random number generation, Math object and methods, HTML elements in motion, setinterval and clearinterval Additional task: Understanding pass-by-value Introduction In this lab you will create an animation which shows 3 monsters in a race: moving with random speed in the browser window from left to right. Figure 1. Before the race Figure 2. The race is finished Winner: Monster 2 We can press the start button to begin. Then the monsters move in different velocities towards the right. (The button will be disabled when they start.) While the monsters are in racing, we can press the stop button to pause them. Then press the start button again to make them continue. When the fastest monster has passed the goal (red vertical border on the right), the game is ended. The winning alert box will be shown (Figure 2). After we click OK, the webpage is reloaded to resume like Figure 1 for the next game to start. I. The Design A. There are 3 image tags (<img>) which show the monster images monster1.gif, monster2.gif, monster3.gif. These image tags are contained within the divisions (<div>) which represent their tracks. B. We use global variables to keep track of monster locations (x1, x2, x3) and to store their velocities (v1, v2, v3). C. At the beginning, these monsters are at the left (all x1, x2, x3 equal 0). When we click the start button, we will run a function called startanim() which initiates the animation: Hide the button; Assign random velocities to v1, v2, v3; Start the animation schedule (see D below). D. The animation is done by repeatedly executing a function (named move_a_step()) every 100 milliseconds. The move_a_step() function updates x1, x2, x3 and advances the monsters by one step accordingly. It also checks whether any monster has just won: If any monster has passed the destination, it shows the winning alert box and stops the animation schedule. For simplicity, if two (or three) monsters arrive at the same time, just show any one of them. E. During the race, when we click the stop button, the animation schedule will be cancelled and monsters will stop moving.

Lab04 - Page 2 of 6 II. Your Task 1. Download the initial HTML file from the course web. You will complete it in this lab. 2. Open it in the browser and Komodo Edit 7. 3. Study the code (Figure 3).

2 Lab04 - Page 2 of 6 II. Your Task 1. Download the initial HTML file from the course web. You will complete it in this lab. 2. Open it in the browser and Komodo Edit Study the code (Figure 3). The html elements for the first monster and its track are given. <body> <hr/>  (The background color and the goal (red line) are controlled by the given CSS code. You do not need to handle them.) <div id="track1"> <img src="monster1.gif" id="m1" /> </div> <hr/> </body> Figure 3. The given HTML file for you to complete. 4. Add html elements for the other monsters and tracks. Give proper IDs to them. Make sure they appear correctly as in Figure Add one button element below the monsters: <button type="button">start</button> Make sure it appears correctly as in Figure Add an ID and the onclick event handler to the button: <button type="button" >start</button> id="btnstart" Later we need to hide the button when the race starts. To do so we will refer to the button using this id. onclick="startanim();" We will write this function in next step. 7. Add the global variables and the startanim() function into the <script> </script> section as follows: Add Code <script> //ID of the animation schedule var idinterval; //velocities of monsters var v1, v2, v3; //locations of monsters; initially at the left margin var x1=0, x2=0, x3=0; //Start the animation function startanim() We will add some code here The value of this ID will be obtained when the animation schedule starts. The ID is required for terminating the schedule when the race is finished. Values of random velocities will be assigned when the animation starts. This line combines the below as one statement: var x1, x2, x3; X1=0; X2=0; X3=0; </script>

3 Lab04 - Page 3 of 6 8. In the startanim() function, add the following code. Given Code function startanim() document.getelementbyid("btnstart").disabled = true; v1= Math.floor(Math.random()*20)+5; //pick a random integer from 0 to 19; then add 5 v2= Math.floor(Math.random()*20)+5; v3= Math.floor(Math.random()*20)+5; idinterval= setinterval('move_a_step()',100); </script> Study the explanations below: We change the.disabled property to "true" to disable the Start button The Math object provides useful methods (functions) for Mathematics tasks: Math.random() - return a random value among 0.0 to (less than 1.0). Math.floor(x) - returns the floor of x. (Definition of floor(x): largest integer not greater than x) We use the setinterval function to run a piece of JavaScript code every 100 milliseconds: setinterval('..', 100) State the interval, in millisecond Specify the JavaScript code to be scheduled Thus, we write setinterval('move_a_step()',100); to call move_a_step() every 100 milliseconds. An ID of the created schedule is returned by setinterval(). This ID is required later when we terminate the schedule at the end of the race. Thus, we write idinterval = setinterval(..); to save the ID in the global variable, idinterval, for later use. 9. Add the move_a_step() function after the startanim() function as follows: Given Code //Advance locations of the monsters and check who wins (if any). function move_a_step() //Check for winner (given in next step) //Advance the locations x1+=v1; x2+=v2; x3+=v3; //Position the monsters document.getelementbyid("m1").style.left= x1+"px"; document.getelementbyid("m2").style.left= x2+"px"; document.getelementbyid("m3").style.left= x3+"px"; Study the explanations below: x+=v; is the abbreviation for x = x+ v; The.style.left property is the location of the left edge of the element. We can change it so as to move the element. E.g. we set it to "200px" to move it to 200 pixels from the left margin of its containing box. TEST the webpage - Click start and see the three monsters move. There is no way to stop them. Just close the browser window. Need help? Find the Lab helpers.

4 Lab04 - Page 4 of Add the following code to check for winner inside the move_a_step() function. New Code to Add var goal =document.getelementbyid("track1").clientwidth; function move_a_step() if (x1>=goal && x1==math.max(x1,x2,x3)) clearinterval(idinterval); alert("winner: Monster 1"); window.location.reload(true); return; if (x2.. ).. if (x3.. ).. Your task: Fill in these parts (similar to the above!!) x1+=v1; x2+=v2; x3+=v3; document.getelementbyid(.. document.getelementbyid(.. document.getelementbyid(.. Study the explanations below: "track1" is the id of the track of the first monster (See Figure 3: <div id="track1">). We get its width by referring to the.clientwidth property, which will be used as the goal of the race track. For each monster, if x >= goal and it is the farthest among others, then it is the winner. Math.max(..) - compare the arguments and return the maximum value. && - means "and",.. clearinterval(idinterval); window.location.reload(); return; - The simplest usage of an if-statement is to control whether one statement will run. However, when a winner is found we need to run more than one statements (-). In cases like this we can use.. to group them as a compound statement so that they will execute as a statement block when the if-statement is satisfied. - call the clearinterval function to stop the schedule whose id is given as idinterval. - reload the current webpage for playing the game again. - skip the remaining code inside this function and finish the function call. TEST the webpage - Click start and see who is the winner!! Need help? Find the Lab helpers. 11. Add one more button stop next to the start button: <button type="button" disabled>stop</button> 12. Add an ID and the onclick event handler to this button: id="btnstop" onclick="stopanim();" We will write this function in next step. 13. Add the following code inside the startanim() function to enable the stop button. document.getelementbyid("btnstart").disabled = true; document.getelementbyid("btnstop").disabled = false; New code to add

Lab04 - Page 5 of 6 14. Add a stopanim() function after the startanim() function.

5 Lab04 - Page 5 of Add a stopanim() function after the startanim() function. Complete the code inside to: 1 stop the schedule whose id is given as idinterval; 2 enable the Start button; 3 disable the Stop button. function stopanim() Your task: Finish this function (only 3 lines of code are needed) TEST the webpage - Click start and stop to start, pause and continue the race. Need help? Find the Lab helpers. Additional task: Understanding pass-by-value Download passbyvalue.html from the course web. Open it in the browser and Komodo Edit 7. It contains a button: Your task: <button type="button" onclick="testing();"> 1. Guess the result when line runs. It shows (10, 15, or..?) passbyvalue.html function addfive(input) input=input+5; function testing() var x; x=10; addfive(x); 2. Now click the button in the browser. What is shown? (10, 15, or..?) 3. Complete the following summary: [Given: passes, calls, a copy of x, the original value of x] alert(x); When the testing function the addfive function, it the value contained in x. The value of x is copied, and that copied value is named input within the addfive function. In the addfive function, changing the value of input is actually changing, which doesn't affect outside of the addfive function. So calling addfive doesn't accomplish anything. The above is known as pass-by-value. In most programming languages this is the default parameter-passing mechanism. Some require careful observations! Exit-Test - Complete the following summary. I. General Revision () - generate a random value between 0 and (less than 1.0) (x1, x2, x3) - return the largest value among x1, x2, x3 ("m()",100) - run m() every 100 millisecond (id) - stop a schedule whose ID is id - the x-coordinate of an element - the abbreviation for x = x+v; - rewrite var x; x=99; in one statement Given choices: Math.max Math.random clearinterval setinterval x+=v;.style.left var x=99; Pass-by-value - get a copy of the value of the argument only. Thus the caller's original value cannot be changed. - group several statements into one compound statement. continue on next page

6 Lab04 - Page 6 of 6 II. Mixing with return (Recall: return.. ; means return a value and stop the function; is or, && is and, == is for comparison) The function, compare1, is given on the right. It compares a, b, c and then returns "all same", "some same", or "all different". 1. Which one of the below will show "all same"? Put a in the box. alert( 'compare1("1,1,1")' ); alert( compare1("1,1,1") ); alert( "compare1(1,1,1)" ); alert( compare1(1,1,1) ); compare.html function compare1 (a,b,c) if (a==b && b==c) return "all same"; if (a==b b==c a==c) return "some same"; 2. Complete the descriptions below: 5 return "all different"; compare1(1,1,1): Run lines 1, 2 only (At line 1, it decides to enter line 2, at which it returns "all same" and the function is stopped) compare1(1,2,2): (At line 1, it decides to skip line 2 and proceed to line 3) Run lines 1, 3, 4 only compare1(1,2,3): Run lines only The function compare2, given on the right, always gives the same output as compare1. 3. Complete the descriptions below: compare2(1,1,2): Run lines 1,2,3,4,5,7; Change of the result variable: "all different" => "some same". Finally, "some same" is returned. compare2(1,2,3): Run lines ; Finally, " " is returned compare.html function compare2 (a,b,c) var result; result="all different"; if (a==b b==c a==c) result = "some same"; if (a==b && b==c) result = "all same"; return result; ** Show your answers to the Lab Helper. This is the end of the Lab. Please fill in and submit the Progress Sheet attached below. You have learnt a lot in this lab. If needed, please redo again and review all covered skills. You may then proceed to the Follow-up Reading and Activities for this Lab, which can be found at the course web. Lab04 - Progress Sheet Helper's signature : ( / ) dd mm Student name and EID : [E.g. Chan Siu Pang (spchan31)] Student belongs to : L (Lab session) e.g., L09 Remarks : e.g., late / not this group / join 2nd time Progress & performance - Rated by the student : [poor] [excellent] (Please circle) Rated by the helper : [poor] [excellent] References: 5: Very familiar with the contents. Easily complete the Exit-Test. 4: Spend effort to review through doing the Exit-Test. Afterwards, get 100% familiar with the contents. 3: Have basic ideas about all the contents after learning through the Exit-Test.

Task 1. Set up Coursework/Examination Weights

Task 1. Set up Coursework/Examination Weights Lab02 Page 1 of 6 Lab 02 Student Mark Calculation HTML table button textbox JavaScript comments function parameter and argument variable naming Number().toFixed() Introduction In this lab you will create