Programming Games

Show your simple video. More video examples. Audio.

Classwork/Homework: Produce more complex video program.

Development example

• Goal: "coin toss" between two videos.• Educational goal: demonstrate working in

stages. Did not plan out steps.• Two videos:

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

• Tidied up (some): http://faculty.purchase.edu/jeanine.meyer/html5/videos1.html

Development example, cont.

• Added button, alerts, not much happening: http://faculty.purchase.edu/jeanine.meyer/html5/videos2.html

• Made videos hidden by style display: none), not much, etc.: http://faculty.purchase.edu/jeanine.meyer/html5/videos3.html

Development example, cont.• Stored references to videos, slight change in

alerts: http://faculty.purchase.edu/jeanine.meyer/html5/videos4.html

• Nearly done, inserted play code: http://faculty.purchase.edu/jeanine.meyer/html5/videos5.html

• Fixed bug about transitions: http://faculty.purchase.edu/jeanine.meyer/html5/videos6.html

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?– Chrome on newer iOS does not require it, but

Safari still does.

• 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.

Again: Margin for checking

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

• More general than jigsaw puzzles!

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.

Information on pieces

var pieces = [

"dan1.jpg","dan2.jpg","dan3.jpg","dan4.jpg","dan5.jpg","dan6.jpg" ];

var piecesx = [

0,71, 124,0,77,123 ];

var piecesy = [

0,0,0,72,72,72 ];

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

execution time) using names of image files, positions.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• Ask me for others!

• Preview: Google Maps and video. You can work on this later.