API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Apr 19th, 2018
69
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.97 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>Snake</title>
  6. <style>
  7. body
  8. {
  9. background:crimson;
  10. color:#FFF;
  11. }
  12. canvas
  13. {
  14. background:white;
  15. }
  16. #controls
  17. {
  18. position:absolute;
  19. top:0;
  20. right:0;
  21. margin:5px;
  22. }
  23.  
  24.  
  25. </style>
  26. <script type="text/javascript">
  27.  
  28. // dette er snake objektet, vi bruker ikke new operator for de det finnes bare en snake i spilet.
  29. var snake = {};
  30.  
  31. window.onload = function(){
  32. document.addEventListener("fullscreenchange", function(){snake.game.adjust();});
  33. document.addEventListener("webkitfullscreenchange", function(){snake.game.adjust();});
  34. document.addEventListener("mozfullscreenchange", function(){snake.game.adjust();});
  35. document.addEventListener("MSFullscreenChange", function(){snake.game.adjust();});
  36.  
  37. // unamed function
  38. snake.game = (function()
  39. {
  40. var canvas = document.getElementById('canvas');
  41. var ctx = canvas.getContext('2d');
  42. var old_direction = 'right';
  43. var direction = 'right';
  44. var block = 25;
  45. var score = 0;
  46. var refresh_rate = 75;
  47. var pos = [[5,1],[4,1],[3,1],[2,1],[1,1]];
  48. var scoreboard = document.getElementById('scoreboard');
  49. var control = document.getElementById('controls');
  50. var keys = {
  51. 37 : 'left',
  52. 38 : 'up',
  53. 39 : 'right',
  54. 40 : 'down'
  55. };
  56.  
  57.  
  58.  
  59. function adjust()
  60. {
  61. if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement )
  62. {
  63. canvas.width=window.innerWidth;
  64. canvas.height=window.innerHeight;
  65. control.style.display='none';
  66. }
  67. else
  68. {
  69. canvas.width=830;
  70. canvas.height=600;
  71. control.style.display='inline';
  72. }
  73. }
  74. var food = [Math.round(Math.random(4)*(canvas.width - 10)), Math.round(Math.random(4)*(canvas.height - 10)),];
  75. function todraw()
  76. {
  77. for(var i = 0; i < pos.length; i++)
  78. {
  79. draw(pos[i]);
  80. }
  81. }
  82. function giveLife()
  83. {
  84. var nextPosition = pos[0].slice();
  85. switch(old_direction)
  86. {
  87. case 'right':
  88. nextPosition[0] += 1;
  89. break;
  90. case 'left':
  91. nextPosition[0] -= 1;
  92. break;
  93. case 'up':
  94. nextPosition[1] -= 1;
  95. break;
  96. case 'down':
  97. nextPosition[1] += 1;
  98. break;
  99. }
  100. pos.unshift(nextPosition);
  101. pos.pop();
  102. }
  103. function grow()
  104. {
  105. var nextPosition = pos[0].slice();
  106. switch(old_direction)
  107. {
  108. case 'right':
  109. nextPosition[0] += 1;
  110. break;
  111. case 'left':
  112. nextPosition[0] -= 1;
  113. break;
  114. case 'up':
  115. nextPosition[1] -= 1;
  116. break;
  117. case 'down':
  118. nextPosition[1] += 1;
  119. break;
  120. }
  121. pos.unshift(nextPosition);
  122. }
  123. function loop()
  124. {
  125. ctx.clearRect(0,0,canvas.width,canvas.height);
  126. todraw();
  127. giveLife();
  128. feed();
  129. // her har slangen spist eple
  130. if(is_catched(pos[0][0]*block,pos[0][1]*block,block,block,food[0],food[1],25,25))
  131. {
  132. score += 1; //bateValue
  133. createfood();
  134. scoreboard.innerHTML = score;
  135. grow();
  136. if(refresh_rate > 100)
  137. {
  138. refresh_rate -=5;
  139. }
  140. }
  141. snake.game.status = setTimeout(function() { loop(); },refresh_rate);
  142. }
  143. window.onkeydown = function(event){
  144. // her henter vi ut key kode på tasten og konverter til tekst
  145. direction = keys[event.keyCode];
  146. if(direction)
  147. {
  148. setWay(direction);
  149. event.preventDefault();
  150. }
  151. };
  152. function setWay(direction)
  153. {
  154. switch(direction)
  155. {
  156. case 'left':
  157. if(old_direction!='right')
  158. {
  159. old_direction = direction;
  160. }
  161. break;
  162. case 'right':
  163. if(old_direction!='left')
  164. {
  165. old_direction = direction;
  166. }
  167. break;
  168. case 'up':
  169. if(old_direction!='down')
  170. {
  171. old_direction = direction;
  172. }
  173. break;
  174. case 'down':
  175. if(old_direction!='up')
  176. {
  177. old_direction = direction;
  178. }
  179. break;
  180. }
  181.  
  182. }
  183. function feed()
  184. {
  185. ctx.beginPath();
  186.  
  187.  
  188. ctx.fillStyle = "#ff0000";
  189.  
  190.  
  191.  
  192. ctx.fillRect(food[0],food[1],20,20);
  193. ctx.fill();
  194. ctx.closePath();
  195. }
  196. function createfood()
  197. {
  198. food = [Math.round(Math.random(4)*850), Math.round(Math.random(4)*600)];
  199. }
  200. function is_catched(ax,ay,awidth,aheight,bx,by,bwidth,bheight) {
  201. return !(
  202. ((ay + aheight) < (by)) ||
  203. (ay > (by + bheight)) ||
  204. ((ax + awidth) < bx) ||
  205. (ax > (bx + bwidth))
  206. );
  207. }
  208.  
  209. function draw(pos)
  210. {
  211. var x = pos[0] * block;
  212. var y = pos[1] * block;
  213. if(x >= canvas.width || x < 0 || y >= canvas.height || y< 0)
  214. {
  215. document.getElementById('pause').disabled='true';
  216. snake.game.status=false;
  217. ctx.clearRect(0,0,canvas.width,canvas.height);
  218. ctx.font='40px san-serif';
  219. ctx.fillText('Game Over',300,250);
  220. ctx.font = '20px san-serif';
  221. ctx.fillStyle='#000000';
  222. ctx.fillText('To Play again Refresh the page or click the Restarts button',200,300);
  223. //return;
  224.  
  225. // husk å kommenter hvorfor
  226. throw ('Game Over');
  227. }
  228. else
  229. {
  230. ctx.beginPath();
  231. ctx.fillStyle='#24ff34';
  232. ctx.fillRect(x,y,block,block);
  233. ctx.closePath();
  234. }
  235. }
  236.  
  237. // her sjekkes det om spillet er stoppa, går/spilles eller om det er satt på pause
  238. function pause(elem)
  239. {
  240.  
  241. if(snake.game.status)
  242. {
  243. clearTimeout(snake.game.status);
  244. snake.game.status=false;
  245. elem.value='Play'
  246. }
  247. else
  248. {
  249. loop();
  250. elem.value='Pause';
  251. }
  252. }
  253. function begin()
  254. {
  255. loop();
  256. }
  257. function restart()
  258. {
  259. location.reload();
  260. }
  261.  
  262. // før start(eller etter man har trykket restart) kommer det opp en intro tekst
  263. function start()
  264. {
  265. ctx.fillStyle='#000000';
  266. ctx.fillRect(0,0,canvas.width,canvas.height);
  267. ctx.fillStyle='#ffffff';
  268. ctx.font='40px helvatica';
  269. ctx.fillText('Group 8',370,140);
  270. ctx.font='20px san-serif';
  271. ctx.fillText('presents',395,190);
  272. ctx.font='italic 60px san-serif';
  273. ctx.fillText('Feed The Snake',240,280);
  274. }
  275.  
  276. // Dette er?
  277. return {
  278. pause: pause,
  279. restart : restart,
  280. start : start,
  281. begin: begin,
  282. adjust : adjust,
  283. };
  284. })();
  285. snake.game.start();
  286. }
  287. </script>
  288. </head>
  289. <body>
  290. <canvas width="1050" height="650" id="canvas" style="border:1px solid #333;" onclick="snake.game.begin();">
  291. </canvas>
  292. <div id="controls" style="float:right; text-align:center;">
  293. <input type="button" id="pause" value="Play" onClick="snake.game.pause(this);" style="height:90px;font-size:50pt;" accesskey="p">
  294. <input type="button" id="restart" value="Restart" style="height:90px;font-size:50pt;" onClick="snake.game.restart();">
  295. <br/><br/>
  296. <div style="font-size:100px;">
  297. Score :
  298. <span id="scoreboard">0</span>
  299. </div>
  300. </div>
  301. </body>
  302. </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!