Programming Games

Programming Games Recap on Google Maps. Classwork/Homework: Catch-up. Show simple Google Maps. Plan Google Maps application.

Map options • center of map: given as a Google Maps API latlng object. • type of map: given as a Google Maps API constant: TERRAIN, ROADMAP, SATELLITE • zoom level: number • more…

Lat lng units • Experiment to see how close values are. • Note: 100 degrees is the same as -80 (for latitude or longitude). • Google Maps API also provides ways to use addresses and also do reverse lookup (lat long to address)

HTML document in <head><script type="text/javascript" charset="UTF-8" src="http://maps.google.com/maps/api/js?sensor=false"></script> in <body><div id="place" style="width:600px; height:400px"></div>

somewhere in the code // Determine the base location: replace ??? with actual values mylat = ???; mylong = ???; blatlng = new google.maps.LatLng(mylat, mylong); myOptions = {zoom: 12,center: blatlng,mapTypeId: google.maps.MapTypeId.ROADMAP}; map = new google.maps.Map(document.getElementById("place").myOptions);

basic example • http://faculty.purchase.edu/jeanine.meyer/html5/basicmap.html

<!DOCTYPE html> <html> <head> <title>Basic map</title> <script type="text/javascript" charset="UTF-8" src="http://maps.google.com/maps/api/js?sensor=false"> </script> <script> function init() { blatlng = new google.maps.LatLng(41.04796,-73.70539); myOptions = { zoom: 14, center: blatlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("place"), myOptions); } </script> </head> <body onLoad="init();"> <div id="place" style="width:600px; height:400px"></div> </body> </html>

Spotlight • The spotlight program uses Google Maps event handling AND mouse on canvas events. Substitutes default cursor with image I made. Uses alpha for color. Creates a mask. http://faculty.purchase.edu/jeanine.meyer/html5/mapspotlight.html

Map and media • http://faculty.purchase.edu/jeanine.meyer/html5/mapvideos.htmlhttp://faculty.purchase.edu/jeanine.meyer/html5/mapmediaquiz.html • Associates positions with media. Player clicks on map. If close enough, media is presented. • Note use of CSS and coding to keep video, images, audio controls invisible until appropriate. • Quiz separate logic and content!

Mediaquizcontent.js • I separated program from content and mediaquizcontent.js is the name of the file holding the content, meaning the specification for the video at the locations. • You can’t easily see that. • You can read about it in HTML5 and JavaScript Projects in the Library.

var base= [41.04796,-73.70539,"Purchase College/SUNY"]; var zoomlevel = 13;

var precontent = [ [41.19991,-73.72353,"Esther at home","pictureaudio","estherT","esther.jpg"], [41.05079,-73.70448,"Lego robot ","video","maze"], [40.68992,-74.04460,"Fire works ","video","sfire3"], [41.8442,-89.480,"Aviva in Dixon","picture","avivadixon.jpg"] ];

var questions = [ "Where does Grandma Esther live?", "Show the Lego robot navigating a maze.", "Where are great fireworks?", "Find where Aviva played the flute.” ];

Street view • http://faculty.purchase.edu/jeanine.meyer/html5/mapstreet.html • Set location • More realistic example would have user/player make choices or click on screen or ??? • My code does • Allow for a street view (aka panorama) not existing • Note also heading and pitch. EXPERIMENT!

Callbacks • In many situations, action is not immediate, aka asynchronous • The code sets up an action AND specifies a function (by name or defined as autonomous function) to be called when action is complete. • This is the callback sv.getPanoramaByLocation(mtk,2000,processSVData); • The function processSVData does the remaining work.

Responsive Adaptive Design • What if I want this program to work…adapt…be responsive to different window sizes? • Various techniques • For this, I use percentages in the width and height property values: • <body onload=init();> • <div id="place" style="width: 48%; height: 80%"></div> • <div id="street" style="position:absolute; left:50%; top: 0px; width: 48%; height: 80%;"></div> • </body>

Examine code • http://faculty.purchase.edu/jeanine.meyer/html5/mapstreet.html • Note: init function • Create the SV object • Associative arrays for map and for panorama • The target DIVs for map and panorama set differently • Global variables • Required since not everything is done in the init function

NOTE • Callbacks are another type of event handling • Start or set up event • Specify code to handle (respond) to event • Applies to other features • See next: Geolocation • Using percentages and other Responsive Adaptive design techniques applicable to other situations

Slightly more complex example • More interactive: • user clicks on map • Program determines lat long and • Attempts to find a panorama • 2000 is hard coded as the allowable distance. This is 2000 meters. How big is this? • Proceeds like the basic program • http://faculty.purchase.edu/jeanine.meyer/html5/mapstreetplus.html

Note • Click on the map event is an event FOR the map • listener = google.maps.event.addListener(map,'click', markAndGetPano);

Geolocation • This is a standard that is separate from HTML5. • The browser uses what it can to determine location. • IP addresses • triangulation using cell phone towers • triangulation using GPS satellites • triangulation using wireless hot spots • ?

Geolocation example • Used with php to send email to someone with 'found' location. http://faculty.purchase.edu/jeanine.meyer/html5/geolocationkmemail.html

Re: the php file • The file sendemailp.php runs on the server, NOT the client (not the user’s computer). • It is written in the php language • You can’t look at it in the normal way! • You can find it in my HTML5 and JavaScript Projects book in the Library. • We learn to use php in the Creating Databases course (also Social Media)

Classwork / homework • Catch up • Produce your own simple = basic HTML and JavaScript document bringing in a map. Use your own location (and understand how to change it), set zoom and set type (and understand how to change it). • Plan and execute [slightly more] complex example.

Programming Games