22. Telling with Events
Use events to get notified when “something” happens
○ key on keyboard is pressed
○ mouse is moved
○ browser window is resized
○ ...and a lot more!
23. Hook up your events
document.addEventListener('mousemove', function (e) {
console.log(e.clientX, e.clientY);
});
Example
http://codepen.io/sethmcl/pen/zEGLy
24. Hook up your events
document.addEventListener('mousemove', function (e) {
console.log(e.clientX, e.clientY);
});
global object provided by the browser, entry point to the
web page which is currently loaded in the browser
Learn more
https://developer.mozilla.org/en-US/docs/Web/API/document
25. Hook up your events
document.addEventListener('mousemove', function (e) {
console.log(e.clientX, e.clientY);
});
method (function) that we can call to
“register” for a particular event
Learn more
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener
26. Hook up your events
document.addEventListener('mousemove', function (e) {
console.log(e.clientX, e.clientY);
});
name of event
Learn more
https://developer.mozilla.org/en-US/docs/Web/Reference/Events
27. Hook up your events
document.addEventListener('mousemove', function (e) {
console.log(e.clientX, e.clientY);
});
function which is called when the event is “fired”
this function is called the “event handler”
Learn more
https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Event_handlers
28. Hook up your events
document.addEventListener('mousemove', function (e) {
console.log(e.clientX, e.clientY);
});
Learn more
https://developer.mozilla.org/en-US/docs/Web/Reference/Events/mousemove
event object, which contains
information about the event
30. Putting it all together
window.addEventListener('resize', function (e) {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// Note: resizing the canvas will also clear it
});
Example
http://codepen.io/sethmcl/pen/rsJGh
31. Homework
Think about the concepts we have
learned so far, and brainstorm an idea
for a game that you can make.
The output of this activity is not code,
but rather a list of ideas and some
drawings (pen and paper, powerpoint,
etc) that describes what you want to
build.