• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Building Windows 8 Metro Style casual games using HTML5 and JavaScript
 

Building Windows 8 Metro Style casual games using HTML5 and JavaScript

on

  • 5,431 views

 

Statistics

Views

Total Views
5,431
Views on SlideShare
2,693
Embed Views
2,738

Actions

Likes
1
Downloads
32
Comments
0

16 Embeds 2,738

http://blogs.msdn.com 2428
http://techapplicant.collected.info 176
http://feeds.feedburner.com 75
http://weblog.chrisricard.net 30
http://davedev.net 6
http://i1.blogs.msdn.com 4
http://www.acomputerportal.com 4
http://translate.googleusercontent.com 3
http://www.newsblur.com 3
http://dev.newsblur.com 2
http://feeds2.feedburner.com 2
http://davedev.azurewebsites.net 1
http://www.5z5.com 1
http://nodeslide.herokuapp.com 1
http://webcache.googleusercontent.com 1
http://www.verious.com 1
More...

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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 Building Windows 8 Metro Style casual games using HTML5 and JavaScript Presentation Transcript

  • demo
  • demo
  • GREETINGS PROFESSOR FALKEN.WOULD YOU LIKE TO PLAY AGAME OF CHESS?█
  • 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
  • U haz an oldbrowser
  • <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
  • 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
  • demo
  • "Code for touch, get mouse and pen for free!"
  • demo
  • // 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 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"; } });
  • demo
  • demo
  • demo