SlideShare uma empresa Scribd logo
1 de 77
HTML5 as a Game Console Michał Budzyński @michalbe
Who is this guy? JavaScript Developer from  Warsaw, Poland @michalbe
Open Web Game Developer Who is this guy? @michalbe
Organizer of onG ameStart @onGameStart http://ongamestart.com Who is this guy? @michalbe
Creator of CSS Nyan Cat & other ridiculus web demos http://michalbe.github.com/css-nyan-cat/ Who is this guy? @michalbe
W3C HTML5 GameDev c oach Who is this guy? @michalbe
What about games? @michalbe
History @michalbe
1999 – Scott Porter ,[object Object],History @michalbe
[object Object],@michalbe History @michalbe
[object Object],@michalbe History @michalbe
2004 – Crisp DHTML Lemmings elizium.nu/scripts/lemmings History @michalbe
2003 – Jacob Seidelin 14KB Super Mario javascriptgaming.com nihilogic.dk
[object Object],@michalbe History @michalbe
[object Object],History @michalbe
2008 – Martin Kool Sarien sarien.net History @michalbe
2008  Andreas Rosdal FreeCiv freeciv.net History @michalbe
2010 - HTML5 History @michalbe
DOM Canvas SVG WebSockets CSS WebGL etc. HTML5 @michalbe
JavaScript® is our language and DOM is our library. Simple event handling Still faster than Canvas or SVG HTML5 - DOM @michalbe
Simple drawing API Image manipulation No support for events or redrawing of a particular element http://www.benjoffe.com/code/games/torus/   HTML5 - Canvas @michalbe
3D graphics in 2D world Origami3D  http://projects.mariusgundersen.net/Origami3D/examples/   HTML5 - Canvas @michalbe
CSS support Support for events Libraries like Raphaël JS HTML5 - SVG @michalbe
Massively Multiplayer games Rawkets http://rawkets.com HTML5 - WebSockets @michalbe
XHR Long polling JSONP polling Forever iframes FlashSockets (fuuuuuuuuuu!) WebSockets HTML5 - WebSockets @michalbe
One to rule them all! HTML5 - WebSockets @michalbe
One to rule them all! HTML5 - WebSockets @michalbe
How to use Socket.io without server-side parts of our games? HTML5 - WebSockets @michalbe
How to use Socket.io without server-side parts of our games? We cannot. HTML5 - WebSockets @michalbe
EasyWebSocket - a WebSocket client to broadcast messages to webpages http://easywebsocket.org/ by @jerome_etienne HTML5 - WebSockets @michalbe
So EasyWebSocket is P2P browser connection! @michalbe HTML5 - WebSockets @michalbe
So EasyWebSocket is P2P browser connection! @michalbe NOPE! HTML5 - WebSockets @michalbe
Hardware accelerated transformations & transitions CSS Animations like a LEGO blocks Implementing of simple logic @michalbe HTML5 - CSS3 @michalbe
HTML5 - CSS @michalbe
[object Object],HTML5 - CSS @michalbe
[object Object],HTML5 - CSS @michalbe
HTML5 - CSS Programming in CSS? @michalbe
HTML5 - CSS Programming in CSS? Yes, CSS3 is Turing complete! ,[object Object],@michalbe
HTML5 - CSS Programming in CSS? Ok, but what about games in pure CSS? @michalbe
HTML5 - CSS It's possible! ,[object Object],@michalbe
HTML5 - CSS 3D engine in CSS? ,[object Object],@michalbe
3d context of Canvas The same API as OpenGL® Shaders! Model import, textures, etc. Awesome libraries like Three.js HTML5 - WebGL @michalbe
Brandon Jones  http://media.tojicode.com/q3bsp/   @michalbe HTML5 - WebGL @michalbe
HTML5 - CSS 2D in WebGL? @michalbe
HTML5 - CSS 2D in WebGL? ,[object Object],@michalbe
HTML5 - CSS 2D in WebGL? ,[object Object],@michalbe
Phobos Lab  http://www.phoboslab.org/log/2011/03/the-state-of-html5-audio   HTML5 Video & audio @michalbe
HTML5 Game Frameworks/Engines https://gist.github.com/768272 HTML5 @michalbe
GWT ports of Android™ games Rovio http://chrome.angrybirds.com/   HTML5 @michalbe
Mobile Web @michalbe
Native Web Apps for Palm® Devices Mobile Web @michalbe
Problem ? Mobile Web @michalbe
Problem ? Mobile Web @michalbe
Solution? Mobile Web @michalbe
Web technologies! http://en.wikipedia.org/wiki/Mobile_application_development Mobile Web @michalbe
Geolocation Vibration Accelerometer Sound (play & record) !! Camera Filesystem  Gestures & Multitouch SMS Mobile Web @michalbe
HTML5 mobile games outside the browser http://www.phoboslab.org/log/2011/04/ios-and-javascript-for-real-this-time Mobile Web @michalbe
http://www.appmobi.com/ Mobile Web @michalbe
Tools for mobile HTML5 development http://blackberry.github.com/Alice/ Mobile Web @michalbe
Tools for mobile HTML5 development http://xuijs.com/ Mobile Web @michalbe
Tools for mobile HTML5 development http://bly.sk Mobile Web @michalbe
@michalbe Nice, but why should I care? @michalbe
Nice, but why should I care? @michalbe
Nice but why should I care? @michalbe
Nice but why should I care? @michalbe
Nice but why should I care? @michalbe
Nice but why should I care? @michalbe
Nice but why should I care? @michalbe
Nice but why should I care? @michalbe
Nice but why should I care? @michalbe
Nice but why should I care? @michalbe
Nice but why should I care? Boot2Gecko wiki.mozilla.org/B2G @michalbe
HTML5 is the future @michalbe
HTML5 is the future @michalbe
http://html5games.com http://canvasdemos.com https://gaming.mozillalabs.com/ http://michalbe.blogspot.com http://twitter.com/michalbe http://onGameStart.com http://mibbu.eu What's next? @michalbe
http://onGameStart.com What's next? @michalbe
Questions?  Follow me on twitter: @michalbe @michalbe Thanks! @michalbe

Mais conteúdo relacionado

Mais procurados

Webware - from Document to Operating System
Webware - from Document to Operating System Webware - from Document to Operating System
Webware - from Document to Operating System
Channy Yun
 
Making the Mobile Web Work
Making the Mobile Web WorkMaking the Mobile Web Work
Making the Mobile Web Work
Terry Ryan
 

Mais procurados (20)

Introduction to WordPress REST API
Introduction to WordPress REST APIIntroduction to WordPress REST API
Introduction to WordPress REST API
 
Static Sites - Bringing Web 1.0 Back
Static Sites - Bringing Web 1.0 BackStatic Sites - Bringing Web 1.0 Back
Static Sites - Bringing Web 1.0 Back
 
A Beginner's Guide to WordPress - WordCamp Montreal 2012
A Beginner's Guide to WordPress - WordCamp Montreal 2012A Beginner's Guide to WordPress - WordCamp Montreal 2012
A Beginner's Guide to WordPress - WordCamp Montreal 2012
 
A Beginner's Guide to WordPress - WordCamp New York City 2012
A Beginner's Guide to WordPress - WordCamp New York City 2012A Beginner's Guide to WordPress - WordCamp New York City 2012
A Beginner's Guide to WordPress - WordCamp New York City 2012
 
Html 5
Html 5Html 5
Html 5
 
Project Phoenix - From PHP to the Play Framework in 3 months
Project Phoenix - From PHP to the Play Framework in 3 monthsProject Phoenix - From PHP to the Play Framework in 3 months
Project Phoenix - From PHP to the Play Framework in 3 months
 
III - Better angularjs
III - Better angularjsIII - Better angularjs
III - Better angularjs
 
IV - CSS architecture
IV - CSS architectureIV - CSS architecture
IV - CSS architecture
 
Solving problems one Plone package at a time
Solving problems one Plone package at a timeSolving problems one Plone package at a time
Solving problems one Plone package at a time
 
I - Front-end Spectrum
I - Front-end SpectrumI - Front-end Spectrum
I - Front-end Spectrum
 
II - Angular.js app structure
II - Angular.js app structureII - Angular.js app structure
II - Angular.js app structure
 
Extended slow parts
Extended slow partsExtended slow parts
Extended slow parts
 
A Beginner's Guide to Wordpress - WordCamp Montreal 2011
A Beginner's Guide to Wordpress - WordCamp Montreal 2011A Beginner's Guide to Wordpress - WordCamp Montreal 2011
A Beginner's Guide to Wordpress - WordCamp Montreal 2011
 
Webware - from Document to Operating System
Webware - from Document to Operating System Webware - from Document to Operating System
Webware - from Document to Operating System
 
Use atomic design ftw
Use atomic design ftwUse atomic design ftw
Use atomic design ftw
 
Tools that add drag & drop design in #wcraleigh
Tools that add drag & drop design in #wcraleighTools that add drag & drop design in #wcraleigh
Tools that add drag & drop design in #wcraleigh
 
Responsive webdesign
Responsive webdesignResponsive webdesign
Responsive webdesign
 
Making the Mobile Web Work
Making the Mobile Web WorkMaking the Mobile Web Work
Making the Mobile Web Work
 
Working local
Working localWorking local
Working local
 
Mixing Web Components - Paris Web Components - 2015 09-16
Mixing Web Components - Paris Web Components - 2015 09-16 Mixing Web Components - Paris Web Components - 2015 09-16
Mixing Web Components - Paris Web Components - 2015 09-16
 

Destaque

5 tips for your HTML5 games
5 tips for your HTML5 games5 tips for your HTML5 games
5 tips for your HTML5 games
Ernesto Jiménez
 
10 tips to get started with html5 games
10 tips to get started with html5 games10 tips to get started with html5 games
10 tips to get started with html5 games
Gregory Kukolj
 
Html5game presentation
Html5game presentationHtml5game presentation
Html5game presentation
randyhoyt
 

Destaque (12)

5 tips for your HTML5 games
5 tips for your HTML5 games5 tips for your HTML5 games
5 tips for your HTML5 games
 
Know yourengines velocity2011
Know yourengines velocity2011Know yourengines velocity2011
Know yourengines velocity2011
 
10 tips to get started with html5 games
10 tips to get started with html5 games10 tips to get started with html5 games
10 tips to get started with html5 games
 
Open Web Games with HTML5 & JavaScript
Open Web Games with HTML5 & JavaScriptOpen Web Games with HTML5 & JavaScript
Open Web Games with HTML5 & JavaScript
 
Html5game presentation
Html5game presentationHtml5game presentation
Html5game presentation
 
Don't worry, do automation
Don't worry, do automationDon't worry, do automation
Don't worry, do automation
 
PHP
PHPPHP
PHP
 
Database Design and Normalization
Database Design and NormalizationDatabase Design and Normalization
Database Design and Normalization
 
HTML5 Games with CreateJS
HTML5 Games with CreateJSHTML5 Games with CreateJS
HTML5 Games with CreateJS
 
Как писать на PHP и не стать быдло-кодером
Как писать на PHP и не стать быдло-кодеромКак писать на PHP и не стать быдло-кодером
Как писать на PHP и не стать быдло-кодером
 
NY HTML5 - Game Development with HTML5 & JavaScript
NY HTML5 - Game Development with HTML5 & JavaScriptNY HTML5 - Game Development with HTML5 & JavaScript
NY HTML5 - Game Development with HTML5 & JavaScript
 
Introduction to Go programming
Introduction to Go programmingIntroduction to Go programming
Introduction to Go programming
 

Semelhante a HTML5 as a game console

Koubei banquet 30
Koubei banquet 30Koubei banquet 30
Koubei banquet 30
Koubei UED
 
夜宴30期《HTML5 is coming》
夜宴30期《HTML5 is coming》夜宴30期《HTML5 is coming》
夜宴30期《HTML5 is coming》
Koubei Banquet
 
Image-ine That: Image Optimization for Conversion Maximization
Image-ine That: Image Optimization for Conversion MaximizationImage-ine That: Image Optimization for Conversion Maximization
Image-ine That: Image Optimization for Conversion Maximization
Yottaa
 

Semelhante a HTML5 as a game console (20)

Why HTML5 is getting on my nerves…
Why HTML5 is getting on my nerves…Why HTML5 is getting on my nerves…
Why HTML5 is getting on my nerves…
 
HTML5 & JavaScript Games
HTML5 & JavaScript GamesHTML5 & JavaScript Games
HTML5 & JavaScript Games
 
Go to hell Flash, we don't need you anymore! GothamJs
Go to hell Flash, we don't need you anymore! GothamJsGo to hell Flash, we don't need you anymore! GothamJs
Go to hell Flash, we don't need you anymore! GothamJs
 
Html5
Html5Html5
Html5
 
Echo HTML5
Echo HTML5Echo HTML5
Echo HTML5
 
Targeting Screens with HTML5, Flash & Native
Targeting Screens with HTML5, Flash & NativeTargeting Screens with HTML5, Flash & Native
Targeting Screens with HTML5, Flash & Native
 
Websockets
WebsocketsWebsockets
Websockets
 
Future of web_apps
Future of web_appsFuture of web_apps
Future of web_apps
 
Koubei banquet 30
Koubei banquet 30Koubei banquet 30
Koubei banquet 30
 
夜宴30期《HTML5 is coming》
夜宴30期《HTML5 is coming》夜宴30期《HTML5 is coming》
夜宴30期《HTML5 is coming》
 
Flash dead ?
Flash dead ?Flash dead ?
Flash dead ?
 
Change by HTML5
Change by HTML5Change by HTML5
Change by HTML5
 
Image-ine That: Image Optimization for Conversion Maximization
Image-ine That: Image Optimization for Conversion MaximizationImage-ine That: Image Optimization for Conversion Maximization
Image-ine That: Image Optimization for Conversion Maximization
 
GRADE 10 COMPUTER
GRADE 10 COMPUTERGRADE 10 COMPUTER
GRADE 10 COMPUTER
 
Making Native Browser Games in The Modern Age
Making Native Browser Games in The Modern AgeMaking Native Browser Games in The Modern Age
Making Native Browser Games in The Modern Age
 
Cross Platform HTML5 Mobile Development and the Firefox OS
Cross Platform HTML5 Mobile Development and the Firefox OSCross Platform HTML5 Mobile Development and the Firefox OS
Cross Platform HTML5 Mobile Development and the Firefox OS
 
Mobile html5
Mobile html5Mobile html5
Mobile html5
 
Enhance SharePoint with Responsive Web Design
Enhance SharePoint with Responsive Web DesignEnhance SharePoint with Responsive Web Design
Enhance SharePoint with Responsive Web Design
 
Making Native Browser Games in the Modern Age
 Making Native Browser Games in the Modern Age Making Native Browser Games in the Modern Age
Making Native Browser Games in the Modern Age
 
A Holistic Approach to HTML5 Game Design & Development
A Holistic Approach to HTML5 Game Design & DevelopmentA Holistic Approach to HTML5 Game Design & Development
A Holistic Approach to HTML5 Game Design & Development
 

Último

Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
 

Último (20)

Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
Top 10 Most Downloaded Games on Play Store in 2024
Top 10 Most Downloaded Games on Play Store in 2024Top 10 Most Downloaded Games on Play Store in 2024
Top 10 Most Downloaded Games on Play Store in 2024
 
HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation StrategiesHTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation Strategies
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
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
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
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
 
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
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
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 

HTML5 as a game console

Notas do Editor

  1. Web is not only our work, is our lifestyle. And there is alway a lot of fun in a life as well.
  2. Koucz