Soumettre la recherche
Mettre en ligne
Building Windows 8 Metro Style casual games using HTML5 and JavaScript
•
Télécharger en tant que PPTX, PDF
•
2 j'aime
•
2,424 vues
David Isbitski
Suivre
Technologie
Divertissement et humour
Signaler
Partager
Signaler
Partager
1 sur 49
Télécharger maintenant
Recommandé
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
Recommandé
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
Contenu connexe
Similaire à 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
Similaire à 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
Plus 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
Plus 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
Dernier
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
wesley chun
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
Igalia
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
HampshireHUG
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Igalia
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
Michael W. Hawkins
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
The Digital Insurer
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
hans926745
How to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
naman860154
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
giselly40
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path Mount
Puma Security, LLC
🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘
RTylerCroy
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
Delhi Call girls
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
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
Martijn de Jong
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
The Digital Insurer
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
Gabriella Davis
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
Antenna Manufacturer Coco
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
Maria Levchenko
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
ThousandEyes
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024
Results
Dernier
(20)
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
A Year of the Servo Reboot: Where Are We Now?
A Year of the Servo Reboot: Where Are We Now?
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
[2024]Digital Global Overview Report 2024 Meltwater.pdf
[2024]Digital Global Overview Report 2024 Meltwater.pdf
How to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path Mount
🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
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
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
A Call to Action for Generative AI in 2024
A Call to Action for Generative AI in 2024
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
Notes de l'éditeur
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
Télécharger maintenant