SHARE
TWEET

Untitled

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