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

Untitled

By: a guest on May 5th, 2012  |  syntax: None  |  size: 2.14 KB  |  hits: 10  |  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. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>Canvas Test</title>
  6. </head>
  7. <body>
  8. <section>
  9.  
  10. <div>
  11.         <canvas id="canvas" width="320" height="480">
  12.                 This text is displayed if your browser does not support HTML5 Canvas.
  13.         </canvas>
  14. </div>
  15.  
  16. <script type="text/javascript">
  17. var canvas;
  18. canvas = document.getElementById('canvas');
  19. context2D = canvas.getContext('2d');
  20.  
  21. //Create Shot class for when the player shoots
  22. function Shot (type) {
  23.         this.x = 100;
  24.         this.y = 200;
  25.         this.img = "shot.jpg";
  26.        
  27.         // Move the shot up and draw it
  28.         this.update = function() {
  29.                 this.x -= 1;
  30.                 context2D.drawImage(this.img, this.x, this.y);
  31.                 //ctx.drawImage(image, x, y);
  32.         }
  33. }
  34.  
  35.  
  36.  
  37. // Create player class
  38. function Player (type) {
  39.         this.x = 100;
  40.         this.y = 150;
  41.         this.img = new Image();
  42.         this.img.src = "player.jpg";
  43.         this.shots = new Array();
  44.        
  45.         // When the player shoots
  46.         this.create_shot = function() {
  47.                 this.s = new Shot();
  48.                 this.shots.push(this.s);
  49.         }
  50.        
  51.         // For all the shots fired, draw them in thier record position from the array
  52.         this.update_shots = function() {
  53.                        
  54.                 index = null
  55.                 for (index = 0; index < this.shots.     length; index++) {
  56.                         //call the update for s.update?
  57.                 }
  58.         }
  59.        
  60.        
  61.        
  62.         //  Update all the shots and draw the player
  63.         this.run = function() {
  64.                 this.update_shots();
  65.                 context2D.drawImage(this.img, this.x, this.y);
  66.         }
  67. }
  68.  
  69.  
  70. function clear() {
  71.   //ctx.clearRect(0, 0, WIDTH, HEIGHT);
  72. }
  73.  
  74. function init() {
  75.     canvas = document.getElementById("canvas");
  76.     ctx = canvas.getContext("2d");
  77.     return setInterval(draw, 10);
  78. }
  79.  
  80. function doKeyDown(evt){
  81.         switch (evt.keyCode) {
  82.                 case 97:  /* Up arrow was pressed */
  83.                         p1.y -= 5;
  84.                         break;
  85.                 case 40:  /* Down arrow was pressed */                 
  86.                         p1.y += 5;
  87.                         break;
  88.                 case 37:  /* Left arrow was pressed */
  89.                         p1.x -= 5;
  90.                         break;
  91.                 case 39:  /* Right arrow was pressed */
  92.                         p1.x += 5;
  93.                         break;
  94.                 }
  95. }
  96.  
  97. //Where do I create the player?
  98. var p1 = new Player();
  99.  
  100.  
  101. function draw() {
  102.         clear();
  103.         p1.run();
  104.        
  105.         //ctx.drawImage(image, x, y);
  106. }
  107.  
  108. init();
  109. window.addEventListener('keydown',doKeyDown,true);
  110.  
  111. </script>
  112. </section>
  113. </body>
  114. </html>
create a new version of this paste RAW Paste Data