Programming games: Preparation guide for Final Quiz
Re-read the lecture notes. The bulk of the final quiz will be on the material since the
midterm, but there will be questions on the earlier material.
1. Define the programming concepts: variable, function, and array. Describe uses of
each in the class projects.
2. Describe the use of the different bracketing symbols in HTML and JavaScript: <
and >, ( and ), { and }, and [ and ].
3. Describe the programming concepts: objects, methods, attributes (aka properties).
Describe uses in the class projects (for example the Google Maps API project).
4. What does each html or JavaScript fragment do
a. <canvas id=”canvas1” width=”800” height=”600”>
Your browser doesn’t recognize canvas </canvas>
b. var head = Image();
head.src = “head.gif”;
c. ctx = document.getElementById(“canvas1”).getContext(“2d”);
ctx.drawImage(head,200,300,100,100);
ctx.drawImage(head,500,100,50,50);
d. canvas1 = document.getElementById(“canvas1”);
canvas1.addEventListener('click','toss',false);
e. ctx.clearRect(0,0,800,600);
5. Describe what is meant by events and event handling and how it is done in
JavaScript. This includes timing events (using setInterval and setTimeout);
events set up using addEventListener; and events specified as attributes in html
tags (e.g., onLoad, onClick, onMouseover, onSubmit).
6. Describe what is meant by a callback in performing geolocation.
7. Write the code for obtaining position information using geolocation (NOT
bringing in a map, just obtaining the latitude and longitude).
8. Write the code for a switch statement based on the variable mon which holds the
3 letter abbreviation for the name of a month. The code with set a variable
numberOfDays to 30, 28 or 31 based on the number of days in the month
indicated.
9. Describe in words the bouncing ball project: producing the animated effect and
implementing the bouncing. Show the setInterval statement and describe the
functions.
10. Describe how to change a bouncing circle to a bouncing image. Describe ways to
make the image NOT appear as a rectangle.
11. Describe how to change a bouncing circle to a bouncing video clip. Describe how
to make the video NOT appear as a rectangle.
12. Describe in words the cannonball project: producing the animated effect,
simulating gravity, the collision checking, and the use of the input for angle and
speed out of the cannon. Show the setInterval statement and indicate what
function it occurs in. Describe the functions.
13. Assume that v holds a reference to a video element. Write the code to make the
video display twice as wide and three times as tall as the original video.
14. Explain and contrast setInterval and setTimeout.
15. Describe how you would set up a time limit for a game of 3 minutes.
16. Describe how you would program a pause in a game, AND why it could be
necessary.
17. Describe, with English and lines of code, how to determine the elapsed time
between two points in your program.
18. Describe what is meant by native support of video and audio in HTML5.
19. What does the Miro application do and why is it necessary?
20. Sketch the HTML for a video element and an audio element and the role of the
different source elements. (You can indicate … following codecs=.)
21. Describe how to set up a video element in the body element and make it invisible
(using CSS in the style element) and then give the code for making it visible and
play.
22. Write the code for drawing a blue rectangle, 200 width, 150 height, in the upper
left corner of the canvas and a green square (trick question) with sides 125 in the
lower right corner, with the canvas 600 width and 400 height. Assume that ctx
holds the context.
23. Write the code for drawing a circle in the center of the canvas, with a purple
stroke and a pink fill, radius 60. The canvas is 800 width and 600 height. Assume
the variable ctx holds the context.
24. Assuming that the variable dance references a video element for which the CSS
specifies an absolute position, give the 2 statements that will re-position dance at
in the middle of a screen 1000 by 800 pixels.
25. Assuming the variable bird holds a reference to an <img> element defined in the
body element for which the CSS specifies an absolute position, give the 2
statements that will re-position bird at a random horizontal and vertical position
in a screen 1000 by 800 pixels.
26. Explain the units for Google Maps: latitude and longitude.
27. Explain what the following code fragment does (line by line) and what is the
name for the value assigned to variable a?
scores = [70,60,80,85,78];
sum = 0;
for(i=0;i<scores.length:i++) {
sum += scores[i];
}
a = sum / scores.length:
28. Explain the following code:
blatlng = new google.maps.LatLng(lat,long);
myOptions = (zoom: zoom, center: blatlng, myTypeId:
google.maps.MapTypeId.ROADMAP);
map = new
google.maps.Map(document.getElementById("place"),myOptions);
29. Explain the following code:
var rainclip = document.getElementById("stormy");
var sunclip = document.getElementbyId("sunshine");
…
if (weather=="rain") {
rainclip.play(); }
else {sunclip.play();}
…
<body>
<audio id="stormy">
<source src="stormy.mp3" type="audio/mpeg">
<source src="stormy.wav" type="audio/wav">
</audio>
<audio id="sunshine">
<source src="sunshine.mp3" type="audio/mpeg">
<source src="sunshine.wav" type="audio/wav">
</audio>
30. Write the code (it is just one JavaScript statement) to place a marker on a Google
Maps API map, where the variable mymap holds the already created map, the
variable, thisplace holds the place for the marker, the variable sym holds the
image element to be used for the marker, and the variable msg holds the text for
the marker title.
31. Describe what is meant by geolocation and how it is done using JavaScript.
32. Describe the function of localStorage in html5 and JavaScript.
33. Write the code for storing the value held in the variable myway as localStorage
with the name (key) “setting”. Write the code for extracting the value from
localStorage.
34. Describe what is meant by specifying a tolerance or margin in a game such as
putting together a jigsaw puzzle. Explain why it is necessary.
35. Explain what this code does. Assume ctx holds the canvas 2d context.
ctx.beginPath();
ctx.moveTo(ax,ay);
ctx.lineTo(cx,cy):
ctx.moveTo(bx,by):
ctx.lineTo(dx,dy);
ctx.strokeStyle = "blue";
ctx.stroke();
36. Describe the difference between a semantic and a syntactic error. Give examples
of each.
37. What is the purpose of z-Index and zIndex? Where is each one used?
38. Describe the display in certain browsers (Google Chrome, Opera) for this line
within a JavaScript form:
<input name=”color” type=”color” value=”#0000ff” />