Programming Games

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 <script> element • Processing: import • other: include • Invoke functions and access values • invoke objectmethods and reference objectproperties. • Create new things • use term new with constructor method • Use correct terminology, especially units • latitude longitude, specifically latLngobject

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 • 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!"

answer blah = new google.maps.Marker( {position: here, title: “Here you are”, map: map });

blah = new google.maps.Marker( {position: here, title: “Here you are”, map: map }); This uses the term new to create a new object, using the method google.maps.Marker This method takes an associative array: a set of named options. The value used for position is held in the variable here and the value for map (which map to place the marker) is the one in the variable map.

Video • To start video to be invisible and then play at specific time • perhaps as reward at a point in the game • perhaps to be a state in the virtual something • in the map portal applications, when player clicks near enough to a location • ? • Use Cascading Style Sheet and JavaScript

CSS overview • 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"

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 elementsvideo {display:none; position:relative;}

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 • Start thinking about original project • Post proposal on moodle proposal forum

Programming Games