Programming Games

Show your simple video. More video examples. Audio.

Classwork/Homework: Produce more complex video program.

Bouncing video

• Bouncing video element: http://faculty.purchase.edu/jeanine.meyer/html5/videobounceE.html

• Draws mask on canvas– Need to make sure canvas is on top.– Alternative is to modify video element using

CSS.

Audio

• situation similar to video: no one format recognized by all browsers.– mp3 and ogg

Simple audio

• Plus an image

• http://faculty.purchase.edu/jeanine.meyer/html5/simpleaudio.html

rock paper scissors (with audio)

• animation (setInterval), addEventListener for click, calculations to determine which throw, audio object

• http://faculty.purchase.edu/jeanine.meyer/html5/rockpaperscissorssounds.html

My thinking

• “the computer’s” turn to emerge from screen– Implement by making an image get bigger

and bigger, use setInterval for the animation

• Play sound corresponding to tie, or paper wafting over rock, or rock breaking scissors, or scissors cutting paper

But…

• Problem: sound played and score computed before computer move fully emerged!

• Solution: keep checking on size variable (a state variable) and when it is big enough– Stop animation– Play sound

• Put audio elements in body<audio autobuffer>

<source src="hithard.ogg" />

<source src="hithard.mp3" />

</audio>

• In init function: musicelements = document.getElementsByTagName("audio");

• In other code, determine which one: musicelements[musicch].play();

Parallel Structures

• “poor man’s database”

• Correspondence between choices and audio elements.

• The beats and musicch arrays are organized by computer move and then player move– If variable compch is computer move and i is

player move result = beats[compch][i];

Examine code

• http://faculty.purchase.edu/jeanine.meyer/html5/rockpaperscissorssounds.html

Other Bouncing ball video

• http://faculty.purchase.edu/jeanine.meyer/html5/videobounce.html

• Draws a frame from the video on the canvas

• Draws mask on canvas

jigsaw

• http://faculty.purchase.edu/jeanine.meyer/html5/jigsaw/jigsawdance.html

• Works on iPhone and iPad– Older iOS required user to click to start video.

Why do you think Apple did that?– Newer iOS does not require it.

• Works on Android

Critical requirements for jigsaw• Acquire video clip• Acquire first frame as image • break up into pieces and record positions of pieces

– Program needs to "know" the proper position.– NOTE: checking is done using a tolerance value.

• Program set up of event handling for mouse dragging AND for touch events

• Program moving (dragging) pieces around– does not use the new drag and drop features. Uses mouse

down, mouse move, and mouse up and touch equivalents.

• Program checking if jigsaw is (close enough) complete• Program playing of video

Note on checking in jigsaw

• “Close enough”, aka tolerance, aka margin of error, etc. is typical of games and other applications.

• We cannot expect players/users to position pieces precisely.– Precision can be factor defining level of game.

• Note: my jigsaw does allow completed puzzle to be anywhere in the window.

Execution time

• … when the document has been loaded and any JavaScript in the script element is running.

• Development time: when you are creating the program.

• Note: typically, the HTML document, including everything in the body element is created by you during development time and built when the document is loaded.

• It is possible to create html elements entirely by coding.

Jigsaw puzzle pieces• Each piece is HTML markup created dynamically (during

execution time).

s = document.createElement('piece');s.innerHTML = ("<img src='"+pieces[i]+"' id='"+uniqueid+"'/>");

document.body.appendChild(s); thingelem = document.getElementById(uniqueid);

x = piecesx[i] +100;y = piecesy[i] + 100;thingelem.style.top = String(y)+"px";thingelem.style.left = String(x)+"px";

Origami directions

• http://faculty.purchase.edu/jeanine.meyer/html5/origamifish.html

• Each of the steps is a function. Some functions draw on the canvas; two of the functions play video.

Aside

• I made decision on when to use– line drawing– Photograph– Video

• Gave up consistency for … better instruction

• What do you think?

Collage example

• Example manipulates video by extracting frames and drawing each on canvas over and over…

• http://faculty.purchase.edu/jeanine.meyer/html5/collagebase.html

• Note use of object-oriented programming

Other videos

• Re-positions (and keeps re-positioning) a video element along a path

http://faculty.purchase.edu/jeanine.meyer/html5/movingpictures.html

• Plays sections of a video clip http://faculty.purchase.edu/jeanine.meyer/html5/booktrip1.html

Preview

• Next topic is Google Maps API– Bring Google Maps functionality into YOUR

program.– The Application Programming Interface is a

set of objects that you/we can use, including map, marker, latlng, others.

• Note: I will show an example using Maps and video and audio.

Pop quiz

• Go online and find out how to play a video with no sound and play audio with sound.

• Write the answer AND the website(s) you used.

Classwork / homework

• More complex video example• Consider other posted examples

– Reward for play

• Will show Google Maps and video• Ask me for others!

• Enjoy the break!