programming games recap on google maps. creating elements. dynamic creation of elements (multiple...
TRANSCRIPT
Programming Games
Recap on Google Maps. Creating elements. Dynamic creation of elements (multiple video
elements). Geolocation.Classwork/Homework: Catch-up. Show
simple Google Maps. Plan Google Maps application.
Recap
• Access Google Maps API using external script element
• JavaScript code to bring in a map, with specific options, to a div element in the document.• Can have more than one such place.
Map options• center of map: given as a Google Maps
API latlng object.
• Holds latitude, longitude values
• type of map: given as a Google Maps API constant: TERRAIN, ROADMAP, SATELLITE
• zoom level: number
• icon: image marking center
• more…
Lat lng units
• Experiment to see how close values are.
• Compare: -80, +80, 280, -280, 180,…
• 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>
What comes next
• Examples of features you can use.
• Listen for general understanding, but don’t be overly concerned with details.
• Examine coding in the examples.
• Programs ARE putting together features based on your ideas and logic.
My ideasSet of maps, that is, locations
A combination of light and shadow moving with the mouse over a map
draw something on canvas, which would be transparent
My cursor (fluorescent light bulb)
Interactions with user (player)
Compute and report distances
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
Before next example: arrays
• Using an array of locations.
• This is an array of arrays. Inner arrays have 2 elements, holding latitude and longitude values, so….
locations[0][0] is the latitude and
locations[0][1] is the longitude
Events in Spotlight example• Make use of three events on canvas:
• ‘mousemove’ invokes showshadow• ‘mousedown’ invokes pushcanvasunder• ‘mouseout’ invokes clearshadow
• These are 3 functions I WROTE to draw spotlight & shadow centered at mouse; make map on top of canvas; clear the canvas.
• One event on the map:listener = google.maps.event.addListener(map, 'mouseup', function(event) { checkit(event.latLng); });
Drawing spotlight
… means drawing a path to be filled in with a color with an alpha setting
var grayshadow = “rgba(250,250,250,.8)”;
Remember: rgb(255,255,255) is white, so the graymatter variable indicates .8 opaque of something grayish…
Cursor
• Built-in cursors and your own cursors
can.style.cursor = “url(‘light.gif’),pointer”;
• Switches cursor for moving on canvas to be image I uploaded or, if not available, the built-in pointer.
• I also created & uploaded small red & black hand drawn x’s for icon in maps.
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.html http://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 tell that from outward display.
• Look at head element in code
• 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.”
];
var questions = [
"Where does Grandma Esther live?",
"Show the Lego robot navigating a maze.",
"Where are great fireworks?",
"Find where Aviva played the flute.”
];
Dynamic creation of elements
• New example inspired by student:http://faculty.purchase.edu/jeanine.meyer/html5/videogame/videogame.html
• Article and others: http://faculty.purchase.edu/jeanine.meyer/morehtml5examples.html
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!
Create element
• Use a template• May make substitutions• May put into innerHTML
• Need to addChild
• Need to position• Produce string for style.top and style.left. The
strings end in “px”
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>
Other responsive design technique
http://faculty.purchase.edu/jeanine.meyer/
In the <style> element, uses @media query and a class col of div.
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
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.
• PLUG: We learn to use php in the Creating Databases course
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.