API tools faq
paste
PyxelPranav

ZoneX Code

PyxelPranav
Oct 7th, 2019
76
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 7.10 KB | None | 0 0
raw download clone embed print report
  1. <body style = "margin-top: 0px;
  2.  margin-bottom: 0px;
  3.  margin-right: 0px;
  4.  margin-left: 0px;">
  5. <canvas id = 'ctx' width = '640' height = '480'></canvas>
  6. </body>
  7. <script>
  8.  
  9. // Set up canvas context and properties
  10.  
  11. var canvas = document.getElementById('ctx');
  12. var ctx = canvas.getContext('2d');
  13.  
  14. var room = {};
  15. room.width = 640;
  16. room.height = 480;
  17. setInterval(update, 1000/60);
  18.  
  19. // Initialize Variables
  20.  
  21. var hp;
  22. var score;
  23. hp = 100;
  24. score = 0;
  25. var traps = [];
  26. var state = 'menu';
  27. var shield = 0;
  28. var shield_text = false;
  29. var cooldown = 0;
  30. var shield_duration = 0;
  31.  
  32. var menu = new Image();
  33. menu.src = 'menu.png';
  34. var shield_img = new Image();
  35. shield_img.src = 'shield.png';
  36.  
  37. // Define colours and colour palette
  38.  
  39. var colours = {};
  40. colours.umber = '#584D3D';
  41. colours.beaver = '#9F956C';
  42. colours.orange = '#FFD5C2';
  43. colours.dark_vanilla = '#D7BEA8';
  44. colours.snow = '#FCFAF9';
  45. colours.kiwi = '#A1E44D';
  46. colours.crimson = '#DC143C';
  47. colours.mint = '#77FF94';
  48. colours.black_olive = '#393E41';
  49. colours.blue_violet = '#8338EC';
  50.  
  51. // Set up boundaries
  52.  
  53. var boundary = {};
  54. boundary.left = {};
  55. boundary.right = {};
  56. boundary.up = {};
  57. boundary.down = {};
  58.  
  59. boundary.left.x = 0;
  60. boundary.left.y = 48;
  61. boundary.left.width = 32;
  62. boundary.left.height = 448;
  63.  
  64. boundary.right.x = 608;
  65. boundary.right.y = 48;
  66. boundary.right.width = 32;
  67. boundary.right.height = 448;
  68.  
  69. boundary.up.x = 0;
  70. boundary.up.y = 48;
  71. boundary.up.width = 640;
  72. boundary.up.height = 32;
  73.  
  74. boundary.down.x = 0;
  75. boundary.down.y = 448;
  76. boundary.down.width = 640;
  77. boundary.down.height = 32;
  78.  
  79. // Define player
  80.  
  81. var player = {};
  82. player.x = 304;
  83. player.y = 240;
  84. player.width = 32;
  85. player.height = 32;
  86. player.colour = '#FF6347';
  87. player.xspd = 0;
  88. player.yspd = 0;
  89. player.pressing_left = false;
  90. player.pressing_right = false;
  91. player.pressing_down = false;
  92. player.pressing_up = false;
  93.  
  94. // Update function
  95.  
  96. function update() {
  97.  
  98.     if(state == 'menu') {
  99.         ctx.drawImage(menu, 0, 0);
  100.     }
  101.  
  102.     if(state == 'game') {
  103.         if(player.pressing_left || player.pressing_right || player.pressing_down || player.pressing_up)
  104.         score++;
  105.         cooldown--;
  106.         shield_duration--;
  107.         move_player();
  108.         player.x += player.xspd;
  109.         player.y += player.yspd;
  110.         if(hp < 0) {
  111.             hp = 0;
  112.             state = 'game_over';
  113.         }
  114.  
  115.         if(shield_duration <= 0) {
  116.             player.colour = '#FF6347';
  117.         } else {
  118.             player.colour = colours.blue_violet;
  119.         }
  120.  
  121.         boundary_collision_check();
  122.  
  123.         ctx.fillStyle = colours.umber;
  124.         ctx.fillRect(0, 0, room.width, room.height);
  125.  
  126.         draw_boundary();
  127.         draw_player();
  128.         draw_score();
  129.         draw_traps();
  130.     }
  131.    
  132.     if(state == 'game_over') {
  133.         ctx.fillStyle = colours.umber;
  134.         ctx.fillRect(0, 0, room.width, room.height);
  135.         ctx.fillStyle = colours.snow;
  136.         ctx.font = '36px Arial';
  137.         ctx.fillText('Game Over!\n Final Score: ' + score, 64, 180);
  138.         ctx.fillText('Press ENTER to try again', 64, 240); 
  139.     }
  140.  
  141.  
  142.     if(shield_text == true && state == 'game') {
  143.         ctx.fillStyle = colours.black_olive;
  144.         ctx.font = '28px Arial';
  145.         ctx.fillText('Shield upgraded to level ' + shield, 4, 470);
  146.     }
  147. }
  148.  
  149. function draw_boundary() {
  150.     ctx.fillStyle = colours.dark_vanilla;
  151.  
  152.     ctx.fillRect(boundary.left.x, boundary.left.y, boundary.left.width, boundary.left.height);
  153.     ctx.fillRect(boundary.right.x, boundary.right.y, boundary.right.width, boundary.right.height);
  154.     ctx.fillRect(boundary.up.x, boundary.up.y, boundary.up.width, boundary.up.height);
  155.     ctx.fillRect(boundary.down.x, boundary.down.y, boundary.down.width, boundary.down.height);
  156.  
  157.     ctx.globalAlpha = (cooldown < 0 && shield > 0) ? 1:0.5;
  158.     ctx.drawImage(shield_img, 340, 0);
  159.     ctx.globalAlpha = 1;
  160.  
  161.     ctx.globalAlpha = 0.5
  162.     ctx.fillStyle = 'white';
  163.     ctx.fillRect(340, 0, 48, ((cooldown/720) * 48));
  164.     ctx.globalAlpha = 1;
  165. }
  166.  
  167. function draw_player() {
  168.     ctx.fillStyle = player.colour;
  169.     ctx.fillRect(player.x, player.y, player.width, player.height);
  170. }
  171.  
  172. function draw_score() {
  173.     ctx.fillStyle = colours.snow;
  174.     ctx.font = '28px Arial';
  175.     ctx.fillText('HP: ', 4, 28);
  176.     ctx.fillText('Score: ' + score, 440, 28);
  177.  
  178.     ctx.fillStyle = colours.crimson;
  179.     ctx.fillRect(64, 4, 200, 32);
  180.     ctx.fillStyle = colours.kiwi;
  181.     ctx.fillRect(64, 4, hp * 2, 32);
  182. }
  183.  
  184. document.onkeydown = function(event) {
  185.     if(event.keyCode == 37) { //left
  186.         player.pressing_left = true;
  187.     }
  188.  
  189.     if(event.keyCode == 38) { //up
  190.         player.pressing_up = true;
  191.     }
  192.  
  193.     if(event.keyCode == 39) { //right
  194.         player.pressing_right = true;
  195.     }
  196.     if(event.keyCode == 40) { //down
  197.         player.pressing_down = true;
  198.     }
  199. }
  200.  
  201. document.onkeyup = function(event) {
  202.     if(event.keyCode == 37) { //left
  203.         player.pressing_left = false;
  204.     }
  205.  
  206.     if(event.keyCode == 38) { //up
  207.         player.pressing_up = false;
  208.     }
  209.  
  210.     if(event.keyCode == 39) { //right
  211.         player.pressing_right = false;
  212.     }
  213.  
  214.     if(event.keyCode == 40) { //down
  215.         player.pressing_down = false;
  216.     }
  217.  
  218.     if(event.keyCode == 83 && state == 'menu') {
  219.         state = 'game';
  220.         setInterval(generate_trap, Math.round(Math.random() * 10000));
  221.         setInterval(shield_add, 20000);
  222.     }
  223.  
  224.     if(event.keyCode == 68) {
  225.         if(cooldown < 0 && shield > 0) {
  226.             shield_duration = shield * 100;
  227.             cooldown = 720;
  228.         }
  229.     }
  230.  
  231.     if(event.keyCode == 13 && state == 'game_over') {
  232.         hp = 100;
  233.         score = 0;
  234.         traps = [];
  235.         player.x = 304;
  236.         player.y = 240;
  237.         state = 'game';
  238.         shield = 0;
  239.         shield_text = 0;
  240.     }
  241. }
  242.  
  243. function boundary_collision_check() {
  244.     if(player.y < 80) player.y = 80;
  245.     if(player.x < 32) player.x = 32;
  246.     if(player.x > 576) player.x = 576;
  247.     if(player.y > 416) player.y = 416;
  248. }
  249.  
  250. function move_player() {
  251.     if(player.pressing_left) {
  252.         player.x -= 5;
  253.     }
  254.  
  255.     if(player.pressing_right) {
  256.         player.x += 5;
  257.     }
  258.  
  259.     if(player.pressing_up) {
  260.         player.y -= 5;
  261.     }
  262.  
  263.     if(player.pressing_down) {
  264.         player.y += 5;
  265.     }
  266. }
  267.  
  268. function generate_trap() {
  269.     if(state == 'game') {
  270.         var trap = {};
  271.  
  272.         trap.x = Math.floor(Math.random() * 576) + 32;
  273.         trap.y = Math.floor(Math.random() * 448) + 80;
  274.         trap.width  = 32;
  275.         trap.height = 32;
  276.         trap.xspd = Math.floor(Math.random() * 6) + 1;
  277.         trap.yspd = Math.floor(Math.random() * 6) + 1;
  278.         traps.push(trap);
  279.     }
  280. }
  281.  
  282. function draw_traps() {
  283.     if(state == 'game') {
  284.         ctx.fillStyle = colours.mint;
  285.         for(i in traps) {
  286.             traps[i].x += traps[i].xspd;
  287.             traps[i].y += traps[i].yspd;
  288.  
  289.             if(traps[i].y < 80) {
  290.                 traps[i].y = 80;
  291.                 traps[i].yspd = -traps[i].yspd;
  292.             }
  293.  
  294.             if(traps[i].x < 32) {
  295.                 traps[i].x = 32;
  296.                 traps[i].xspd = -traps[i].xspd;
  297.             }
  298.  
  299.             if(traps[i].x > 576) {
  300.                 traps[i].x = 576;
  301.                 traps[i].xspd = -traps[i].xspd;
  302.             }
  303.             if(traps[i].y > 416) {
  304.                 traps[i].y = 416;
  305.                 traps[i].yspd = -traps[i].yspd;
  306.             }
  307.  
  308.             if(player.x > traps[i].x && player.x < traps[i].x + traps[i].width && player.y > traps[i].y
  309.                 && player.y < traps[i].y + traps[i].height && shield_duration <= 0) {
  310.                 hp--;
  311.             }
  312.  
  313.             ctx.fillRect(traps[i].x, traps[i].y, traps[i].width, traps[i].height);
  314.         }
  315.     }
  316. }
  317.  
  318. function shield_add() {
  319.     if(state == 'game') {
  320.         shield += 1;
  321.         shield_text = true;
  322.     }
  323. }
  324.  
  325. </script>
  326. <script>
  327.     window.addEventListener("keydown", function(e) {
  328.     if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
  329.      e.preventDefault();
  330.     }
  331.     }, false);
  332. </script>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!