demo
demo
GREETINGS PROFESSOR FALKEN.WOULD YOU LIKE TO PLAY AGAME OF CHESS?█
Canvas on One Canvas!                                               shadowOffsetX                        font     save    ...
U haz an oldbrowser
<canvas id="myCanvas" width="200" height="200">  No canvas support.</canvas><script type="text/javascript">  var canvas = ...
demo
Load content when they start                               Initialize                         Get UserUpdate the game worl...
demo
"Code for touch, get mouse and pen for free!"
demo
// Application manifest capabilities required to access camera and microphone<Capabilities>    <DeviceCapability Name="web...
id="message"    id="imagedisplay"       type="text/javascript">// Step 1: Invoke the camera capture UI for snapping a phot...
demo
demo
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
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
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
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
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
Upcoming SlideShare
Loading in...5
×

Building Windows 8 Metro Style casual games using HTML5 and JavaScript

5,237

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,237
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
33
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • 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
  • Building Windows 8 Metro Style casual games using HTML5 and JavaScript

    1. 1. demo
    2. 2. demo
    3. 3. GREETINGS PROFESSOR FALKEN.WOULD YOU LIKE TO PLAY AGAME OF CHESS?█
    4. 4. 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 getImageDataglobalAlpha beginPath putImageDataglobalCompositeOperation closePath moveTostrokeStyle lineTo addColorStopfillStyle quadraticCurveToCanvasGradient bezierCurveTocreateLinearGradient width arcToCanvasGradient rectcreateRadialGradient width arcCanvasPattern createPattern height fill CanvasPixelArray data stroke lineWidth clip length lineCap isPointInPath lineJoin getter miterLimit setter drawFocusRing drawImage Via Jatinder Mann – MIX11
    5. 5. U haz an oldbrowser
    6. 6. <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>
    7. 7. demo
    8. 8. Load content when they start Initialize Get UserUpdate the game world Engine Load Resources InputDraw the game world Calculate Test Criteria Give Free Resources FeedBack22
    9. 9. demo
    10. 10. "Code for touch, get mouse and pen for free!"
    11. 11. demo
    12. 12. // Application manifest capabilities required to access camera and microphone<Capabilities> <DeviceCapability Name="webcam" /> <DeviceCapability Name="microphone" /></Capabilities>
    13. 13. id="message" id="imagedisplay" type="text/javascript">// Step 1: Invoke the camera capture UI for snapping a photovar 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"; } });
    14. 14. demo
    15. 15. demo
    16. 16. demo
    1. Gostou de algum slide específico?

      Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

    ×