Enviar pesquisa
Carregar
Building Windows 8 Metro Style casual games using HTML5 and JavaScript
•
Transferir como PPTX, PDF
•
2 gostaram
•
2,424 visualizações
David Isbitski
Seguir
Tecnologia
Diversão e humor
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 49
Baixar agora
Recomendados
Raphael
Raphael
Dmitry Baranovskiy
Fabricjs ppt
Fabricjs ppt
Cubet Techno Labs
Fabric.js — Building a Canvas Library
Fabric.js — Building a Canvas Library
Juriy Zaytsev
Living the Dream: Make the Video Game You’ve Always Wanted and Get Paid For It!
Living the Dream: Make the Video Game You’ve Always Wanted and Get Paid For It!
David Isbitski
Lap Around Azure Build Updates
Lap Around Azure Build Updates
David Isbitski
Azure Mobile Services for iOS
Azure Mobile Services for iOS
David Isbitski
Screencast dave dev-introtoask-andecho-july2015
Screencast dave dev-introtoask-andecho-july2015
David Isbitski
Html5 Canvas and Media
Html5 Canvas and Media
Suresh Balla
Recomendados
Raphael
Raphael
Dmitry Baranovskiy
Fabricjs ppt
Fabricjs ppt
Cubet Techno Labs
Fabric.js — Building a Canvas Library
Fabric.js — Building a Canvas Library
Juriy Zaytsev
Living the Dream: Make the Video Game You’ve Always Wanted and Get Paid For It!
Living the Dream: Make the Video Game You’ve Always Wanted and Get Paid For It!
David Isbitski
Lap Around Azure Build Updates
Lap Around Azure Build Updates
David Isbitski
Azure Mobile Services for iOS
Azure Mobile Services for iOS
David Isbitski
Screencast dave dev-introtoask-andecho-july2015
Screencast dave dev-introtoask-andecho-july2015
David Isbitski
Html5 Canvas and Media
Html5 Canvas and Media
Suresh Balla
Google I/O 2013 - Android Graphics Performance
Google I/O 2013 - Android Graphics Performance
DouO
Google I/O 2013 - Android Graphics Performance
Google I/O 2013 - Android Graphics Performance
DouO
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Ariya Hidayat
Fabric.js @ Falsy Values
Fabric.js @ Falsy Values
Juriy Zaytsev
HTML5 Graphics - Canvas and SVG
HTML5 Graphics - Canvas and SVG
David Isbitski
Advanced Silverlight
Advanced Silverlight
rsnarayanan
SVGo: a Go Library for SVG generation
SVGo: a Go Library for SVG generation
Anthony Starks
Drawing with the HTML5 Canvas
Drawing with the HTML5 Canvas
Henry Osborne
Intro to HTML5 Canvas
Intro to HTML5 Canvas
Juho Vepsäläinen
Understanding hardware acceleration on mobile browsers presentation
Understanding hardware acceleration on mobile browsers presentation
Justin Dorfman
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Ariya Hidayat
HTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the Web
Robin Hawkes
Canvas - HTML 5
Canvas - HTML 5
Jaeni Sahuri
Html5 Canvas Drawing and Animation
Html5 Canvas Drawing and Animation
Mindfire Solutions
2008 Sccc Inheritance
2008 Sccc Inheritance
bergel
Desingning reusable web components
Desingning reusable web components
Joonas Lehtinen
Intro to JavaFX & Widget FX
Intro to JavaFX & Widget FX
Stephen Chin
Mapping the world with Twitter
Mapping the world with Twitter
carlo zapponi
Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...
Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...
Codemotion
Desingning reusable web components
Desingning reusable web components
jojule
Hosting a WordPress Blog on Azure Websites
Hosting a WordPress Blog on Azure Websites
David Isbitski
Building Apps for the new Windows Store
Building Apps for the new Windows Store
David Isbitski
Mais conteúdo relacionado
Semelhante a Building Windows 8 Metro Style casual games using HTML5 and JavaScript
Google I/O 2013 - Android Graphics Performance
Google I/O 2013 - Android Graphics Performance
DouO
Google I/O 2013 - Android Graphics Performance
Google I/O 2013 - Android Graphics Performance
DouO
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Ariya Hidayat
Fabric.js @ Falsy Values
Fabric.js @ Falsy Values
Juriy Zaytsev
HTML5 Graphics - Canvas and SVG
HTML5 Graphics - Canvas and SVG
David Isbitski
Advanced Silverlight
Advanced Silverlight
rsnarayanan
SVGo: a Go Library for SVG generation
SVGo: a Go Library for SVG generation
Anthony Starks
Drawing with the HTML5 Canvas
Drawing with the HTML5 Canvas
Henry Osborne
Intro to HTML5 Canvas
Intro to HTML5 Canvas
Juho Vepsäläinen
Understanding hardware acceleration on mobile browsers presentation
Understanding hardware acceleration on mobile browsers presentation
Justin Dorfman
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Ariya Hidayat
HTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the Web
Robin Hawkes
Canvas - HTML 5
Canvas - HTML 5
Jaeni Sahuri
Html5 Canvas Drawing and Animation
Html5 Canvas Drawing and Animation
Mindfire Solutions
2008 Sccc Inheritance
2008 Sccc Inheritance
bergel
Desingning reusable web components
Desingning reusable web components
Joonas Lehtinen
Intro to JavaFX & Widget FX
Intro to JavaFX & Widget FX
Stephen Chin
Mapping the world with Twitter
Mapping the world with Twitter
carlo zapponi
Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...
Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...
Codemotion
Desingning reusable web components
Desingning reusable web components
jojule
Semelhante a Building Windows 8 Metro Style casual games using HTML5 and JavaScript
(20)
Google I/O 2013 - Android Graphics Performance
Google I/O 2013 - Android Graphics Performance
Google I/O 2013 - Android Graphics Performance
Google I/O 2013 - Android Graphics Performance
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
Fabric.js @ Falsy Values
Fabric.js @ Falsy Values
HTML5 Graphics - Canvas and SVG
HTML5 Graphics - Canvas and SVG
Advanced Silverlight
Advanced Silverlight
SVGo: a Go Library for SVG generation
SVGo: a Go Library for SVG generation
Drawing with the HTML5 Canvas
Drawing with the HTML5 Canvas
Intro to HTML5 Canvas
Intro to HTML5 Canvas
Understanding hardware acceleration on mobile browsers presentation
Understanding hardware acceleration on mobile browsers presentation
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
HTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the Web
Canvas - HTML 5
Canvas - HTML 5
Html5 Canvas Drawing and Animation
Html5 Canvas Drawing and Animation
2008 Sccc Inheritance
2008 Sccc Inheritance
Desingning reusable web components
Desingning reusable web components
Intro to JavaFX & Widget FX
Intro to JavaFX & Widget FX
Mapping the world with Twitter
Mapping the world with Twitter
Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...
Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...
Desingning reusable web components
Desingning reusable web components
Mais de David Isbitski
Hosting a WordPress Blog on Azure Websites
Hosting a WordPress Blog on Azure Websites
David Isbitski
Building Apps for the new Windows Store
Building Apps for the new Windows Store
David Isbitski
Windows Phone 8 Sensors
Windows Phone 8 Sensors
David Isbitski
More Than An App
More Than An App
David Isbitski
Designing for Windows Phone 8
Designing for Windows Phone 8
David Isbitski
A Developer Lap Around Windows Phone 8
A Developer Lap Around Windows Phone 8
David Isbitski
Windows Azure Mobile Services
Windows Azure Mobile Services
David Isbitski
Windows Store Apps with HTML and JavaScript
Windows Store Apps with HTML and JavaScript
David Isbitski
Designing a Windows Store App
Designing a Windows Store App
David Isbitski
Playing music and sound effects in a windows 8 metro style app using html5 an...
Playing music and sound effects in a windows 8 metro style app using html5 an...
David Isbitski
Windows Phone App Development
Windows Phone App Development
David Isbitski
HTML5 Gaming
HTML5 Gaming
David Isbitski
Mais de David Isbitski
(12)
Hosting a WordPress Blog on Azure Websites
Hosting a WordPress Blog on Azure Websites
Building Apps for the new Windows Store
Building Apps for the new Windows Store
Windows Phone 8 Sensors
Windows Phone 8 Sensors
More Than An App
More Than An App
Designing for Windows Phone 8
Designing for Windows Phone 8
A Developer Lap Around Windows Phone 8
A Developer Lap Around Windows Phone 8
Windows Azure Mobile Services
Windows Azure Mobile Services
Windows Store Apps with HTML and JavaScript
Windows Store Apps with HTML and JavaScript
Designing a Windows Store App
Designing a Windows Store App
Playing music and sound effects in a windows 8 metro style app using html5 an...
Playing music and sound effects in a windows 8 metro style app using html5 an...
Windows Phone App Development
Windows Phone App Development
HTML5 Gaming
HTML5 Gaming
Último
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
The Digital Insurer
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen Frames
Sinan KOZAK
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
Delhi Call girls
🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘
RTylerCroy
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
Gabriella Davis
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
BookNet Canada
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
Anna Loughnan Colquhoun
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
Principled Technologies
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
giselly40
Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101
Paola De la Torre
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
Enterprise Knowledge
Maximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptx
OnBoard
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Alan Dix
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
shyamraj55
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
Rafal Los
Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)
Allon Mureinik
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
Delhi Call girls
How to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
naman860154
SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024
Scott Keck-Warren
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
2toLead Limited
Último
(20)
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
Unblocking The Main Thread Solving ANRs and Frozen Frames
Unblocking The Main Thread Solving ANRs and Frozen Frames
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
Salesforce Community Group Quito, Salesforce 101
Salesforce Community Group Quito, Salesforce 101
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
The Role of Taxonomy and Ontology in Semantic Layers - Heather Hedden.pdf
Maximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptx
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
Automating Business Process via MuleSoft Composer | Bangalore MuleSoft Meetup...
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
How to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Building Windows 8 Metro Style casual games using HTML5 and JavaScript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
demo
11.
12.
demo
13.
14.
GREETINGS PROFESSOR FALKEN. WOULD
YOU LIKE TO PLAY A GAME OF CHESS? █
15.
16.
17.
Canvas on One
Canvas! shadowOffsetX font save textAlign restore shadowOffsetY textBaseline shadowBlur fillText scale shadowColor strokeText rotate TextMetrics measureText translate clearRect transform fillRect ImageData createImageData setTransform strokeRect ImageData createImageData ImageData getImageData globalAlpha beginPath putImageData globalCompositeOperation closePath moveTo strokeStyle lineTo addColorStop fillStyle quadraticCurveTo CanvasGradient bezierCurveTo createLinearGradient width arcTo CanvasGradient rect createRadialGradient width arc CanvasPattern createPattern height fill CanvasPixelArray data stroke lineWidth clip length lineCap isPointInPath lineJoin getter miterLimit setter drawFocusRing drawImage Via Jatinder Mann – MIX11
18.
U haz an
old browser
19.
<canvas id="myCanvas" width="200"
height="200"> No canvas support. </canvas> <script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "rgb(255,0,0)"; ctx.fillRect(30, 30, 50, 50); </script>
20.
demo
21.
22.
Load content when
they start Initialize Get User Update the game world Engine Load Resources Input Draw the game world Calculate Test Criteria Give Free Resources FeedBack 22
23.
24.
25.
26.
demo
27.
28.
29.
30.
"Code for touch,
get mouse and pen for free!"
31.
32.
33.
demo
34.
35.
36.
37.
// Application manifest
capabilities required to access camera and microphone <Capabilities> <DeviceCapability Name="webcam" /> <DeviceCapability Name="microphone" /> </Capabilities>
38.
id="message"
id="imagedisplay" type="text/javascript"> // Step 1: Invoke the camera capture UI for snapping a photo var captureUI = new Windows.Media.Capture.CameraCaptureUI(); captureUI.captureFileAsync(Windows.Media.CameraCaptureUI.Mode.photo). then(function(capturedItem) { if (capturedItem) { // Step 2: Display the photo document.getElementById("imagedisplay").src = URL.createObjectURL(capturedItem); } else { document.getElementById("message").innerHTML = "User didn’t capture a photo"; } });
39.
demo
40.
41.
42.
demo
43.
44.
45.
46.
demo
Notas do Editor
Demo 1 - http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/Demo 2 – Space Cadet – space.css
Demo 1 - http://ie.microsoft.com/testdrive/HTML5/TryStrict/Default.htmlDemo 2 - VS2012 JavaScript Debugging, DOM InspectorDemo 3 - Space Cadet – Audio Tags, Sound.js
http://ie.microsoft.com/testdrive/Graphics/CanvasPad/Default.html
Baixar agora