SHARE
TWEET

Untitled

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