Embed Size (px)
DESCRIPTION
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 - PowerPoint PPT Presentation
Citation preview
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.
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
Warning
• Sometimes STILL problems with different browsers.
• What browsers accept has changed. Sometimes order of videos matter.
• Extra credit opportunity for solutions.
Map and media
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
• Examine code• You can read about it in HTML5 and
JavaScript Projects in the Library.
Technique
• Created template for what the HTML should do.
• videotext1, videotext2, videotext3
• This is advantage when I need(ed) to change code because of browser issues.
videomarkup = videotext1+videotext2+videotext3;
videomarkup = videomarkup.replace(/XXXX/g,name);
divelement.innerHTML = videomarkup;
document.body.appendChild(divelement);
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 which will be offered Spring 2017.
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.
