Pastebin launched a little side project called VERYVIRAL.com, check it out ;-) Want more features on Pastebin? Sign Up, it's FREE!
Guest

Full HTML5 Game

By: a guest on Sep 30th, 2012  |  syntax: JavaScript  |  size: 12.82 KB  |  views: 15  |  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. //Variables
  2. var canvasBg = document.getElementById('canvasBg');
  3. var ctxBg = canvasBg.getContext('2d');
  4.  
  5. var canvasJet = document.getElementById('canvasJet');
  6. var ctxJet = canvasJet.getContext('2d');
  7.  
  8. var canvasEnemy = document.getElementById('canvasEnemy');
  9. var ctxEnemy = canvasEnemy.getContext('2d');
  10.  
  11. var canvasHUD = document.getElementById('canvasHUD');
  12. var ctxHUD = canvasHUD.getContext('2d');
  13. ctxHUD.fillStyle = "hsla(0, 0%, 0%, 0.5)";
  14. ctxHUD.font = "bold 20px Arial";
  15.  
  16. var canvasEnd = document.getElementById('canvasEnd');
  17. var ctxEnd = canvasEnemy.getContext('2d');
  18. ctxEnd.fillStyle = "rgba(0, 0, 0, 100)";
  19.  
  20. var gameWidth  = canvasBg.width;
  21. var gameHeight = canvasBg.height;
  22.  
  23. var isPlaying = false;
  24. var gameLost = false;
  25.  
  26. var requestAnimFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
  27. function(callback) {
  28.         window.setTimeout(callback, 1000/60);
  29. };
  30.  
  31. var enemies = [];
  32.  
  33. var newSpawn = 0;
  34. var btnPlay = new Button(265, 540, 220, 330);
  35. var btnEnd = new Button(200, 600, 300, 450);
  36. var fps = 10;
  37. var drawInterval;
  38.  
  39. var mouseX = 0;
  40. var mouseY = 0;
  41.  
  42. var shiftKey = false;
  43.  
  44. var jet1 = new Jet();
  45.  
  46. var imgSprite = new Image();
  47. imgSprite.src = 'images/spriteMap.png';
  48. imgSprite.addEventListener('load',init,false);
  49.  
  50. function pause() {
  51.         isPlaying = false;
  52. }
  53. function play() {
  54.         isPlaying = true;
  55.         startLoop();
  56. }
  57. //Initialize the canvas
  58. function init() {
  59.         spawnEnemy(10);
  60.         drawMenu();
  61.         document.addEventListener('click',mouseClicked, false);
  62. }
  63. function playGame() {
  64.         drawBg();
  65.         startLoop();
  66.         updateHUD();
  67.         document.addEventListener('keydown',checkKeyDown,false);
  68.         document.addEventListener('keyup',checkKeyUp,false);
  69. }
  70.  
  71. function spawnEnemy(n) {
  72.         for(i = 0;i<n;i++) {
  73.                 enemies[enemies.length] = new Enemy();
  74.         }
  75. }
  76.  
  77. function drawAllEnemies() {
  78.         clearEnemy();
  79.         for (var i=0; i<enemies.length;i++) {
  80.                 enemies[i].draw();
  81.         }
  82. }
  83.  
  84. function rect_collision(x1, y1, w1, h1, x2, y2, h2, w2) {
  85.     var top1 = y1;
  86.     var bottom1 = y1 + h1;
  87.     var left1 = x1;
  88.     var right1 = x1 + w1;
  89.     var top2 = y2;
  90.     var bottom2 = y2 + h2;
  91.     var left2 = x2;
  92.     var right2 = x2 + w2;
  93.     //console.log('----' + top1, bottom1, left1, right1, top2, bottom2, left2, right2 + '----');
  94.  
  95.     //console.log('top 1: ' + top1);
  96.     //console.log('bottom 1: ' + bottom1);
  97.     //console.log('top 2: ' + top2);
  98.     //console.log('bottom 2: ' + bottom2);
  99.     //console.log('x1: ' + x1);
  100.     //console.log('x2: ' + x2);
  101.     //console.log('y2: ' + y2);
  102.     //console.log('h2: ' + h2);
  103.     //console.log(x1, y1, w1, h1, x2, y2, h2, w2);
  104.     //console.log('------------------------------------------------')
  105.         if (((left2 >= left1) && (left2 <= right1)) && ((top1 <= top2) && (top2 <= bottom1)) ||
  106.                 ((right2 >= left1) && (right2 <= left1)) && ((top1 <= top2) && (top2 <= bottom1)) ||
  107.                 ((left2 >= left1) && (left2 <= right1)) && ((bottom2 >= top1) && (bottom2 <= bottom1)) ||
  108.                 ((right2 >= left1) && (right2 <= right1)) && ((bottom2 >= top1) && (bottom2 <= bottom1))) {
  109.                 console.log("Top 1 " + top1 + " Bottom 1 " + bottom1 + " Top 2 " + top2 + " Bottom 2 " + bottom2 + " Left 1 " + left1 + " Right 1 " + right1 + " Left 2 " + left2 + " Right2 " + right2);
  110.                 return true;
  111.                
  112.         }
  113.    
  114.     return false;    
  115. }
  116.  
  117. function loop() {
  118.         if (isPlaying && !gameLost) {
  119.                 jet1.checkHitJet();
  120.                 jet1.draw();
  121.                 updateHUD();
  122.                 requestAnimFrame(loop);// MAKE SURE INSIDE HERE
  123.                 drawAllEnemies(); // MAKE SURE INSIDE HERE
  124.         } else if (gameLost) {
  125.                 ctxEnd.drawImage(imgSprite,0,1100,gameWidth,gameHeight,0,0,gameWidth,gameHeight);
  126.                 requestAnimFrame(loop);// MAKE SURE INSIDE HERE
  127.         }
  128.         newSpawn++;
  129.         if(newSpawn == 300) spawnEnemy(2);
  130. }
  131.  
  132. function startLoop() {
  133.         isPlaying = true;
  134.         loop();
  135. }
  136.  
  137. function startDrawing() {
  138.         stopDrawing();
  139.         drawInterval = setInterval(draw, fps);
  140. }
  141.  
  142. function stopDrawing() {
  143.         clearInterval(drawInterval);
  144. }
  145.  
  146. function Jet() {
  147.         this.srcX = 0;
  148.         this.srcY = 500;
  149.         this.drawX = 200;
  150.         this.drawY = 200;
  151.         this.noseX = this.drawX + 90
  152.         this.noseY = this.drawY + 20;
  153.         this.width = 100;
  154.         this.height = 35;
  155.         this.speed = 3;
  156.         this.isUpKey = false;
  157.         this.isDownKey = false;
  158.         this.isLeftKey = false;
  159.         this.isRightKey = false;
  160.         this.isSpacebar = false;
  161.         this.isShooting = false;
  162.         this.bullets = [];
  163.         this.currentBullet = 0;
  164.         for (var i = 0; i < 20; i++) {
  165.                 this.bullets[this.bullets.length] = new Bullet();
  166.         }
  167.         this.points = 0;
  168.        
  169.         this.leftX = this.drawX;
  170.         this.rightX = this.drawX+this.width;
  171.         this.topY = this.drawY;
  172.         this.bottomY = this.drawY + this.height;
  173. }
  174.  
  175. Jet.prototype.endGame = function() {
  176.         gameLost = true;
  177.         clearEnemy();
  178.         jet1=new Jet();
  179.         points=0;
  180.         enemies = [];
  181. }
  182. Jet.prototype.checkHitJet = function() {
  183.         for(i=0;i<enemies.length;i++) {
  184.                 if (rect_collision(this.drawX, this.drawY, this.width, this.height, enemies[i].drawX, enemies[i].drawY, enemies[i].height, enemies[i].width)) {
  185.                         Explosion.drawX = enemies[i].drawX - (Explosion.width/2);
  186.                         Explosion.drawY = enemies[i].drawY - (Explosion.height/2);
  187.                         Explosion.hasHit = true;
  188.                         this.endGame();
  189.                 }
  190.         }
  191. };
  192.  
  193. Jet.prototype.draw = function () {
  194.         clearJet();
  195.         this.updateCoors();
  196.         this.checkKeys();
  197.         this.checkShooting();
  198.         this.drawAllBullets();
  199.         ctxJet.drawImage(imgSprite,this.srcX,this.srcY,this.width,this.height,this.drawX,this.drawY,this.width,this.height);
  200. };
  201.  
  202. Jet.prototype.updateCoors = function() {
  203.         this.noseX = this.drawX + 90;
  204.         this.noseY = this.drawY + 20;
  205.         this.leftX = this.drawX;
  206.         this.rightX = this.drawX+this.width;
  207.         this.topY = this.drawY;
  208.         this.bottomY = this.drawY + this.height;
  209. };
  210. Jet.prototype.checkKeys = function() {
  211.         if (this.isUpKey && this.topY > 0) {
  212.                 this.drawY -= this.speed;
  213.         }
  214.         if (this.isRightKey && this.rightX < gameWidth) {
  215.                 this.drawX += this.speed;
  216.         }
  217.         if (this.isDownKey && this.bottomY < gameHeight) {
  218.                 this.drawY += this.speed;
  219.         }
  220.         if (this.isLeftKey && this.leftX > 0) {
  221.                 this.drawX -= this.speed;
  222.         }
  223. };
  224.  
  225. function draw() {
  226.         drawAllEnemies();
  227.         jet1.draw();
  228. }
  229.  
  230.  
  231. function drawBg() {
  232.         var srcX = 0;
  233.         var srcY = 0;
  234.         var drawX = 0;
  235.         var drawY = 0;
  236.         ctxBg.drawImage(imgSprite,srcX,srcY,gameWidth,gameHeight,drawX,drawY,gameWidth,gameHeight);
  237. }
  238.  
  239. function clearJet() {
  240.         ctxJet.clearRect(0,0,gameWidth,gameHeight);
  241. }
  242.  
  243. function clearBg() {
  244.         ctxBg.clearRect(0,0,gameWidth,gameHeight);
  245. }
  246.  
  247.  
  248. //Event Functions
  249. function checkKeyDown(e) {
  250.         var keyID = (e.keyCode) ? e.keyCode : e.which;
  251.         if (keyID === 38 || keyID === 87) { //38 is up arrow and 87 is W.
  252.                 jet1.isUpKey = true;
  253.                 e.preventDefault();
  254.                
  255.         }
  256.         if (keyID === 39 || keyID === 68) { //39 is right arrow and 68 is D.
  257.                 jet1.isRightKey = true;
  258.                 e.preventDefault();
  259.                
  260.         }
  261.         if (keyID === 40 || keyID === 83) { //40 is down arrow and 83 is S.
  262.                 jet1.isDownKey = true;
  263.                 e.preventDefault();
  264.                
  265.         }
  266.         if (keyID === 37 || keyID === 65) { //37 is left arrow and 65 is A.
  267.                 jet1.isLeftKey = true;
  268.                 e.preventDefault();
  269.                
  270.         }
  271.         if (keyID === 32) { //Space Bar
  272.                 jet1.isSpacebar = true;
  273.                 e.preventDefault();
  274.         }
  275.         if (keyID == 13) { //Shift key
  276.                 if(shiftKey == true) {
  277.                         play();
  278.                         shiftKey = false;
  279.                 } else {
  280.                         pause();
  281.                         shiftKey = true;
  282.                 }
  283.         }
  284.  
  285. }
  286.  
  287. function checkKeyUp(e) {
  288.         var keyID = (e.keyCode) ? e.keyCode : e.which;
  289.         if (keyID === 38 || keyID === 87) { //38 is up arrow and 87 is W.
  290.                 jet1.isUpKey = false;
  291.                 e.preventDefault();
  292.                
  293.         }
  294.         if (keyID === 39 || keyID === 68) { //39 is right arrow and 68 is D.
  295.                 jet1.isRightKey = false;
  296.                 e.preventDefault();
  297.                
  298.         }
  299.         if (keyID === 40 || keyID === 83) { //40 is down arrow and 83 is S.
  300.                 jet1.isDownKey = false;
  301.                 e.preventDefault();
  302.                
  303.         }
  304.         if (keyID === 37 || keyID === 65) { //37 is left arrow and 65 is A.
  305.                 jet1.isLeftKey = false;
  306.                 e.preventDefault();
  307.                
  308.         }
  309.         if (keyID === 32) { //Space Bar
  310.                 jet1.isSpacebar = false;
  311.                
  312.         }
  313. }
  314.  
  315. function mouseClicked(e) {
  316.         if(!isPlaying) {
  317.                 mouseX = e.pageX - canvasBg.offsetLeft;
  318.                 mouseY = e.pageY - canvasBg.offsetTop;
  319.                 if(btnPlay.checkClicked()) playGame();
  320.         } else if (gameLost) {
  321.                 mouseX = e.pageX - canvasBg.offsetLeft;
  322.                 mouseY = e.pageY - canvasBg.offsetTop;
  323.                 if(btnEnd.checkClicked()) {
  324.                         gameLost = false;
  325.                         ctxEnd.clearRect(0,0,gameWidth,gameHeight);
  326.                         spawnEnemy(10);
  327.                         newSpawn = 0;
  328.                 }
  329.         }
  330. }
  331. //Enemy Functions
  332. function Enemy() {
  333.         this.srcX = 200;
  334.         this.srcY = 500;
  335.         this.drawX = (Math.random() *1000)+gameWidth;
  336.         this.drawY = (Math.random() * 500)+gameHeight;
  337.         this.width = 100;
  338.         this.height = 40;
  339.         this.speed = 5;
  340. }
  341.  
  342. Enemy.prototype.checkEscaped = function() {
  343.         if(this.drawX + this.width <= 0) {
  344.                 this.recycleEnemy();
  345.         }
  346. };
  347.  
  348. Enemy.prototype.recycleEnemy = function() {
  349.         this.drawX = (Math.random() *1000)+gameWidth;
  350.         this.drawY = Math.random() * 500;
  351. };
  352. Enemy.prototype.draw = function () {
  353.         ctxEnemy.drawImage(imgSprite,this.srcX,this.srcY,this.width,this.height,this.drawX,this.drawY,this.width,this.height);
  354.         this.drawX-=this.speed;
  355.         this.checkEscaped();
  356. };
  357.  
  358. function clearEnemy() {
  359.         ctxEnemy.clearRect(0,0,gameWidth,gameHeight);
  360. }
  361.  
  362. //Bullet functions
  363. function Bullet() {
  364.         this.srcX = 150;
  365.         this.srcY = 500;
  366.         this.drawX = -10;
  367.         this.drawY = 0;
  368.         this.width = 10;
  369.         this.height = 10;
  370.         this.bulletSpeed= 10;
  371.         this.explosion = new Explosion();
  372. }
  373. Bullet.prototype.checkHitEnemy = function() {
  374.         for(i=0;i<enemies.length;i++) {
  375.                 if(this.drawX >= enemies[i].drawX && this.drawX <= enemies[i].drawX + enemies[i].width && this.drawY >= enemies[i].drawY && this.drawY <= enemies[i].drawY + enemies[i].heigh ||
  376.                  this.drawX + this.width  >= enemies[i].drawX && this.drawX + this.width<= enemies[i].drawX + enemies[i].width && this.drawY >= enemies[i].drawY && this.drawY <= enemies[i].drawY + enemies[i].height ||
  377.                  this.drawX >= enemies[i].drawX && this.drawX <= enemies[i].drawX + enemies[i].width && this.drawY - this.height >= enemies[i].drawY && this.drawY - this.height <= enemies[i].drawY + enemies[i].height ||
  378.                  this.drawX >= enemies[i].drawX && this.drawX <= enemies[i].drawX + enemies[i].width && this.drawY >= enemies[i].drawY && this.drawY <= enemies[i].drawY + enemies[i].heigh) {
  379.                         this.explosion.drawX = enemies[i].drawX - (this.explosion.width/2);
  380.                         this.explosion.drawY = enemies[i].drawY - (this.explosion.height/2);
  381.                         this.explosion.hasHit = true;
  382.                         this.recycle();
  383.                         enemies[i].recycleEnemy();
  384.                         jet1.points += 10;
  385.                 }
  386.         }
  387. };
  388. Bullet.prototype.draw = function () {
  389.         this.drawX += this.bulletSpeed;
  390.         ctxJet.drawImage(imgSprite,this.srcX,this.srcY,this.width,this.height,this.drawX,this.drawY,this.width,this.height);
  391.         this.checkHitEnemy();
  392.         if (this.drawX > gameWidth) {
  393.                 this.recycle();
  394.         }
  395. };
  396.  
  397. Jet.prototype.drawAllBullets = function() {
  398.         for (var i = 0; i < this.bullets.length; i++) {
  399.                 if(this.bullets[i].drawX >= 0) {
  400.                         this.bullets[i].draw();
  401.                 }
  402.                 if(this.bullets[i].explosion.hasHit) {
  403.                         this.bullets[i].explosion.draw();
  404.                 }
  405.         }
  406. };
  407. Jet.prototype.checkShooting = function() {
  408.         if(this.isSpacebar && !this.isShooting) {
  409.                 this.bullets[this.currentBullet].fire(this.noseX, this.noseY);
  410.                 this.isShooting=true;
  411.                 this.currentBullet++;
  412.                 if (this.currentBullet  >= this.bullets.length) {
  413.                         this.currentBullet = 0;
  414.                 }
  415.         } else if (!this.isSpacebar) {
  416.                 this.isShooting = false;
  417.         }
  418. };
  419.  
  420. Bullet.prototype.fire = function (startX, startY) {
  421.         this.drawX = startX;
  422.         this.drawY = startY;
  423. };
  424.  
  425. Bullet.prototype.recycle = function (startX, startY) {
  426.         this.drawX = -20;
  427. };
  428. //end Bullet Functions
  429.  
  430. //explosion functinos
  431. function Explosion() {
  432.         this.srcX1 = 700;
  433.         this.srcY1 = 500;
  434.         this.srcX2 = 750;
  435.         this.srcY2 = 500;
  436.         this.drawX = 0;
  437.         this.drawY = 0;
  438.         this.width = 50;
  439.         this.height = 50;
  440.         this.currentFrame = 0;
  441.         this.totalFrames = 10;
  442.         this.hasHit = false;
  443. }
  444.  
  445. Explosion.prototype.draw = function () {
  446.         if (this.currentFrame <= this.totalFrames) {
  447.                 if (this.currentFrame < 5) {
  448.                         ctxJet.drawImage(imgSprite,this.srcX2, this.srcY2, this.width,this.height,this.drawX,this.drawY,this.width,this.height);
  449.                 } else if (this.currentFrame > 5) {
  450.                         ctxJet.drawImage(imgSprite,this.srcX1,this.srcY1,this.width,this.height,this.drawX,this.drawY,this.width,this.height);
  451.                 }
  452.                 this.currentFrame++;
  453.         } else {
  454.                 this.hasHit = false;
  455.                 this.currentFrame = 0;
  456.         }
  457. };
  458.  
  459. function drawMenu() {
  460.         var srcX = 0;
  461.         var srcY = 600;
  462.         var drawX = 0;
  463.         var drawY = 0;
  464.         ctxBg.drawImage(imgSprite,srcX,srcY,gameWidth,gameHeight,drawX,drawY,gameWidth,gameHeight);
  465. }
  466.  
  467.  
  468. //Button Object
  469.  
  470. function Button(xL, xR, yT, yB) {
  471.         this.xLeft = xL;
  472.         this.xRight = xR;
  473.         this.yTop = yT;
  474.         this.yBottom =yB;
  475. }
  476.  
  477. Button.prototype.checkClicked = function() {
  478.         if (this.xLeft <= mouseX && mouseX <= this.xRight && this.yTop <= mouseY && this.yBottom >= mouseY) return true;
  479. }
  480.  
  481.  
  482. //end of button object
  483.  
  484. function updateHUD() {
  485.         ctxHUD.clearRect(0,0,gameWidth,gameHeight);
  486.         ctxHUD.fillText("Score: " + jet1.points , 680, 30);
  487. }