SlideShare a Scribd company logo
1 of 7
M8 – Events
Pablo Farias Navarro
@ZenvaTweets
https://zenva.com
Variables Arrays
Functions
Canvas
Conditionals
Loops
Events
OOP
Intro
Load event
LIVE CODING
Mouse events
LIVE CODING
Touch events
LIVE CODING
Finished game
CODE REVIEW
Coding Challenge!

More Related Content

Viewers also liked

Google Analytics for Dummies
Google Analytics for DummiesGoogle Analytics for Dummies
Google Analytics for Dummies
Tim Lelek
 

Viewers also liked (7)

Javascript & DOM - Part 1- Javascript Tutorial for Beginners with Examples
Javascript & DOM - Part 1- Javascript Tutorial for Beginners with ExamplesJavascript & DOM - Part 1- Javascript Tutorial for Beginners with Examples
Javascript & DOM - Part 1- Javascript Tutorial for Beginners with Examples
 
DIWE - Programming with JavaScript
DIWE - Programming with JavaScriptDIWE - Programming with JavaScript
DIWE - Programming with JavaScript
 
API for Beginners
API for BeginnersAPI for Beginners
API for Beginners
 
Google Analytics for Dummies
Google Analytics for DummiesGoogle Analytics for Dummies
Google Analytics for Dummies
 
Unobtrusive JavaScript with jQuery
Unobtrusive JavaScript with jQueryUnobtrusive JavaScript with jQuery
Unobtrusive JavaScript with jQuery
 
Maintainable JavaScript 2012
Maintainable JavaScript 2012Maintainable JavaScript 2012
Maintainable JavaScript 2012
 
Writing Efficient JavaScript
Writing Efficient JavaScriptWriting Efficient JavaScript
Writing Efficient JavaScript
 

More from Pablo Farías Navarro

Create Your First VR Educational App with Unity
Create Your First VR Educational App with UnityCreate Your First VR Educational App with Unity
Create Your First VR Educational App with Unity
Pablo Farías Navarro
 

More from Pablo Farías Navarro (10)

Unity and Microsoft Azure Cognitive Services - DIGITREK21 Workshop
Unity and Microsoft Azure Cognitive Services - DIGITREK21 WorkshopUnity and Microsoft Azure Cognitive Services - DIGITREK21 Workshop
Unity and Microsoft Azure Cognitive Services - DIGITREK21 Workshop
 
Unite Sydney - Xr Input Mapping
Unite Sydney - Xr Input Mapping Unite Sydney - Xr Input Mapping
Unite Sydney - Xr Input Mapping
 
Create Your First VR Educational App with Unity
Create Your First VR Educational App with UnityCreate Your First VR Educational App with Unity
Create Your First VR Educational App with Unity
 
Teacher Training Workshop - Game Development with Phaser
Teacher Training Workshop  - Game Development with PhaserTeacher Training Workshop  - Game Development with Phaser
Teacher Training Workshop - Game Development with Phaser
 
Creating Unity VR Experiences with 360 Content - Brisbane VR Hackathon 2017
Creating Unity VR Experiences with 360 Content - Brisbane VR Hackathon 2017Creating Unity VR Experiences with 360 Content - Brisbane VR Hackathon 2017
Creating Unity VR Experiences with 360 Content - Brisbane VR Hackathon 2017
 
How to launch a successful Kickstarter campaign
How to launch a successful Kickstarter campaignHow to launch a successful Kickstarter campaign
How to launch a successful Kickstarter campaign
 
HTML5 Mobile Game Development Workshop - Module 2 - HTML5 Developer Conferenc...
HTML5 Mobile Game Development Workshop - Module 2 - HTML5 Developer Conferenc...HTML5 Mobile Game Development Workshop - Module 2 - HTML5 Developer Conferenc...
HTML5 Mobile Game Development Workshop - Module 2 - HTML5 Developer Conferenc...
 
HTML5 Mobile Game Development Workshop - Module 1 - HTML5 Developer Conferenc...
HTML5 Mobile Game Development Workshop - Module 1 - HTML5 Developer Conferenc...HTML5 Mobile Game Development Workshop - Module 1 - HTML5 Developer Conferenc...
HTML5 Mobile Game Development Workshop - Module 1 - HTML5 Developer Conferenc...
 
How to launch a successful kickstarter campaign
How to launch a successful kickstarter campaignHow to launch a successful kickstarter campaign
How to launch a successful kickstarter campaign
 
HTML5 Mobile Game Development - Brisbane Game Technology Meetup 2015
HTML5 Mobile Game Development - Brisbane Game Technology Meetup 2015HTML5 Mobile Game Development - Brisbane Game Technology Meetup 2015
HTML5 Mobile Game Development - Brisbane Game Technology Meetup 2015
 

Recently uploaded

Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 

Recently uploaded (20)

Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt RobisonData Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 

JavaScript for Beginners workshop module 8 - HTML5 Developer Conference 2015

Editor's Notes

  1. . 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...
  2. 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)
  3. . Show also chrome dev tools and CSS for canvas full screen, viewport <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1"> canvas { width: 100%; } body { padding: 0; margin: 0; background-color: black; }
  4. . Main things to show: Load method to load sprites Goal Collision detection Game over and win game