SHARE
TWEET

Untitled

a guest Mar 25th, 2015 880 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <canvas id="ctx" width="500" height="500" style="border:1px solid #000000;"></canvas>
  2.  
  3. <script>
  4. var ctx = document.getElementById("ctx").getContext("2d");
  5. ctx.font = '30px Arial';
  6.  
  7. var HEIGHT = 500;
  8. var WIDTH = 500;
  9. var timeWhenGameStarted = Date.now();   //return time in ms
  10.  
  11. var frameCount = 0;
  12.  
  13. var score = 0;
  14. var player;
  15.  
  16. Entity = function(type,id,x,y,spdX,spdY,width,height,color){
  17.         var self = {
  18.                 type:type,
  19.                 x:x,
  20.                 spdX:spdX,
  21.                 y:y,
  22.                 spdY:spdY,
  23.                 width:width,
  24.                 height:height,
  25.                 color:color,
  26.         };
  27.         self.update = function(){
  28.                 self.updatePosition();
  29.                 self.draw();
  30.         }
  31.         self.updatePosition = function(){
  32.                 if(self.type === 'player'){
  33.                         if(self.pressingRight)
  34.                                 self.x += 10;
  35.                         if(self.pressingLeft)
  36.                                 self.x -= 10;  
  37.                         if(self.pressingDown)
  38.                                 self.y += 10;  
  39.                         if(self.pressingUp)
  40.                                 self.y -= 10;  
  41.                        
  42.                         //ispositionvalid
  43.                         if(self.x < self.width/2)
  44.                                 self.x = self.width/2;
  45.                         if(self.x > WIDTH-self.width/2)
  46.                                 self.x = WIDTH - self.width/2;
  47.                         if(self.y < self.height/2)
  48.                                 self.y = self.height/2;
  49.                         if(self.y > HEIGHT - self.height/2)
  50.                                 self.y = HEIGHT - self.height/2;
  51.                
  52.                 } else {
  53.                         self.x += self.spdX;
  54.                         self.y += self.spdY;
  55.                                        
  56.                         if(self.x < 0 || self.x > WIDTH){
  57.                                 self.spdX = -self.spdX;
  58.                         }
  59.                         if(self.y < 0 || self.y > HEIGHT){
  60.                                 self.spdY = -self.spdY;
  61.                         }
  62.                 }
  63.         }
  64.         self.getDistance = function (entity2){  //return distance (number)
  65.                 var vx = self.x - entity2.x;
  66.                 var vy = self.y - entity2.y;
  67.                 return Math.sqrt(vx*vx+vy*vy);
  68.         }
  69.         self.testCollision = function(entity2){ //return if colliding (true/false)
  70.                 var rect1 = {
  71.                         x:self.x-self.width/2,
  72.                         y:self.y-self.height/2,
  73.                         width:self.width,
  74.                         height:self.height,
  75.                 }
  76.                 var rect2 = {
  77.                         x:entity2.x-entity2.width/2,
  78.                         y:entity2.y-entity2.height/2,
  79.                         width:entity2.width,
  80.                         height:entity2.height,
  81.                 }
  82.                 return testCollisionRectRect(rect1,rect2);
  83.         }
  84.         self.draw = function(){
  85.                 ctx.save();
  86.                 ctx.fillStyle = self.color;
  87.                 ctx.fillRect(self.x-self.width/2,self.y-self.height/2,self.width,self.height);
  88.                 ctx.restore();
  89.         }
  90.        
  91.         return self;
  92. }
  93.  
  94. Actor = function(type,id,x,y,spdX,spdY,width,height,color){
  95.         var self = Entity(type,id,x,y,spdX,spdY,width,height,color);
  96.        
  97.         self.attackCounter = 0;
  98.         self.aimAngle = 0;
  99.         self.atkSpd = 1;
  100.        
  101.         self.performAttack = function(){
  102.                 if(self.attackCounter > 25){    //every 1 sec
  103.                         self.attackCounter = 0;
  104.                         generateBullet(self);
  105.                 }
  106.         }
  107.         self.performSpecialAttack = function(){
  108.                 if(self.attackCounter > 50){    //every 1 sec
  109.                         self.attackCounter = 0;
  110.                         /*
  111.                         for(var i = 0 ; i < 360; i++){
  112.                                 generateBullet(self,i);
  113.                         }
  114.                         */
  115.                         generateBullet(self,self.aimAngle - 5);
  116.                         generateBullet(self,self.aimAngle);
  117.                         generateBullet(self,self.aimAngle + 5);
  118.                 }
  119.         }
  120.         return self;
  121. }
  122.  
  123. Player = function(){
  124.         var p = Actor('player','myId',50,40,30,5,20,20,'green');
  125.                
  126.         p.pressingDown = false;
  127.         p.pressingUp = false;
  128.         p.pressingLeft = false;
  129.         p.pressingRight = false;
  130.         return p;
  131. }
  132.  
  133. var enemyList = {};
  134. var upgradeList = {};
  135. var bulletList = {};
  136.  
  137. Enemy = function(id,x,y,spdX,spdY,width,height){
  138.         var self = Actor('enemy',id,x,y,spdX,spdY,width,height,'red');
  139.         enemyList[id] = self;
  140. }
  141.  
  142. randomlyGenerateEnemy = function(){
  143.         //Math.random() returns a number between 0 and 1
  144.         var x = Math.random()*WIDTH;
  145.         var y = Math.random()*HEIGHT;
  146.         var height = 10 + Math.random()*30;     //between 10 and 40
  147.         var width = 10 + Math.random()*30;
  148.         var id = Math.random();
  149.         var spdX = 5 + Math.random() * 5;
  150.         var spdY = 5 + Math.random() * 5;
  151.         Enemy(id,x,y,spdX,spdY,width,height);
  152.        
  153. }
  154.  
  155. Upgrade = function(id,x,y,spdX,spdY,width,height,color,category){
  156.         var self = Entity('upgrade',id,x,y,spdX,spdY,width,height,color);
  157.         self.category = category;
  158.         upgradeList[id] = self;
  159. }
  160.  
  161. randomlyGenerateUpgrade = function(){
  162.         //Math.random() returns a number between 0 and 1
  163.         var x = Math.random()*WIDTH;
  164.         var y = Math.random()*HEIGHT;
  165.         var height = 10;
  166.         var width = 10;
  167.         var id = Math.random();
  168.         var spdX = 0;
  169.         var spdY = 0;
  170.        
  171.         if(Math.random()<0.5){
  172.                 var category = 'score';
  173.                 var color = 'orange';
  174.         } else {
  175.                 var category = 'atkSpd';
  176.                 var color = 'purple';
  177.         }
  178.        
  179.         Upgrade(id,x,y,spdX,spdY,width,height,color,category);
  180. }
  181.  
  182. Bullet = function (id,x,y,spdX,spdY,width,height){
  183.         var self = Entity('bullet',id,x,y,spdX,spdY,width,height,'black');
  184.         self.timer = 0;
  185.         bulletList[id] = self;
  186. }
  187.  
  188. generateBullet = function(actor,aimOverwrite){
  189.         //Math.random() returns a number between 0 and 1
  190.         var x = actor.x;
  191.         var y = actor.y;
  192.         var height = 10;
  193.         var width = 10;
  194.         var id = Math.random();
  195.        
  196.         var angle;
  197.         if(aimOverwrite !== undefined)
  198.                 angle = aimOverwrite;
  199.         else angle = actor.aimAngle;
  200.        
  201.         var spdX = Math.cos(angle/180*Math.PI)*5;
  202.         var spdY = Math.sin(angle/180*Math.PI)*5;
  203.         Bullet(id,x,y,spdX,spdY,width,height);
  204. }
  205.  
  206. testCollisionRectRect = function(rect1,rect2){
  207.         return rect1.x <= rect2.x+rect2.width
  208.                 && rect2.x <= rect1.x+rect1.width
  209.                 && rect1.y <= rect2.y + rect2.height
  210.                 && rect2.y <= rect1.y + rect1.height;
  211. }
  212.  
  213. document.onclick = function(mouse){
  214.         player.performAttack();
  215. }
  216.  
  217. document.oncontextmenu = function(mouse){
  218.         player.performSpecialAttack();
  219.         mouse.preventDefault();
  220. }
  221.  
  222. document.onmousemove = function(mouse){
  223.         var mouseX = mouse.clientX - document.getElementById('ctx').getBoundingClientRect().left;
  224.         var mouseY = mouse.clientY - document.getElementById('ctx').getBoundingClientRect().top;
  225.        
  226.         mouseX -= player.x;
  227.         mouseY -= player.y;
  228.        
  229.         player.aimAngle = Math.atan2(mouseY,mouseX) / Math.PI * 180;
  230. }
  231.  
  232. document.onkeydown = function(event){
  233.         if(event.keyCode === 68)        //d
  234.                 player.pressingRight = true;
  235.         else if(event.keyCode === 83)   //s
  236.                 player.pressingDown = true;
  237.         else if(event.keyCode === 65) //a
  238.                 player.pressingLeft = true;
  239.         else if(event.keyCode === 87) // w
  240.                 player.pressingUp = true;
  241. }
  242.  
  243. document.onkeyup = function(event){
  244.         if(event.keyCode === 68)        //d
  245.                 player.pressingRight = false;
  246.         else if(event.keyCode === 83)   //s
  247.                 player.pressingDown = false;
  248.         else if(event.keyCode === 65) //a
  249.                 player.pressingLeft = false;
  250.         else if(event.keyCode === 87) // w
  251.                 player.pressingUp = false;
  252. }
  253.  
  254. update = function(){
  255.         ctx.clearRect(0,0,WIDTH,HEIGHT);
  256.         frameCount++;
  257.         score++;
  258.        
  259.         if(frameCount % 100 === 0)      //every 4 sec
  260.                 randomlyGenerateEnemy();
  261.  
  262.         if(frameCount % 75 === 0)       //every 3 sec
  263.                 randomlyGenerateUpgrade();
  264.        
  265.         player.attackCounter += player.atkSpd;
  266.        
  267.        
  268.         for(var key in bulletList){
  269.                 bulletList[key].update();
  270.                
  271.                 var toRemove = false;
  272.                 bulletList[key].timer++;
  273.                 if(bulletList[key].timer > 75){
  274.                         toRemove = true;
  275.                 }
  276.                
  277.                 for(var key2 in enemyList){
  278.                         var isColliding = bulletList[key].testCollision(enemyList[key2]);
  279.                         if(isColliding){
  280.                                 toRemove = true;
  281.                                 delete enemyList[key2];
  282.                                 break;
  283.                         }                      
  284.                 }
  285.                 if(toRemove){
  286.                         delete bulletList[key];
  287.                 }
  288.         }
  289.        
  290.         for(var key in upgradeList){
  291.                 upgradeList[key].update();
  292.                 var isColliding = player.testCollision(upgradeList[key]);
  293.                 if(isColliding){
  294.                         if(upgradeList[key].category === 'score')
  295.                                 score += 1000;
  296.                         if(upgradeList[key].category === 'atkSpd')
  297.                                 player.atkSpd += 3;
  298.                         delete upgradeList[key];
  299.                 }
  300.         }
  301.        
  302.         for(var key in enemyList){
  303.                 enemyList[key].update();
  304.                
  305.                 var isColliding = player.testCollision(enemyList[key]);
  306.                 if(isColliding){
  307.                         player.hp = player.hp - 1;
  308.                 }
  309.         }
  310.         if(player.hp <= 0){
  311.                 var timeSurvived = Date.now() - timeWhenGameStarted;           
  312.                 console.log("You lost! You survived for " + timeSurvived + " ms.");            
  313.                 startNewGame();
  314.         }
  315.         player.update();
  316.         ctx.fillText(player.hp + " Hp",0,30);
  317.         ctx.fillText('Score: ' + score,200,30);
  318. }
  319.  
  320. startNewGame = function(){
  321.         player.hp = 10;
  322.         timeWhenGameStarted = Date.now();
  323.         frameCount = 0;
  324.         score = 0;
  325.         enemyList = {};
  326.         upgradeList = {};
  327.         bulletList = {};
  328.         randomlyGenerateEnemy();
  329.         randomlyGenerateEnemy();
  330.         randomlyGenerateEnemy();
  331.        
  332. }
  333.  
  334. player = Player();
  335. startNewGame();
  336.  
  337. setInterval(update,40);
  338.  
  339.  
  340.  
  341.  
  342.  
  343.  
  344.  
  345.  
  346.  
  347.  
  348.  
  349.  
  350. </script>
RAW Paste Data
Top