SHARE
TWEET

Untitled

a guest Jan 29th, 2015 1,022 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 player = {
  14.         x:50,
  15.         spdX:30,
  16.         y:40,
  17.         spdY:5,
  18.         name:'P',
  19.         hp:10,
  20.         width:20,
  21.         height:20,
  22.         color:'green',
  23. };
  24.  
  25. var enemyList = {};
  26.  
  27.  
  28. getDistanceBetweenEntity = function (entity1,entity2){  //return distance (number)
  29.         var vx = entity1.x - entity2.x;
  30.         var vy = entity1.y - entity2.y;
  31.         return Math.sqrt(vx*vx+vy*vy);
  32. }
  33.  
  34. testCollisionEntity = function (entity1,entity2){       //return if colliding (true/false)
  35.         var rect1 = {
  36.                 x:entity1.x-entity1.width/2,
  37.                 y:entity1.y-entity1.height/2,
  38.                 width:entity1.width,
  39.                 height:entity1.height,
  40.         }
  41.         var rect2 = {
  42.                 x:entity2.x-entity2.width/2,
  43.                 y:entity2.y-entity2.height/2,
  44.                 width:entity2.width,
  45.                 height:entity2.height,
  46.         }
  47.         return testCollisionRectRect(rect1,rect2);
  48.        
  49. }
  50.  
  51. Enemy = function (id,x,y,spdX,spdY,width,height){
  52.         var enemy3 = {
  53.                 x:x,
  54.                 spdX:spdX,
  55.                 y:y,
  56.                 spdY:spdY,
  57.                 name:'E',
  58.                 id:id,
  59.                 width:width,
  60.                 height:height,
  61.                 color:'red',
  62.         };
  63.         enemyList[id] = enemy3;
  64.        
  65. }
  66.  
  67. document.onmousemove = function(mouse){
  68.         var mouseX = mouse.clientX - document.getElementById('ctx').getBoundingClientRect().left;
  69.         var mouseY = mouse.clientY - document.getElementById('ctx').getBoundingClientRect().top;
  70.        
  71.         if(mouseX < player.width/2)
  72.                 mouseX = player.width/2;
  73.         if(mouseX > WIDTH-player.width/2)
  74.                 mouseX = WIDTH - player.width/2;
  75.         if(mouseY < player.height/2)
  76.                 mouseY = player.height/2;
  77.         if(mouseY > HEIGHT - player.height/2)
  78.                 mouseY = HEIGHT - player.height/2;
  79.        
  80.         player.x = mouseX;
  81.         player.y = mouseY;
  82. }
  83.  
  84.  
  85.  
  86.  
  87.  
  88. updateEntity = function (something){
  89.         updateEntityPosition(something);
  90.         drawEntity(something);
  91. }
  92. updateEntityPosition = function(something){
  93.         something.x += something.spdX;
  94.         something.y += something.spdY;
  95.                        
  96.         if(something.x < 0 || something.x > WIDTH){
  97.                 something.spdX = -something.spdX;
  98.         }
  99.         if(something.y < 0 || something.y > HEIGHT){
  100.                 something.spdY = -something.spdY;
  101.         }
  102. }
  103.  
  104. testCollisionRectRect = function(rect1,rect2){
  105.         return rect1.x <= rect2.x+rect2.width
  106.                 && rect2.x <= rect1.x+rect1.width
  107.                 && rect1.y <= rect2.y + rect2.height
  108.                 && rect2.y <= rect1.y + rect1.height;
  109. }
  110.  
  111.  
  112. drawEntity = function(something){
  113.         ctx.save();
  114.         ctx.fillStyle = something.color;
  115.         ctx.fillRect(something.x-something.width/2,something.y-something.height/2,something.width,something.height);
  116.         ctx.restore();
  117. }
  118.  
  119.  
  120.  
  121. update = function(){
  122.         ctx.clearRect(0,0,WIDTH,HEIGHT);
  123.         frameCount++;
  124.        
  125.         if(frameCount % 100 === 0)      //every 4 sec
  126.                 randomlyGenerateEnemy();
  127.  
  128.                
  129.         for(var key in enemyList){
  130.                 updateEntity(enemyList[key]);
  131.                
  132.                 var isColliding = testCollisionEntity(player,enemyList[key]);
  133.                 if(isColliding){
  134.                         player.hp = player.hp - 1;
  135.                 }
  136.         }
  137.         if(player.hp <= 0){
  138.                 var timeSurvived = Date.now() - timeWhenGameStarted;           
  139.                 console.log("You lost! You survived for " + timeSurvived + " ms.");            
  140.                 startNewGame();
  141.         }
  142.                        
  143.         drawEntity(player);
  144.         ctx.fillText(player.hp + " Hp",0,30);
  145. }
  146. startNewGame = function(){
  147.         player.hp = 10;
  148.         timeWhenGameStarted = Date.now();
  149.         frameCount = 0;
  150.         enemyList = {};
  151.         randomlyGenerateEnemy();
  152.         randomlyGenerateEnemy();
  153.         randomlyGenerateEnemy();
  154.        
  155. }
  156.  
  157.  
  158. randomlyGenerateEnemy = function(){
  159.         //Math.random() returns a number between 0 and 1
  160.         var x = Math.random()*WIDTH;
  161.         var y = Math.random()*HEIGHT;
  162.         var height = 10 + Math.random()*30;     //between 10 and 40
  163.         var width = 10 + Math.random()*30;
  164.         var id = Math.random();
  165.         var spdX = 5 + Math.random() * 5;
  166.         var spdY = 5 + Math.random() * 5;
  167.         Enemy(id,x,y,spdX,spdY,width,height);
  168.        
  169. }
  170.  
  171. startNewGame();
  172.  
  173. setInterval(update,40);
  174.  
  175.  
  176.  
  177.  
  178.  
  179.  
  180.  
  181.  
  182.  
  183.  
  184.  
  185.  
  186. </script>
RAW Paste Data
Top