Programming Games
22
Programming Games Google Map API example. Audio example. Timing. localStorage. Classwork/homework: Catch up. Upload work. Show your [more] complex Google Maps API example. Plan your original project. Post proposal.
-
Upload
dolan-tran -
Category
Documents
-
view
18 -
download
3
description
Programming Games. Catch up. Show your Google Maps API script. CSS. Classwork/homework: Catch up. Plan your original project. Reprise on Google Map (or any) API. Using English and computer jargon bring in / connect with Google JavaScript: external element Processing: import - PowerPoint PPT Presentation
Transcript of Programming Games
Programming GamesGoogle Map API example. Audio example. Timing. localStorage.
Classwork/homework: Catch up. Upload work. Show your [more]
complex Google Maps API example. Plan your original project. Post
proposal.
Timing in games
• Keep track of time and use that for score, usually lower the better, but not always.nowS = new Date();
startTime = nowS.getTime();
….
nowE = new Date();
endTime = nowE.getTime();
Elapsed = endTime = startTime;
Time limit
• Use setTimeout
limitId = setTimeout(gameOver,10000);
….
function gameOver() { }
…
To stop this event, clearInterval(limitId);
Storing information • Can store information on the [client] player's
computer.• Older JavaScript method: cookies. Still valid.
Newer, HTML5 version, localStorage• Called key-value pairs (aka name-value)
col = …: localStorage.setItem("myColor",col);
…
lastcolor = localStorage.myColor;
On localStorage
• Values are Strings, so numbers must be converted to and from Strings.
• Uses include:– Best score so far– Preferences by player– Interim state of game
• Can combine many items into one (long) String using various functions: JSON, join
General use• Cookies and localStorage can only be
accessed by program from same domain.• Cookies and localStorage are stored by the
browser.• Cookies and localStorage are ways that
companies store information about you.• Basis of customized advertising.• You can look up to see all the cookies, etc.
stored on your computer.
Cascading Style Sheet
• <style> element in <head> section
• Styles start with identifier indicating what is to be styled. Can be an element type or a class or an id.
• So the following applies to all video elements
video {display:none; position:relative;}
CSS• The <style> section has directives for
specific elements by id OR types OR classes
video { } all videos
img { } all img elements
#place { } the single element with id="place"
.notes { } all the elements that have class="notes"
Google maps API example
Bouncing video element on top of map.
Responsive design for screen dimensions.
Use border-radius to round corners of video.
Mute sound.
http://faculty.purchase.edu/jeanine.meyer/html5/videoBounceEonMap.html
Strong suggestion (repeat)
• Study the “development example” sequence.
• Bouncing video on a map took from simple map and from bouncing video.
• Did NOT use canvas to draw mask. Instead, used border-radius.
Development example
• Goal: "coin toss" between two videos.
• Work iteratively. Did not plan the steps!
• Two videos: http://faculty.purchase.edu/jeanine.meyer/html5/videos.html
• Tied up (some): http://faculty.purchase.edu/jeanine.meyer/html5/videos1.html
Development example, cont.
• Added button, alerts: http://faculty.purchase.edu/jeanine.meyer/html5/videos2.html
• Made videos hidden by style display: none): http://faculty.purchase.edu/jeanine.meyer/html5/videos3.html
Development example, cont.• Stored references to videos, slight change in
alerts: http://faculty.purchase.edu/jeanine.meyer/html5/videos4.html
• Nearly done, inserted play code: http://faculty.purchase.edu/jeanine.meyer/html5/videos5.html
• Fixed bug about transitions: http://faculty.purchase.edu/jeanine.meyer/html5/videos6.html
[very annoying] Buzzing bee
http://faculty.purchase.edu/jeanine.meyer/html5/eyesfollowrecord.html•Mouse cursor•Audio•Record positions and then move element on path•Coding to adapt to devices•Note: bee is displayed by two different mechanisms: cursor and moving element
Reprise on Google Map (or any) API
Using English and computer jargon• bring in / connect with Google
– JavaScript: external <script> element– Processing: import– other: include
• Invoke functions and access values– invoke object methods and reference object properties.
• Create new things– use term new with constructor method
• Use correct terminology, especially units– latitude longitude, specifically latLng object
Google Maps API
• Look at Google Maps API V3 tutorial: http://code.google.com/apis/maps/documentation/javascript/tutorial.html
• Prepare your own application– your location, map type, zoom
• Also title, icon, ….• experiment with changing options
• You can build a more elaborate example for your original project– Look at my examples.
• can add to existing project
– Look at examples in tutorial
Note
• APIs are and will become increasingly important.
• APIs often have objects– Provides methods and attributes (properties)– also events and ways to set up event handling– need to understand (manage) the JavaScript
events and the API events.
• You need to be able to read sources.
Pop quiz
• Look on-line and write code to produce a marker at a position stored as a latlng object in a variable named here. Your code already has created a map stored in a variable named map. The title should be "Here you are!"
• Mark center with your own icon, say an image in the file littlex.png.
HTML and JavaScript• In the <body>
<video id="maze" …> … </video>• In the code, perhaps the init function:
mazev = document.getElementById("maze");
• In the code, when you want the maze video to play:mazev.style.display="block";mazev.currentTime = 0;mazev.play();
CSS and JavaScript
• CSS specify absolute position or relative to where element is in the body element
• and JavaScript can change– e.style.left = ….;
e.style.top = ….;
• CSS has z-index
• and JavaScript has zIndex
CSS rotating
• You could make all the videos that you need to rotate have a class attribute (YOU name it)<video class="fix" …>
• In CSS.fix {-webkit-transform: rotate(90deg);
-moz-transform:rotate(90deg);
-o-transform:rotate(90deg);
transform:rotate(90deg);}• Note: you may need to do some positioning, also…
Classwork / homework• Update your website
– Upload all necessary files. This includes all the video files.– Modify your index.html
• Start thinking about final project.– Your work!– You can use Google Maps API.– If you want to use another API, discuss with me first to get
approval.
• Post proposal on moodle proposal forum. Check for my approval and advice.
