1 / 21

Programming Games

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.

zed
Download Presentation

Programming Games

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Programming Games Show your simple video. More video examples. Audio. Classwork/Homework: Produce more complex video program.

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

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

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

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

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

  7. 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();

  8. 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];

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

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

  11. jigsaw • http://faculty.purchase.edu/jeanine.meyer/html5/jigsaw/jigsawdance.html • Works on iPhone and iPad • BUT requires user/player to click on forward button to play the video. Is this a bug or a feature? • Works on Android

  12. Critical requirements for jigsaw • Acquire video clip • Acquire first frame as image • break up into pieces and record positions of pieces • 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

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

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

  15. 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";

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

  17. Aside • I made decision on when to use • line drawing • Photograph • Video • Gave up consistency for … better instruction • What do you think?

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

  19. 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 cliphttp://faculty.purchase.edu/jeanine.meyer/html5/booktrip1.html

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

  21. Classwork / homework • More complex video example • Consider other posted examples • Reward for play • Will show Google Maps and video

More Related