JAVASCRIPT/HTML5 - Snake game example


SUBMITTED BY: efbee

DATE: Oct. 4, 2016, 11:04 p.m.

UPDATED: Oct. 4, 2016, 11:05 p.m.

FORMAT: Text only

SIZE: 9.2 kB

HITS: 1405

  1. window.addEventListener("keydown", moveSnake, false);
  2. var game_over = false;
  3. var snake = new Array(4);
  4. var snakeLen = 4;
  5. var dir = "right";
  6. var food = "";
  7. var level = new Array();
  8. var total_height = 640;
  9. var total_width = 640;
  10. var lvl_width = 20;
  11. var lvl_height = 20;
  12. var speed = 16;
  13. snakeHeadImage = new Image();
  14. snakeHeadImage.src = "resources/head.png";
  15. snakeBodyImage = new Image();
  16. snakeBodyImage.src = "resources/body.png";
  17. snakeTailImage = new Image();
  18. snakeTailImage.src = "resources/tail.png";
  19. //food
  20. foodImage = new Image();
  21. foodImage.src = "resources/food.png";
  22. create_snake();
  23. create_food();
  24. for(i = 0; i < lvl_width; i++)
  25. {
  26. level[i] = new Array(lvl_height);
  27. for(var ii = 0; ii < lvl_height; ii++)
  28. {
  29. level[i][ii] = -1;
  30. }
  31. }
  32. window.requestAnimFrame = (function(callback)
  33. {
  34. return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
  35. function(callback)
  36. {
  37. window.setTimeout(callback, 1000);
  38. };
  39. })();
  40. var the_date = new Date();
  41. var test1 = the_date.getTime();
  42. var stamp = the_date.getTime() + 250;
  43. function animate()
  44. {
  45. the_date = new Date();
  46. test1 = the_date.getTime();
  47. if(stamp <= test1)
  48. {
  49. move_snake();
  50. the_date = new Date();
  51. stamp = the_date.getTime() + 250;
  52. }
  53. if(game_over == false)
  54. {
  55. // clear
  56. context.clearRect(0, 0, canvas.width, canvas.height);
  57. displayText("Score: " + (snakeLen - 4));
  58. display();
  59. }
  60. else
  61. {
  62. displayText("You so Sux.. Game Over homie");
  63. }
  64. //context.drawImage(aniblock, aniblock_x, aniblock_y);
  65. // request new frame
  66. requestAnimFrame(function()
  67. {
  68. animate();
  69. });
  70. }
  71. function displayText(what)
  72. {
  73. context.font = "30px Arial";
  74. context.fillText(what, 50, 50);
  75. }
  76. function checkSnakeCollide()
  77. {
  78. if( snake[0].xx == food.xx && snake[0].yy == food.yy )
  79. {
  80. create_food();
  81. return true;
  82. }
  83. else
  84. {
  85. //if head moving right
  86. if(dir == "right")
  87. {
  88. if(snake[0].xx > lvl_width - 1)
  89. {
  90. game_over = true;
  91. }
  92. }
  93. else if(dir == "left")
  94. {
  95. if(snake[0].xx < 0)
  96. {
  97. game_over = true;
  98. }
  99. }
  100. else if(dir == "up")
  101. {
  102. if(snake[0].yy <= -1)
  103. {
  104. game_over = true;
  105. }
  106. }
  107. else if(dir = "down")
  108. {
  109. if(snake[0].yy >= lvl_height)
  110. {
  111. game_over = true;
  112. }
  113. }
  114. for(i = 2; i < snakeLen; i++)
  115. {
  116. if( (snake[0].xx == snake[i].xx) && (snake[0].yy == snake[i].yy) )
  117. {
  118. game_over = true;
  119. break;
  120. }
  121. }
  122. return false;
  123. }
  124. }
  125. setTimeout(function() {
  126. animate();
  127. }, 1000);
  128. function moveSnake(e)
  129. {
  130. switch(e.keyCode)
  131. {
  132. case 37:
  133. if(dir != "right")
  134. {
  135. dir = "left";
  136. }
  137. break;
  138. case 38:
  139. if(dir != "down")
  140. {
  141. dir = "up";
  142. }
  143. break;
  144. case 39:
  145. if(dir != "left")
  146. {
  147. dir = "right";
  148. }
  149. break;
  150. case 40:
  151. if(dir != "up")
  152. {
  153. dir = "down";
  154. }
  155. break;
  156. }
  157. }
  158. function checkAllowMove(x, y)
  159. {
  160. if(x < 32)
  161. {
  162. var x_index = 0;
  163. }
  164. else
  165. {
  166. var x_index = Math.round(x / 32);
  167. }
  168. if(y < 32)
  169. {
  170. var y_index = 19;
  171. }
  172. else
  173. {
  174. var y_index = (total_height / 32) - Math.round(y / 32);
  175. }
  176. if(level[x_index][y_index] == -1)
  177. {
  178. return true;
  179. }
  180. else
  181. {
  182. return false;
  183. }
  184. }
  185. function create_food()
  186. {
  187. var x = 0;
  188. var y = 0;
  189. var recreate = false;
  190. do
  191. {
  192. recreate = false;
  193. x = Math.floor((Math.random() * (lvl_width-1)));
  194. y = Math.floor((Math.random() * (lvl_height-1)));
  195. for(i = 0; i < snakeLen; i++)
  196. {
  197. if( (snake[i].xx == x) && (snake[i].yy == y) )
  198. {
  199. recreate = true;
  200. break;
  201. }
  202. }
  203. }while(recreate == true);
  204. food = {xx: x, yy: y};
  205. }
  206. function create_snake()
  207. {
  208. //var x = Math.floor((Math.random() * (lvl_width-1)));
  209. //var y = Math.floor((Math.random() * (lvl_height-1)));
  210. snake[0] = {xx: 4, yy: 1};
  211. snake[1] = {xx: 3, yy: 1};
  212. snake[2] = {xx: 2, yy: 1};
  213. snake[3] = {xx: 1, yy: 1};
  214. dir = "right";
  215. }
  216. function move_snake()
  217. {
  218. var temp_x = 0;
  219. var temp_y = 0;
  220. var temp_xx = 0;
  221. var temp_yy = 0;
  222. var swap = true;
  223. //move snake forward
  224. for(var ii = 0; ii < snakeLen; ii++)
  225. {
  226. if(ii == 0)
  227. {
  228. temp_x = snake[ii].xx;
  229. temp_y = snake[ii].yy;
  230. //if head moving right
  231. if(dir == "right")
  232. {
  233. snake[0] = {xx: (snake[0].xx + 1), yy: snake[0].yy};
  234. }
  235. else if(dir == "left")
  236. {
  237. snake[0] = {xx: (snake[0].xx - 1), yy: snake[0].yy};
  238. }
  239. else if(dir == "up")
  240. {
  241. snake[0] = {xx: snake[0].xx, yy: (snake[0].yy - 1)};
  242. }
  243. else if(dir = "down")
  244. {
  245. snake[0] = {xx: snake[0].xx, yy: (snake[0].yy + 1)};
  246. }
  247. if(checkSnakeCollide())
  248. {
  249. snake.push({xx: snake[(snake.length-1)].xx, yy: snake[(snake.length-1)].yy});
  250. snakeLen++;
  251. }
  252. }
  253. else
  254. {
  255. if(swap == true)
  256. {
  257. temp_xx = snake[ii].xx;
  258. temp_yy = snake[ii].yy;
  259. snake[ii] = {xx: temp_x, yy: temp_y};
  260. swap = false;
  261. }
  262. else
  263. {
  264. temp_x = snake[ii].xx;
  265. temp_y = snake[ii].yy;
  266. snake[ii] = {xx: temp_xx, yy: temp_yy};
  267. swap = true;
  268. }
  269. }
  270. }
  271. }
  272. function display()
  273. {
  274. for(var i = 0; i < snakeLen; i++)
  275. {
  276. if(i == 0)
  277. {
  278. switch (dir)
  279. {
  280. case "left":
  281. context.drawImage(snakeHeadImage, (snake[i].xx * 32), (snake[i].yy * 32) );
  282. break;
  283. case "right":
  284. drawRotatedImage(snakeHeadImage,(snake[i].xx * 32), (snake[i].yy * 32), 180);
  285. break;
  286. case "up":
  287. drawRotatedImage(snakeHeadImage,(snake[i].xx * 32), (snake[i].yy * 32), 90);
  288. break;
  289. case "down":
  290. drawRotatedImage(snakeHeadImage,(snake[i].xx * 32), (snake[i].yy * 32), 270);
  291. break;
  292. }
  293. }
  294. else if(i == (snakeLen - 1) )
  295. {
  296. //following left
  297. if(snake[i].xx > snake[i-1].xx)
  298. {
  299. context.drawImage(snakeTailImage, (snake[i].xx * 32), (snake[i].yy * 32) );
  300. }
  301. //following right
  302. else if(snake[i].xx < snake[i-1].xx)
  303. {
  304. drawRotatedImage(snakeTailImage,(snake[i].xx * 32), (snake[i].yy * 32), 180);
  305. }
  306. //following up
  307. else if(snake[i].yy > snake[i-1].yy)
  308. {
  309. drawRotatedImage(snakeTailImage,(snake[i].xx * 32), (snake[i].yy * 32), 90);
  310. }
  311. //following down
  312. else if(snake[i].yy < snake[i-1].yy)
  313. {
  314. drawRotatedImage(snakeTailImage,(snake[i].xx * 32), (snake[i].yy * 32), 270);
  315. }
  316. }
  317. else
  318. {
  319. context.drawImage(snakeBodyImage, (snake[i].xx * 32), (snake[i].yy * 32) );
  320. }
  321. }
  322. context.drawImage(foodImage, (food.xx * 32), (food.yy * 32) );
  323. }
  324. function drawRotatedImage(image, x, y, angle)
  325. {
  326. var TO_RADIANS = Math.PI/180;
  327. // save the current co-ordinate system
  328. // before we screw with it
  329. context.save();
  330. // move to the middle of where we want to draw our image
  331. context.translate(x, y);
  332. // rotate around that point, converting our
  333. // angle from degrees to radians
  334. context.rotate(angle * TO_RADIANS);
  335. // draw it up and to the left by half the width
  336. // and height of the image
  337. context.drawImage(image, -(image.width/2), -(image.height/2));
  338. // and restore the co-ords to how they were when we began
  339. context.restore();
  340. }

comments powered by Disqus