80 likes | 94 Views
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.
E N D
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.
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();
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; …}
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.
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.
Questions for final? • Review guide for final. • Review lecture charts. • Questions? • Be on time.
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
Classwork/homework • [Catch up] • Show your final project! • Upload work and • Update your index.html file and • Send to me.