API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Apr 18th, 2019
94
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.88 KB | None | 0 0
raw download clone embed print report
  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>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!