1 / 8

Programming Games

Learn how to get the position of the mouse on a canvas and see examples for use with touch. This concept requires different approaches for different browsers. Review the examples and prepare for a final quiz.

ruthaj
Télécharger la présentation

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 Mouse position. Examples. Review for final quiz. Classwork: Catch up. Finish final project. Show notebook. Homework: Upload project(s). Update index.html and send me the link.

  2. How to get the position of mouse on canvas • [See examples for use with touch.] • Approach in early days required differences for different browsers. • "Modern" way uses bounding rectangle: • Global variable: canvasrect; • In init function,canvas1 = document.getElementById("canvas"); canvasrect = canvas1.getBoundingClientRect();

  3. Position of mouse, summary • Global variable: var canvasrect; • In init function,canvas1 = document.getElementById("canvas"); canvasrect = canvas1.getBoundingClientRect(); • In function set up to respond to a mouse event:function mousestart(ev) { sx = ev.clientX-canvasrect.left; sy = ev.clientY-canvasrect.top; …}

  4. Silly bee eating game • http://faculty.purchase.edu/jeanine.meyer/html5/chasingStuff.html • Use parts for your own game. • Note: I added the alert at the start because I forgot how to play the game.

  5. Braiding • Demonstrate on desktop and on iPad. • http://faculty.purchase.edu/jeanine.meyer/braidmenu.html • Use what is termed "2 and ½ D " • Liked the shaking. Note: you can view all the source code on a desktop computer.

  6. Questions for final? • Review guide for final. • Review lecture charts. • Questions? • Be on time.

  7. Other computing courses • Introductory • Computer Science I • Introduction to Programming with Max • Programming for Visual Artists • Next semester • Creating Databases for Web Applications • Other: CS II, Data Structures, Creating User Interfaces, Networking & Security, Topics in Advanced Computing, Social Software, Mobile Media • Math + computing: Calculus III, Numerical Analysis, OR & Data Science, Number Theory

  8. Classwork/homework • [Catch up] • Show your final project! • Upload work and • Update your index.html file and • Send to me.

More Related