SlideShare une entreprise Scribd logo
1  sur  49
Télécharger pour lire hors ligne
Building Windows 8 Metro Style casual games using HTML5 and JavaScript
Building Windows 8 Metro Style casual games using HTML5 and JavaScript
Building Windows 8 Metro Style casual games using HTML5 and JavaScript
Building Windows 8 Metro Style casual games using HTML5 and JavaScript
Building Windows 8 Metro Style casual games using HTML5 and JavaScript
Building Windows 8 Metro Style casual games using HTML5 and JavaScript
Building Windows 8 Metro Style casual games using HTML5 and JavaScript
Building Windows 8 Metro Style casual games using HTML5 and JavaScript
Building Windows 8 Metro Style casual games using HTML5 and JavaScript
demo
Building Windows 8 Metro Style casual games using HTML5 and JavaScript
demo
Building Windows 8 Metro Style casual games using HTML5 and JavaScript
GREETINGS PROFESSOR FALKEN.

WOULD YOU LIKE TO PLAY A
GAME OF CHESS?

█
Building Windows 8 Metro Style casual games using HTML5 and JavaScript
Building Windows 8 Metro Style casual games using HTML5 and JavaScript
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
U haz an old
browser
<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>
demo
Building Windows 8 Metro Style casual games using HTML5 and JavaScript
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
Building Windows 8 Metro Style casual games using HTML5 and JavaScript
Building Windows 8 Metro Style casual games using HTML5 and JavaScript
Building Windows 8 Metro Style casual games using HTML5 and JavaScript
demo
Building Windows 8 Metro Style casual games using HTML5 and JavaScript
Building Windows 8 Metro Style casual games using HTML5 and JavaScript
Building Windows 8 Metro Style casual games using HTML5 and JavaScript
"Code for touch, get mouse and pen for free!"
Building Windows 8 Metro Style casual games using HTML5 and JavaScript
Building Windows 8 Metro Style casual games using HTML5 and JavaScript
demo
Building Windows 8 Metro Style casual games using HTML5 and JavaScript
Building Windows 8 Metro Style casual games using HTML5 and JavaScript
Building Windows 8 Metro Style casual games using HTML5 and JavaScript
// Application manifest capabilities required to access camera and microphone
<Capabilities>
    <DeviceCapability Name="webcam" />
    <DeviceCapability Name="microphone" />
</Capabilities>
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";
         }

   });
demo
Building Windows 8 Metro Style casual games using HTML5 and JavaScript
Building Windows 8 Metro Style casual games using HTML5 and JavaScript
demo
Building Windows 8 Metro Style casual games using HTML5 and JavaScript
Building Windows 8 Metro Style casual games using HTML5 and JavaScript
Building Windows 8 Metro Style casual games using HTML5 and JavaScript
demo
Building Windows 8 Metro Style casual games using HTML5 and JavaScript
Building Windows 8 Metro Style casual games using HTML5 and JavaScript
Building Windows 8 Metro Style casual games using HTML5 and JavaScript

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 PerformanceGoogle I/O 2013 - Android Graphics Performance
Google I/O 2013 - Android Graphics PerformanceDouO
 
Google I/O 2013 - Android Graphics Performance
Google I/O 2013 - Android Graphics PerformanceGoogle I/O 2013 - Android Graphics Performance
Google I/O 2013 - Android Graphics PerformanceDouO
 
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile BrowsersUnderstanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile BrowsersAriya Hidayat
 
Fabric.js @ Falsy Values
Fabric.js @ Falsy ValuesFabric.js @ Falsy Values
Fabric.js @ Falsy ValuesJuriy Zaytsev
 
HTML5 Graphics - Canvas and SVG
HTML5 Graphics - Canvas and SVGHTML5 Graphics - Canvas and SVG
HTML5 Graphics - Canvas and SVGDavid Isbitski
 
Advanced Silverlight
Advanced SilverlightAdvanced Silverlight
Advanced Silverlightrsnarayanan
 
SVGo: a Go Library for SVG generation
SVGo: a Go Library for SVG generationSVGo: a Go Library for SVG generation
SVGo: a Go Library for SVG generationAnthony Starks
 
Drawing with the HTML5 Canvas
Drawing with the HTML5 CanvasDrawing with the HTML5 Canvas
Drawing with the HTML5 CanvasHenry Osborne
 
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile BrowsersUnderstanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile BrowsersAriya Hidayat
 
Understanding hardware acceleration on mobile browsers presentation
Understanding hardware acceleration on mobile browsers presentationUnderstanding hardware acceleration on mobile browsers presentation
Understanding hardware acceleration on mobile browsers presentationJustin Dorfman
 
HTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the WebHTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the WebRobin Hawkes
 
Html5 Canvas Drawing and Animation
Html5 Canvas Drawing and AnimationHtml5 Canvas Drawing and Animation
Html5 Canvas Drawing and AnimationMindfire Solutions
 
2008 Sccc Inheritance
2008 Sccc Inheritance2008 Sccc Inheritance
2008 Sccc Inheritancebergel
 
Desingning reusable web components
Desingning reusable web componentsDesingning reusable web components
Desingning reusable web componentsJoonas Lehtinen
 
Intro to JavaFX & Widget FX
Intro to JavaFX & Widget FXIntro to JavaFX & Widget FX
Intro to JavaFX & Widget FXStephen Chin
 
Mapping the world with Twitter
Mapping the world with TwitterMapping the world with Twitter
Mapping the world with Twittercarlo 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 -...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 componentsDesingning reusable web components
Desingning reusable web componentsjojule
 

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 PerformanceGoogle 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 PerformanceGoogle I/O 2013 - Android Graphics Performance
Google I/O 2013 - Android Graphics Performance
 
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile BrowsersUnderstanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
 
Fabric.js @ Falsy Values
Fabric.js @ Falsy ValuesFabric.js @ Falsy Values
Fabric.js @ Falsy Values
 
HTML5 Graphics - Canvas and SVG
HTML5 Graphics - Canvas and SVGHTML5 Graphics - Canvas and SVG
HTML5 Graphics - Canvas and SVG
 
Advanced Silverlight
Advanced SilverlightAdvanced Silverlight
Advanced Silverlight
 
SVGo: a Go Library for SVG generation
SVGo: a Go Library for SVG generationSVGo: a Go Library for SVG generation
SVGo: a Go Library for SVG generation
 
Drawing with the HTML5 Canvas
Drawing with the HTML5 CanvasDrawing with the HTML5 Canvas
Drawing with the HTML5 Canvas
 
Intro to HTML5 Canvas
Intro to HTML5 CanvasIntro to HTML5 Canvas
Intro to HTML5 Canvas
 
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile BrowsersUnderstanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
 
Understanding hardware acceleration on mobile browsers presentation
Understanding hardware acceleration on mobile browsers presentationUnderstanding hardware acceleration on mobile browsers presentation
Understanding hardware acceleration on mobile browsers presentation
 
HTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the WebHTML5 Canvas - The Future of Graphics on the Web
HTML5 Canvas - The Future of Graphics on the Web
 
Canvas - HTML 5
Canvas - HTML 5Canvas - HTML 5
Canvas - HTML 5
 
Html5 Canvas Drawing and Animation
Html5 Canvas Drawing and AnimationHtml5 Canvas Drawing and Animation
Html5 Canvas Drawing and Animation
 
2008 Sccc Inheritance
2008 Sccc Inheritance2008 Sccc Inheritance
2008 Sccc Inheritance
 
Desingning reusable web components
Desingning reusable web componentsDesingning reusable web components
Desingning reusable web components
 
Intro to JavaFX & Widget FX
Intro to JavaFX & Widget FXIntro to JavaFX & Widget FX
Intro to JavaFX & Widget FX
 
Mapping the world with Twitter
Mapping the world with TwitterMapping 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 -...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 componentsDesingning reusable web components
Desingning reusable web components
 

Plus de David Isbitski

Hosting a WordPress Blog on Azure Websites
Hosting a WordPress Blog on Azure WebsitesHosting a WordPress Blog on Azure Websites
Hosting a WordPress Blog on Azure WebsitesDavid Isbitski
 
Building Apps for the new Windows Store
Building Apps for the new Windows Store Building Apps for the new Windows Store
Building Apps for the new Windows Store David Isbitski
 
Windows Phone 8 Sensors
Windows Phone 8 SensorsWindows Phone 8 Sensors
Windows Phone 8 SensorsDavid Isbitski
 
Designing for Windows Phone 8
Designing for Windows Phone 8Designing for Windows Phone 8
Designing for Windows Phone 8David Isbitski
 
A Developer Lap Around Windows Phone 8
A Developer Lap Around Windows Phone 8 A Developer Lap Around Windows Phone 8
A Developer Lap Around Windows Phone 8 David Isbitski
 
Windows Azure Mobile Services
Windows Azure Mobile ServicesWindows Azure Mobile Services
Windows Azure Mobile ServicesDavid Isbitski
 
Windows Store Apps with HTML and JavaScript
Windows Store Apps with HTML and JavaScriptWindows Store Apps with HTML and JavaScript
Windows Store Apps with HTML and JavaScriptDavid Isbitski
 
Designing a Windows Store App
Designing a Windows Store AppDesigning a Windows Store App
Designing a Windows Store AppDavid 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...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 DevelopmentWindows Phone App Development
Windows Phone App DevelopmentDavid Isbitski
 

Plus de David Isbitski (12)

Hosting a WordPress Blog on Azure Websites
Hosting a WordPress Blog on Azure WebsitesHosting 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 Building Apps for the new Windows Store
Building Apps for the new Windows Store
 
Windows Phone 8 Sensors
Windows Phone 8 SensorsWindows Phone 8 Sensors
Windows Phone 8 Sensors
 
More Than An App
More Than An AppMore Than An App
More Than An App
 
Designing for Windows Phone 8
Designing for Windows Phone 8Designing for Windows Phone 8
Designing for Windows Phone 8
 
A Developer Lap Around Windows Phone 8
A Developer Lap Around Windows Phone 8 A Developer Lap Around Windows Phone 8
A Developer Lap Around Windows Phone 8
 
Windows Azure Mobile Services
Windows Azure Mobile ServicesWindows Azure Mobile Services
Windows Azure Mobile Services
 
Windows Store Apps with HTML and JavaScript
Windows Store Apps with HTML and JavaScriptWindows Store Apps with HTML and JavaScript
Windows Store Apps with HTML and JavaScript
 
Designing a Windows Store App
Designing a Windows Store AppDesigning 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...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 DevelopmentWindows Phone App Development
Windows Phone App Development
 
HTML5 Gaming
HTML5 GamingHTML5 Gaming
HTML5 Gaming
 

Dernier

Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
Things you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceThings you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceMartin Humpolec
 
Babel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxBabel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxYounusS2
 
Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum ComputingGDSC PJATK
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesThousandEyes
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
GenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncGenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncObject Automation
 
Spring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfSpring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfAnna Loughnan Colquhoun
 
Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?SANGHEE SHIN
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 

Dernier (20)

Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
Things you didn't know you can use in your Salesforce
Things you didn't know you can use in your SalesforceThings you didn't know you can use in your Salesforce
Things you didn't know you can use in your Salesforce
 
Babel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptxBabel Compiler - Transforming JavaScript for All Browsers.pptx
Babel Compiler - Transforming JavaScript for All Browsers.pptx
 
Introduction to Quantum Computing
Introduction to Quantum ComputingIntroduction to Quantum Computing
Introduction to Quantum Computing
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyesHow to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
How to Effectively Monitor SD-WAN and SASE Environments with ThousandEyes
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
GenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation IncGenAI and AI GCC State of AI_Object Automation Inc
GenAI and AI GCC State of AI_Object Automation Inc
 
Spring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdfSpring24-Release Overview - Wellingtion User Group-1.pdf
Spring24-Release Overview - Wellingtion User Group-1.pdf
 
Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?Do we need a new standard for visualizing the invisible?
Do we need a new standard for visualizing the invisible?
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 

Building Windows 8 Metro Style casual games using HTML5 and JavaScript

  • 10. demo
  • 12. demo
  • 14. GREETINGS PROFESSOR FALKEN. WOULD YOU LIKE TO PLAY A GAME OF CHESS? █
  • 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
  • 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
  • 26. demo
  • 30. "Code for touch, get mouse and pen for free!"
  • 33. demo
  • 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
  • 42. demo
  • 46. demo

Notes de l'éditeur

  1. Demo 1 - http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/Demo 2 – Space Cadet – space.css
  2. Demo 1 - http://ie.microsoft.com/testdrive/HTML5/TryStrict/Default.htmlDemo 2 - VS2012 JavaScript Debugging, DOM InspectorDemo 3 - Space Cadet – Audio Tags, Sound.js
  3. http://ie.microsoft.com/testdrive/Graphics/CanvasPad/Default.html