SHARE
TWEET

Untitled

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