M8 Events

Pablo Farias Navarro@ZenvaTweetshttps://zenva.com

Variables

Arrays

Functions

Canvas

Conditionals

Loops

Events

OOP

Intro

Load event

LIVE CODING

.

A very important concept in JavaScript is that of events. Events are used all over the place when making applications, interactive websites or games with JS.

The main concepts here are event listeners and callbacks. Let me illustrate this with an example. Birthday event...

Mouse events

LIVE CODING

Canvas is selected, listen for mousedown. Create functions for both move player and stop player

(Starter file needs to have player in it, also replace forEach for a for loop)

Touch events

LIVE CODING

.

Show also chrome dev tools and CSS for canvas full screen, viewport

canvas { width: 100%; } body { padding: 0; margin: 0; background-color: black; }

Finished game

CODE REVIEW

.

Main things to show:

Load method to load sprites

Goal

Collision detection

Game over and win game

Coding Challenge!