SHARE
TWEET

Untitled

a guest Apr 18th, 2019 70 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1.  
  2. <!-- saved from url=(0031)https://aimojuhani.com/DEMO/89/ -->
  3. <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></head><body><h3>
  4.  
  5.  
  6.  
  7. <title>Untitled Document</title>
  8. <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
  9. <script src="./89_files/peer.min.js.lataus"></script>
  10.  
  11.  
  12. <style>
  13. body {
  14.     margin:0;
  15.     padding:0; 
  16. }
  17. .wrapper {
  18.     width:100vw;   
  19. }
  20. #c {   
  21.     background-color:beige;
  22. }
  23. </style>
  24.     <div class="wrapper">
  25.         <canvas id="c" style="z-index: 1; position:absolute; left:0px; top:0px;" height="500px" width="500px">
  26.         </canvas>
  27.         <canvas id="layer2" style="z-index: 2; position:absolute; left:0px; top:0px;" height="500px" width="500px">
  28.         </canvas>
  29.         <div id="score" style="z-index: 3; position:absolute; color:blue;left:0px; top:0px;font-size:30px;font-family:monospace;">0</div>
  30.        
  31.     </div>
  32.             <p style="
  33.     position:  relative;
  34.     top: 500px;" id="display_key"></p>
  35. <script>
  36. var ice_color = "#63c4e8"
  37. var fire_color = "#ed3b3b"
  38. var wall_color = "#3d3d3d"
  39. var floor_color = "#c2c3c4"
  40. var player = {
  41.     color: '#f44336',
  42.     type: 'ice',
  43.     size:10,
  44.     x: 250,
  45.     y: 200
  46. }
  47.  
  48. //KEYBOARD CONTROL
  49. var dx, dy;
  50.     dx = dy = 0
  51. var key_up, key_down, key_left, key_right
  52. document.addEventListener('keydown', function(event) {
  53.     if(event.keyCode == 32){
  54.         spacebar()
  55.     }
  56.  
  57.     if(event.keyCode == 38) {
  58.         //UP
  59.         key_up = true
  60.     }
  61.    
  62.     if(event.keyCode == 40) {
  63.         //DOWN
  64.         key_down = true
  65.     }
  66.     if(event.keyCode == 37) {
  67.         //LEFT
  68.         key_left = true
  69.     }
  70.    
  71.     if(event.keyCode == 39) {
  72.         //RIGHT
  73.         key_right = true
  74.     }
  75. });
  76. document.addEventListener("keyup", function(event) {
  77.         if(event.keyCode == 38) {
  78.         //UP
  79.         key_up = false
  80.     }
  81.    
  82.     if(event.keyCode == 40) {
  83.         //DOWN
  84.         key_down = false
  85.     }
  86.     if(event.keyCode == 37) {
  87.         //LEFT
  88.         key_left = false
  89.     }
  90.    
  91.     if(event.keyCode == 39) {
  92.         //RIGHT
  93.         key_right = false
  94.     }
  95.    
  96.    
  97. });
  98. // JOYSTICK
  99.  
  100. //====================
  101. var canvas = document.getElementById("c")
  102. var ctx = c.getContext("2d")
  103. var ctx2 = layer2.getContext("2d")
  104. var x = canvas.width
  105. var y = canvas.height
  106.  
  107. var opp_x, opp_y
  108.  
  109.  
  110. // LEVEL
  111. function level_gen() {
  112.     window.data = JSON.parse(json)
  113.     window.current_level = 'start'
  114.     window.mobs = JSON.parse(mobsJSON)
  115.     window.score = 0
  116.     document.getElementById('c').style.backgroundColor = floor_color;
  117. set_player_type_ice()
  118.    
  119.     level = data['start']
  120.     level['unit'] = 500/level['side']
  121.     level['gap'] = level['unit']/2
  122. }
  123. function draw_level() {
  124.     ctx2.clearRect(0, 0, canvas.width, canvas.height)
  125.     ctx2.fillStyle = wall_color
  126.     var rel_x
  127.     var rel_y
  128.     var cb
  129.     for(var i = 0; i <= (level['side']); i++) {
  130.         for(var t = 0; t <= (level['side']); t++) {
  131.             if(level['grid'][t*level['side'] + i] == 1) {
  132.                 var pos_x = i*level['unit']
  133.                 var pos_y = t*level['unit']
  134.                 ctx2.fillRect(pos_x, pos_y, level['unit'], level['unit'])
  135.             }
  136.         }
  137.     }
  138. }
  139.  
  140. function current_box(x, y) {
  141.     var w = Math.floor(y/level['unit'])*level['side']
  142.     w += Math.ceil(x/level['unit'])
  143.     //console.log('X:' + x + ', Y: ' + y + ' , cb: ' + w)
  144.     return w
  145. }
  146.  
  147. function check_x_collision(x, dx, cb, size) {
  148.     size = size/2
  149.     var sub_x = (x + dx) % level['unit'];
  150.     if ((sub_x < size) || (sub_x > (level['unit']-size))) {
  151.         if (dx > 0) {
  152.             if (level['grid'][cb-1] == 1) {
  153.                 dx = 0
  154.             }
  155.         }
  156.         if (dx < 0) {
  157.             if (level['grid'][cb-1] == 1) {
  158.                 dx = 0
  159.             }
  160.         }
  161.     }
  162.     return dx
  163. }
  164. function check_y_collision(y, dy, cb, size) {
  165.     size = size/2
  166.     var sub_y = (y + dy) % level['unit'];
  167.     if ((sub_y < size) || (sub_y > (level['unit']-size))) {
  168.         if (dy > 0) {
  169.             if (level['grid'][cb-1] == 1) {
  170.                 dy = 0
  171.             }
  172.         }
  173.         if (dy <= 0) {
  174.             if (level['grid'][cb-1] == 1) {
  175.                 dy = 0
  176.             }  
  177.         }
  178.     }
  179.     return dy
  180. }
  181. function handle_teleport() {
  182.     var y_switch = false
  183.     var x_switch = false
  184.    
  185.     if((player['y'] <= 0 ) &&
  186.     (y_switch == false)) {
  187.        
  188.         if(data[current_level]['portals']['north'] !== '') {
  189.             current_level = data[current_level]['portals']['north']
  190.             level = data[current_level]
  191.             draw_level()
  192.             player['y'] = 500
  193.             y_switch = true
  194.         }
  195.  
  196.        
  197.     }else if((player['y'] >= 500) &&
  198.     (y_switch == false)) {
  199.        
  200.         if(data[current_level]['portals']['south'] !== '') {
  201.             current_level = data[current_level]['portals']['south']
  202.             level = data[current_level]
  203.             draw_level()
  204.            
  205.             player['y'] = 0
  206.             y_switch = true
  207.         }
  208.        
  209.     } else {
  210.         y_switch = false;  
  211.     }
  212.    
  213.     if((player['x'] <= 0 ) &&
  214.     (x_switch == false)) {
  215.         if(data[current_level]['portals']['west'] !== '') {
  216.             current_level = data[current_level]['portals']['west']
  217.             level = data[current_level]
  218.             draw_level()
  219.        
  220.             player['x'] = 500
  221.             x_switch = true
  222.         }
  223.        
  224.     }else if((player['x'] >= 500 ) &&
  225.     (x_switch == false)) {
  226.         if(data[current_level]['portals']['east'] !== '') {
  227.             current_level = data[current_level]['portals']['east']
  228.             level = data[current_level]
  229.             draw_level()
  230.             player['x'] = 0
  231.             x_switch = true
  232.         }
  233.        
  234.     } else {
  235.         x_switch = false   
  236.     }
  237. }
  238. function move_self() {
  239.     dx = dy = 0
  240.     if (key_left == true) {
  241.         dx += -3   
  242.     } else if (key_right == true) {
  243.         dx += 3
  244.     }
  245.     if (key_up == true) {
  246.         dy += -3   
  247.     } else if (key_down == true) {
  248.         dy += 3
  249.     }
  250.     var cb = current_box(player['x']+dx, player['y']+dy)
  251.    
  252.     dx = check_x_collision(x, dx, cb, player['size'])
  253.     dy = check_y_collision(y, dy, cb, player['size'])
  254.     player['x'] += dx;
  255.     player['y'] += dy;
  256.     handle_teleport()
  257.  
  258. }
  259.  
  260. function check_for_wall(c, d) {
  261.     return level['grid'][c][d]
  262. }
  263.  
  264. function draw_square(self) {   
  265.     var pos_x = self['x'] - self['size']/2
  266.     var pos_y = self['y'] - self['size']/2
  267.     ctx.fillStyle = self['color']
  268.     ctx.fillRect(pos_x, pos_y, self['size'], self['size'])
  269. }
  270. function dist(x,y,x2,y2) {
  271.     return Math.sqrt( (x-x2)*(x-x2) + (y-y2)*(y-y2));
  272. }
  273. function does_collide(player, mob) {
  274.     if(dist(player['x'],player['y'],mob['x'],mob['y']) - (player['size'] + mob['size'])/2 <= 0) {
  275.         return true
  276.     }
  277. }
  278. function set_player_type_ice() {
  279.     player['color'] = ice_color
  280.     player['type'] = "ice"
  281. }
  282. function set_player_type_fire() {
  283.     player['color'] = fire_color
  284.     player['type'] = "fire"
  285. }
  286.  
  287.  
  288. function spacebar() {
  289.     player['type'] == "ice" ? set_player_type_fire() : set_player_type_ice()
  290. }
  291. function kill_mob(mob) {
  292. mob['dead'] = true
  293.     window.score += 10
  294.     document.getElementById('score').innerHTML = score
  295.    
  296. }
  297. function game_over() {
  298.     stop_loop()
  299.     alert('Game over. Score: ' + score)
  300. }
  301.  
  302.  
  303. function stop_loop() {
  304.     clearInterval(interval);
  305. }
  306. function start() {
  307.     level_gen()
  308.     draw_level()
  309.     window.interval = setInterval(function() {
  310.         ctx.clearRect(0, 0, canvas.width, canvas.height)
  311.         move_self(player['x'], player['y'])
  312.         draw_square(player)
  313.        
  314.         //ENEMIES
  315.         if(data[current_level]['mobs'] == true) {
  316.            
  317.             for(var i = 0; i < Object.keys(mobs).length; i++) {
  318.                 var sel = mobs[i]
  319.                 if(sel['dead'] == null) {
  320.                 var temp
  321.                 //initialize colors
  322.                 if(typeof sel['color'] == 'undefined') {
  323.                     sel['type'] == "ice" ? sel['color'] = ice_color : sel['color'] = fire_color
  324.                 }
  325.                 //spaghetti code ahhead,too lazy to triangulate the hypotenuse with the A and B point so the enemies can only movie on one axis :/
  326.                 if(sel['a']['x'] != sel['b']['x']) {
  327.                     if(sel['x'] == sel['b']['x']) {
  328.                         temp = sel['a']['x']
  329.                         sel['a']['x'] = sel['b']['x']
  330.                         sel['b']['x'] = temp   
  331.                     }
  332.                     if(sel['a']['x'] > sel['b']['x']) {
  333.                         sel['x'] -= sel['speed']
  334.                     } else {
  335.                         sel['x']+= sel['speed']
  336.                     }
  337.                    
  338.                 } else {
  339.                     if(sel['y'] == sel['b']['y']) {
  340.                         temp = sel['a']['y']
  341.                         sel['a']['y'] = sel['b']['y']
  342.                         sel['b']['y'] = temp   
  343.                     }
  344.                     if(sel['a']['y'] > sel['b']['y']) {
  345.                         sel['y'] -= sel['speed']
  346.                     } else {
  347.                         sel['y']+= sel['speed']
  348.                     }
  349.                 }
  350.                 //enemy collision
  351.                 if (does_collide(player, sel) == true) {
  352.                     console.log('1')
  353.                     if(player['type'] == sel['type']) {
  354.                         console.log('2')
  355.                         game_over()
  356.                     } else {
  357.                         kill_mob(sel)
  358. if(Object.keys(mobs).length == null) {
  359.         data[current_level]['mobs'] = false
  360.     }
  361.  
  362.                     }
  363.                 }
  364.                 draw_square(sel)
  365.  
  366.                 }
  367.             }
  368.         }
  369.     }, 10)
  370. }
  371. var mobsJSON = '{ "0": { "x": 200, "y": 200, "level": "start", "speed": 0.5, "size":10, "type": "ice", "a": { "x": 200, "y": 200 }, "b": { "x": 250, "y": 200 } },"1":{ "x":200, "y":200, "level":"start", "speed":2, "size":10, "type":"fire", "a":{ "x":150, "y":300 }, "b":{ "x":150, "y":380 } } }'
  372.  
  373. var json = '{ "start": { "side": "5", "unit": 100,"mobs": true, "grid": [1, 1, 1, 1, 1, 1, 0, 0, 0, 1, 1, 0, 0, 0, 1, 1, 0, 0, 0, 1, 1, 0, 0, 0, 1], "portals": { "north": "", "south": "one", "west": "", "east": "" }}, "one": { "side": "5", "unit": 100, "grid": [1, 0, 0, 1, 1, 1, 0, 0, 0, 1, 1, 0, 0, 0, 1, 1, 0, 0, 0, 1, 1, 0, 0, 0, 1], "portals": { "north": "start", "south": "", "west": "", "east": "" } } } '
  374. start()
  375. </script>
  376.  
  377. </h3></body></html>
RAW Paste Data
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
 
Top