API tools faq
paste
Advertisement
MaHarder

Canvas

MaHarder
Dec 4th, 2013
180
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 3.52 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2. "http://www.w3.org/TR/html4/loose.dtd">
  3. <html lang="en">
  4. <head>
  5. <title>CH1EX1: Basics</title>
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  7. <script type="text/javascript" src="http://player.sakuranight.net/new_modernizr.custom.05461.js"></script>
  8. <script type="text/javascript">
  9. window.addEventListener ("load", eventWindowLoaded, false);
  10.  
  11. var Debugger = function () { };
  12. Debugger.log = function (message) {
  13.     try {
  14.         console.log(message);
  15.     } catch (exception) {
  16.         return;
  17.     }
  18. }
  19.  
  20. function eventWindowLoaded () {
  21.     canvasApp();
  22. }
  23.  
  24. function canvasSupport (){
  25.     return.Modernizr.canvas;
  26. }
  27. function canvasApp() {
  28.  
  29.     if (!canvasSupport()) {
  30.         return;
  31.     }
  32.    
  33.     var theCanvas = document.getElementById("canvasOne");
  34.     var context = theCanvas.getContext("2d");
  35.    
  36.     Debugger.log("Drawing Canvas");
  37.     var guesses = 0;
  38.     var message = "Guess The Letter From a (lower) to z (higher)";
  39.     var letters = ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"];
  40.     var today = new Date();
  41.     var letterToGuess ="";
  42.     var higherOrLower = "";
  43.     var lettersGuesses;
  44.     var gameOver = false;
  45.     function initGame() {
  46.         var letterIndex = Math.floor(math.random * letters.length);
  47.         letterToGuess = letters[letterIndex];
  48.         guesses = 0;
  49.         lettersGuessed = [];
  50.         gameOver = false;
  51.         window.addEventListener("keydown", eventKeyPressed, true);
  52.         drawScreen();
  53.     }
  54.     function eventKeyPressed(e) {
  55.         if(!gameOver) {
  56.             var letterPressed = String.fromCharCode(e.keyCode);
  57.             letterPressed = letterPressed.toLowerCase();
  58.             guesses++;
  59.             lettersGuessed.push(letterPressed);
  60.            
  61.             if (letterPressed == letterToGuess) {
  62.                 gameOver = true;
  63.             } else {
  64.                 letterIndex = letters.indexOf(letterToGuess);
  65.                 guessIndex = letters.indexOf(letterPressed);
  66.                 Debugger.log(guessIndex);
  67.                 if (guessIndex < 0) {
  68.                     higherOrLower = "That is not a letter";
  69.                 } else if (guessIndex > letterIndex) {
  70.                     higherOrLower = "Lower";
  71.                 } else {
  72.                     higherOrLower = "Higher";
  73.                 }
  74.             }
  75.             drawScreen();
  76.         }
  77.     }
  78.     function drawScreen() {
  79.         //background
  80.         context.fillStyle ="#ffffaa";
  81.         context.fillRect(0,0,500,300);
  82.         //box
  83.         context.strokeStyle ="#000000";
  84.         context.strokeRect(5,5,490,290);
  85.        
  86.         context.textBaseline = "top";
  87.         //Date
  88.         context.fillStyle = "#000000";
  89.         context.font ="10px Sans-Serif";
  90.         context.fillText (today,150,10);
  91.         //Message
  92.         context.fillStyle = "#FF0000";
  93.         context.font = "14px Sans-Serif";
  94.         context.fillText (message,125,30); //Guesses
  95.         context.fillStyle ="#109910";
  96.         context.font = "16px Sans-Serif";
  97.         context.fillText ('Guesses: '+guesses,215,50);
  98.         //HigherOrLower
  99.         context.fillStyle = "#000000";
  100.         context.font = "16px Sans-Serif";
  101.         context.fillText ("Letters Guessed: "+lettersGuessed.toString(),10,260);
  102.         if (gameOver) {
  103.             context.fillStyle = "#FF0000";
  104.             context.font = "40px Sans-Serif";
  105.             context.fillText = "You Got It!",150,180);
  106.         }
  107.     }
  108. }
  109. var formElement = document.getElementById("createImageData");
  110. formElement.addEventListener('click',createImageDataPressed,false);
  111. function createImageDataPressed(e) {
  112.     window.open(theCanvas.toDataURL(),"canvasImage","left=0,top=0,width="+theCanvas.width+",height="+theCanvas.height+",toolbar=0,resizable=0");
  113. }
  114. </script>
  115. </head>
  116.  
  117. <body>
  118.  
  119. <canvas id="canvasOne">
  120. Your browser does not support HTML5 Canvas.
  121. </canvas>
  122. <form>
  123.     <input type="button" id="createImegaData" value="Export as Image">
  124. </form>
  125. </body>
  126. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!