Suche senden
Hochladen
Building Windows 8 Metro Style casual games using HTML5 and JavaScript
•
Als PPTX, PDF herunterladen
•
2 gefällt mir
•
2,424 views
David Isbitski
Folgen
Technologie
Unterhaltung & Humor
Melden
Teilen
Melden
Teilen
1 von 49
Jetzt herunterladen
Empfohlen
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
Empfohlen
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
Weitere ähnliche Inhalte
Ähnlich wie 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
Ähnlich wie 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
Mehr von 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
Mehr von 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
Kürzlich hochgeladen
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
Michael W. Hawkins
Google AI Hackathon: LLM based Evaluator for RAG
Google AI Hackathon: LLM based Evaluator for RAG
Sujit Pal
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
Maria Levchenko
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
2toLead Limited
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path Mount
Puma Security, LLC
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Drew Madelung
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
gurkirankumar98700
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
Delhi Call girls
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
The Digital Insurer
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
giselly40
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
Delhi Call girls
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
HostedbyConfluent
How to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
naman860154
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
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
Radu Cotescu
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
Understanding the Laravel MVC Architecture
Understanding the Laravel MVC Architecture
Pixlogix Infotech
🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘
RTylerCroy
Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)
Allon Mureinik
Kürzlich hochgeladen
(20)
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
Google AI Hackathon: LLM based Evaluator for RAG
Google AI Hackathon: LLM based Evaluator for RAG
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path Mount
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
Kalyanpur ) Call Girls in Lucknow Finest Escorts Service 🍸 8923113531 🎰 Avail...
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
How to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Transcript: #StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
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...
Understanding the Laravel MVC Architecture
Understanding the Laravel MVC Architecture
🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘
Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 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
Hinweis der Redaktion
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
Jetzt herunterladen