SHARE
TWEET

Untitled

a guest Feb 9th, 2015 839 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.  
  15. var player = {
  16.         x:50,
  17.         spdX:30,
  18.         y:40,
  19.         spdY:5,
  20.         name:'P',
  21.         hp:10,
  22.         width:20,
  23.         height:20,
  24.         color:'green',
  25.         //
  26.         atkSpd:1,
  27. };
  28.  
  29. var enemyList = {};
  30. var upgradeList = {};
  31. var bulletList = {};
  32.  
  33. getDistanceBetweenEntity = function (entity1,entity2){  //return distance (number)
  34.         var vx = entity1.x - entity2.x;
  35.         var vy = entity1.y - entity2.y;
  36.         return Math.sqrt(vx*vx+vy*vy);
  37. }
  38.  
  39. testCollisionEntity = function (entity1,entity2){       //return if colliding (true/false)
  40.         var rect1 = {
  41.                 x:entity1.x-entity1.width/2,
  42.                 y:entity1.y-entity1.height/2,
  43.                 width:entity1.width,
  44.                 height:entity1.height,
  45.         }
  46.         var rect2 = {
  47.                 x:entity2.x-entity2.width/2,
  48.                 y:entity2.y-entity2.height/2,
  49.                 width:entity2.width,
  50.                 height:entity2.height,
  51.         }
  52.         return testCollisionRectRect(rect1,rect2);
  53.        
  54. }
  55.  
  56. Enemy = function (id,x,y,spdX,spdY,width,height){
  57.         var enemy3 = {
  58.                 x:x,
  59.                 spdX:spdX,
  60.                 y:y,
  61.                 spdY:spdY,
  62.                 name:'E',
  63.                 id:id,
  64.                 width:width,
  65.                 height:height,
  66.                 color:'red',
  67.         };
  68.         enemyList[id] = enemy3;
  69.        
  70. }
  71.  
  72. randomlyGenerateEnemy = function(){
  73.         //Math.random() returns a number between 0 and 1
  74.         var x = Math.random()*WIDTH;
  75.         var y = Math.random()*HEIGHT;
  76.         var height = 10 + Math.random()*30;     //between 10 and 40
  77.         var width = 10 + Math.random()*30;
  78.         var id = Math.random();
  79.         var spdX = 5 + Math.random() * 5;
  80.         var spdY = 5 + Math.random() * 5;
  81.         Enemy(id,x,y,spdX,spdY,width,height);
  82.        
  83. }
  84.  
  85.  
  86. Upgrade = function (id,x,y,spdX,spdY,width,height,category,color){
  87.         var asd = {
  88.                 x:x,
  89.                 spdX:spdX,
  90.                 y:y,
  91.                 spdY:spdY,
  92.                 name:'E',
  93.                 id:id,
  94.                 width:width,
  95.                 height:height,
  96.                 color:color,
  97.                 //
  98.                 category:category,
  99.         };
  100.         upgradeList[id] = asd;
  101. }
  102.  
  103. randomlyGenerateUpgrade = function(){
  104.         //Math.random() returns a number between 0 and 1
  105.         var x = Math.random()*WIDTH;
  106.         var y = Math.random()*HEIGHT;
  107.         var height = 10;
  108.         var width = 10;
  109.         var id = Math.random();
  110.         var spdX = 0;
  111.         var spdY = 0;
  112.        
  113.         if(Math.random()<0.5){
  114.                 var category = 'score';
  115.                 var color = 'orange';
  116.         } else {
  117.                 var category = 'atkSpd';
  118.                 var color = 'purple';
  119.         }
  120.        
  121.         Upgrade(id,x,y,spdX,spdY,width,height,category,color);
  122. }
  123.  
  124. Bullet = function (id,x,y,spdX,spdY,width,height){
  125.         var asd = {
  126.                 x:x,
  127.                 spdX:spdX,
  128.                 y:y,
  129.                 spdY:spdY,
  130.                 name:'E',
  131.                 id:id,
  132.                 width:width,
  133.                 height:height,
  134.                 color:'black',
  135.                 //
  136.                 timer:0,
  137.         };
  138.         bulletList[id] = asd;
  139. }
  140.  
  141. randomlyGenerateBullet = function(){
  142.         //Math.random() returns a number between 0 and 1
  143.         var x = player.x;
  144.         var y = player.y;
  145.         var height = 10;
  146.         var width = 10;
  147.         var id = Math.random();
  148.        
  149.         var angle = Math.random()*360;
  150.         var spdX = Math.cos(angle/180*Math.PI)*5;
  151.         var spdY = Math.sin(angle/180*Math.PI)*5;
  152.         Bullet(id,x,y,spdX,spdY,width,height);
  153. }
  154.  
  155.  
  156. document.onmousemove = function(mouse){
  157.         var mouseX = mouse.clientX - document.getElementById('ctx').getBoundingClientRect().left;
  158.         var mouseY = mouse.clientY - document.getElementById('ctx').getBoundingClientRect().top;
  159.        
  160.         if(mouseX < player.width/2)
  161.                 mouseX = player.width/2;
  162.         if(mouseX > WIDTH-player.width/2)
  163.                 mouseX = WIDTH - player.width/2;
  164.         if(mouseY < player.height/2)
  165.                 mouseY = player.height/2;
  166.         if(mouseY > HEIGHT - player.height/2)
  167.                 mouseY = HEIGHT - player.height/2;
  168.        
  169.         player.x = mouseX;
  170.         player.y = mouseY;
  171. }
  172.  
  173.  
  174.  
  175.  
  176.  
  177. updateEntity = function (something){
  178.         updateEntityPosition(something);
  179.         drawEntity(something);
  180. }
  181. updateEntityPosition = function(something){
  182.         something.x += something.spdX;
  183.         something.y += something.spdY;
  184.                        
  185.         if(something.x < 0 || something.x > WIDTH){
  186.                 something.spdX = -something.spdX;
  187.         }
  188.         if(something.y < 0 || something.y > HEIGHT){
  189.                 something.spdY = -something.spdY;
  190.         }
  191. }
  192.  
  193. testCollisionRectRect = function(rect1,rect2){
  194.         return rect1.x <= rect2.x+rect2.width
  195.                 && rect2.x <= rect1.x+rect1.width
  196.                 && rect1.y <= rect2.y + rect2.height
  197.                 && rect2.y <= rect1.y + rect1.height;
  198. }
  199.  
  200.  
  201. drawEntity = function(something){
  202.         ctx.save();
  203.         ctx.fillStyle = something.color;
  204.         ctx.fillRect(something.x-something.width/2,something.y-something.height/2,something.width,something.height);
  205.         ctx.restore();
  206. }
  207.  
  208.  
  209.  
  210. update = function(){
  211.         ctx.clearRect(0,0,WIDTH,HEIGHT);
  212.         frameCount++;
  213.         score++;
  214.        
  215.         if(frameCount % 100 === 0)      //every 4 sec
  216.                 randomlyGenerateEnemy();
  217.  
  218.         if(frameCount % 75 === 0)       //every 3 sec
  219.                 randomlyGenerateUpgrade();
  220.  
  221.         if(frameCount % Math.round(25/player.atkSpd) === 0)     //every 1 sec
  222.                 randomlyGenerateBullet();
  223.  
  224.        
  225.         for(var key in bulletList){
  226.                 updateEntity(bulletList[key]);
  227.                
  228.                 var toRemove = false;
  229.                 bulletList[key].timer++;
  230.                 if(bulletList[key].timer > 75){
  231.                         toRemove = true;
  232.                 }
  233.                
  234.                 for(var key2 in enemyList){
  235.                         var isColliding = testCollisionEntity(bulletList[key],enemyList[key2]);
  236.                         if(isColliding){
  237.                                 toRemove = true;
  238.                                 delete enemyList[key2];
  239.                                 break;
  240.                         }                      
  241.                 }
  242.                 if(toRemove){
  243.                         delete bulletList[key];
  244.                 }
  245.         }
  246.        
  247.         for(var key in upgradeList){
  248.                 updateEntity(upgradeList[key]);
  249.                 var isColliding = testCollisionEntity(player,upgradeList[key]);
  250.                 if(isColliding){
  251.                         if(upgradeList[key].category === 'score')
  252.                                 score += 1000;
  253.                         if(upgradeList[key].category === 'atkSpd')
  254.                                 player.atkSpd += 3;
  255.                         delete upgradeList[key];
  256.                 }
  257.         }
  258.        
  259.         for(var key in enemyList){
  260.                 updateEntity(enemyList[key]);
  261.                
  262.                 var isColliding = testCollisionEntity(player,enemyList[key]);
  263.                 if(isColliding){
  264.                         player.hp = player.hp - 1;
  265.                 }
  266.         }
  267.         if(player.hp <= 0){
  268.                 var timeSurvived = Date.now() - timeWhenGameStarted;           
  269.                 console.log("You lost! You survived for " + timeSurvived + " ms.");            
  270.                 startNewGame();
  271.         }
  272.                        
  273.         drawEntity(player);
  274.         ctx.fillText(player.hp + " Hp",0,30);
  275.         ctx.fillText('Score: ' + score,200,30);
  276. }
  277. startNewGame = function(){
  278.         player.hp = 10;
  279.         timeWhenGameStarted = Date.now();
  280.         frameCount = 0;
  281.         score = 0;
  282.         enemyList = {};
  283.         upgradeList = {};
  284.         bulletList = {};
  285.         randomlyGenerateEnemy();
  286.         randomlyGenerateEnemy();
  287.         randomlyGenerateEnemy();
  288.        
  289. }
  290.  
  291.  
  292.  
  293.  
  294. startNewGame();
  295.  
  296. setInterval(update,40);
  297.  
  298.  
  299.  
  300.  
  301.  
  302.  
  303.  
  304.  
  305.  
  306.  
  307.  
  308.  
  309. </script>
RAW Paste Data
Top