Don't like ads? PRO users don't see any ads ;-)
Public Pastes
Guest

Untitled

By: a guest on Jul 1st, 2012  |  syntax: None  |  size: 3.87 KB  |  hits: 18  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. <html>
  2.   <head>
  3.     <title>OOP test 2</title>
  4.     <style type="text/css">
  5.    
  6.     </style>
  7.     <script type="text/javascript">
  8.       const FPS = 30;
  9.       var x = 0;
  10.       var y = 0;
  11.       var xDirection = 1;
  12.       var yDirection = 1;
  13.       var xMoving = 0;
  14.       var yMoving = 0;
  15.       var image = new Image();
  16.       var missiles = new Array();
  17.       image.src = "http://dl.dropbox.com/u/3451091/pokeball.gif";
  18.       var canvas = null;
  19.       var context2D = null;
  20.       window.onload = init;
  21.      
  22.       function init() {
  23.         canvas = document.getElementById('canvas');
  24.         context2D = canvas.getContext('2d');
  25.         setInterval(draw, 1000/FPS);
  26.       }
  27.      
  28.       function draw() {
  29.         context2D.clearRect(0, 0, canvas.width, canvas.height);
  30.         context2D.drawImage(image, x, y);
  31.         moveMissiles();
  32.         drawMissiles();
  33.         x += xMoving * xDirection;
  34.         y += yMoving * yDirection;
  35.        
  36.         if (x >= 434) {
  37.           x = 434; xDirection = -1;
  38.         } else if (x <=0) {
  39.           x = 0; xDirection = 1;
  40.         } else if (y >= 434) {
  41.           y = 434; yDirection = -1;
  42.         } else if (y <= 0) {
  43.           y = 0; yDirection = 1;
  44.         }
  45.       }
  46.      
  47.       function drawMissiles() {
  48.         for (var i = 0; i < missiles.length; i++) {
  49.           missile = missiles[i];
  50.           context2D.drawImage(missile.mimage, missile.pos[0], missile.pos[1]);
  51.         }
  52.       }
  53.      
  54.       function moveMissiles() {
  55.         for (var i = 0; i < missiles.length; i++) {
  56.           missile = missiles[i];
  57.           missile.pos[0] += 2 * missile.direction[0];
  58.           missile.pos[1] += 2 * missile.direction[1];
  59.         }
  60.       }
  61.      
  62.       function handleKeyDown(event) {
  63.         key = event.keyCode;
  64.         if (key >= 37 && key <= 40) {
  65.           setDirection(event);
  66.           startMoving(event);
  67.         } else if (key == 32) {
  68.           fireMissile(event);
  69.         }
  70.       }
  71.      
  72.       function handleKeyRelease(event) {
  73.         if (key >= 37 && key <= 40) {
  74.           stopMoving(event);
  75.         }
  76.       }
  77.      
  78.       function setDirection(event) {
  79.         if (event.keyCode == 39) {
  80.           xDirection = 1;
  81.         } else if (event.keyCode == 37) {
  82.           xDirection = -1;
  83.         } else if (event.keyCode == 38) {
  84.           yDirection = -1;
  85.         } else if (event.keyCode == 40) {
  86.           yDirection = 1;
  87.         }
  88.       }
  89.      
  90.       function startMoving(event) {
  91.         var key = event.keyCode;
  92.         if (key == 39 || key == 37) {
  93.           xMoving = 1;
  94.         } else if (key == 38 || key == 40) {
  95.           yMoving = 1;
  96.         }
  97.       }
  98.      
  99.       function stopMoving(event) {
  100.         var key = event.keyCode;
  101.         if (key == 39 || key == 37) {
  102.           xMoving = 0;
  103.         } else if (key == 38 || key == 40) {
  104.           yMoving = 0;
  105.         }
  106.       }
  107.      
  108.       function getPlayerDirection() {
  109.         return [xDirection, yDirection];
  110.       }
  111.      
  112.       function Missile() {
  113.         this.direction = getPlayerDirection();
  114.         this.mimage = new Image();
  115.         this.mimage.src = "http://dl.dropbox.com/u/3451091/dot.gif";
  116.         this.pos = [x, y];
  117.        
  118.         this.getDirection = function() {
  119.           return this.direction;
  120.         }
  121.       }
  122.      
  123.       function fireMissile(event) {
  124.         missiles.push(new Missile());
  125.         updateDisplay(missiles[0].mimage.src);
  126.       }
  127.      
  128.       function updateDisplay(value) {
  129.         document.getElementById('display').innerHTML = value;
  130.       }
  131.     </script>
  132.   </head>
  133.  
  134.   <body onkeydown="handleKeyDown(event)" onkeyup="handleKeyRelease(event);">
  135.  
  136.     <canvas id="canvas" width="450" height="450" style="border: 1px solid black;">
  137.       <p>Your browser does not support the canvas element.</p>
  138.     </canvas>
  139.    
  140.     <div id="display">
  141.       0
  142.     </div>
  143.   </body>
  144. </html>
create a new version of this paste RAW Paste Data