API tools faq
paste
Guest User

fraser

a guest
Dec 11th, 2019
279
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.07 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3. <title>EcoSnake</title>
  4. <style>
  5. html, body {
  6. height: 100%;
  7. margin: 0;
  8. }
  9. body {
  10. background: white;
  11. display: flex;
  12. align-items: center;
  13. justify-content: center;
  14. text-align: center;
  15. color: black;
  16. }
  17. canvas {
  18. border: 2px solid black;
  19. }
  20. #game {
  21. background-image: url("https://ae01.alicdn.com/kf/HTB1jjG0a7CWBuNjy0Faq6xUlXXaT/Artificial-fake-green-grass-Background-Vinyl-cloth-High-quality-Computer-print-wall-photo-backdrop.jpg");
  22. }
  23. </style>
  24. </head>
  25. <body>
  26. <!-- title -->
  27.  
  28. <img src= "ecosnake.png" style="width:450px">
  29. <canvas width="720" height="720" id="game"></canvas>
  30. <script>
  31. // id of game is canvas defined above - 720x720
  32. var canvas = document.getElementById('game'),
  33. // returns drawing context on the canvas
  34. context = canvas.getContext('2d');
  35. make_base = () =>
  36. {
  37. // snake chases image of soda - create at (x,y) points
  38. // can.x and can.y will be determined later
  39. var soda = new Image();
  40. soda.src = 'soda.jpg';
  41. soda.onload = () => {
  42. context.drawImage(soda, can.x, can.y);
  43. }
  44. return soda;
  45. }
  46. // img will be soda, (x,y) are points, and size
  47. drawImgCoord = (img, x, y, size) => {
  48. const centerX = x - size/6;
  49. const centerY = y - size/6;
  50. context.drawImage(img, centerX, centerY, size, size);
  51. }
  52.  
  53. var soda = make_base();
  54.  
  55. var block = 16,
  56. count = 0,
  57. snake = {
  58. x: 160,
  59. y: 160,
  60. //by default, x val of snake moves one block per frame (speed), y doesn't move
  61. dx: block,
  62. dy: 0,
  63. // array showing blocks covered by snakes
  64. snakeBlocks: [],
  65. // initial length of snake
  66. startSnakeBlocks: 6
  67. };
  68. var can = {
  69. x: 320,
  70. y: 320
  71. };
  72. // get random whole numbers in a specific range
  73. randNum = (min, max) => {
  74. return Math.floor(Math.random() * (max - min)) + min;
  75. }
  76. let isGameOver = false;
  77. // game loop
  78. loop = () => {
  79. requestAnimationFrame(loop);
  80. if (isGameOver) {
  81. gameOverLoop();
  82. } else {
  83. gameLoop();
  84. }
  85. }
  86.  
  87. gameOverLoop = () => {
  88. var randFactNum = Math.floor((Math.random() * 7));
  89. var randFacts =
  90. [ "About 2.8 million tonnes of plastic waste ends up in Canadian landfills every year, equivalent to the weight of 24 CN towers: In order to do your part to reduce the amount of waste, you can follow the three R's, Reduce, Reuse and Recycle. In this way, we can save natural resources and free landscape",
  91. "On average 9 billion tonnes of litter will find its way into our oceans. You can do your part by volunteering in your community and picking up all the litter. Remember - our environment is everyone's environment.",
  92. "Only 61% of people on Earth are aware of Climate Change (roughly 2.4 billion people). You can do your part by informing friends and family about climate change and the importance of keeping our Earth clean and green. The more the better :)",
  93. "Only 0.4% of the world's water supply can actually be used as drinking water for us, yet we waste 680 liters per week in the average household. That is roughly 35,000 liters of water wasted per year! In order to do your part, you can take small actions that will have a large impact,such as turning the tap off when brushing your teeth or even taking shorter showers rather than taking long baths.",
  94. "33 billion tonnes of carbon emissions enter the atmosphere every year. These are not good for our Earth as they make our planet much hotter and also paves the way to frequent natural disasters. In order to do your part you can simply plant a few trees because trees take in carbon emissions and let out clean breathable air for us all. You can save the world and have a little plant buddy as well.",
  95. "Around 8 million tonnes of plastic items are sent into our oceans every year, making sea animals very sick. You can save the lives of your ocean buddies by simply asking your parents to use reusable shopping bags or even using reusable water bottles.",
  96. "Each car you see on the road emits around 4.6 tons of carbon emissions every year, which is roughly 157 million tons of carbon emissions each year in Canada alone. In order to help reduce this number you can take simple actions such as riding a bike to where you want to go or taking the bus for a change. It may not feel like it but everytime you avoid riding in a car you are helping to save the planet.",
  97. "Global warming is destroying the beautiful coral reefs in the ocean and The use of electricity has a big role since carbon emissions are emitted in the process of making electricity. Small actions such as turning off the lights when you are not in a room or telling your parents to change to energy efficient LED light bulbs can go a very long way."
  98. ]
  99. var randFact = randFacts[randFactNum]
  100. if(isGameOver){
  101. alert("GAME OVER! Did you know: " + randFact);
  102. }
  103. isGameOver = false;
  104. }
  105.  
  106. gameLoop = () => {
  107. // frames per second
  108. if (++count < 2.5) {
  109. return;
  110. }
  111. count = 0;
  112. // clear rectangle where canvas is
  113. context.clearRect(0, 0, canvas.width, canvas.height);
  114. // snake moves at the speed it is at
  115. snake.x += snake.dx;
  116. snake.y += snake.dy;
  117. if (snake.x < 0) {
  118. snake.x = canvas.width - block;
  119. }
  120. else if (snake.x >= canvas.width) {
  121. snake.x = 0;
  122. }
  123. // wrapping:
  124. if (snake.y < 0) {
  125. snake.y = canvas.height - block;
  126. }
  127. else if (snake.y >= canvas.height) {
  128. snake.y = 0;
  129. }
  130. // tracks snake's location
  131. snake.snakeBlocks.unshift({x: snake.x, y: snake.y});
  132. // as snake moves away snake blocks, remove them using .pop()
  133. if (snake.snakeBlocks.length > snake.startSnakeBlocks) {
  134. snake.snakeBlocks.pop();
  135. }
  136. // draw can
  137. drawImgCoord(soda, can.x, can.y, block+10);
  138. // cells of snake must be drawn individually
  139. context.fillStyle = 'yellow';
  140. snake.snakeBlocks.forEach((cell, index) => {
  141. // creates block effect
  142. context.fillRect(cell.x, cell.y, block-1, block-1);
  143. // can eaten by snake
  144. if (cell.x === can.x && cell.y === can.y) {
  145. snake.startSnakeBlocks++;
  146. // canvas is 720x720 which is 45x\45 blocks
  147. can.x = randNum(0, 45) * block;
  148. can.y = randNum(0, 45) * block;
  149. }
  150. // check if the cells of the snake are colliding with itself
  151. for (var i = index + 1; i < snake.snakeBlocks.length; i++) {
  152. // if the snake occupies same space as a body part then reset game
  153. if (cell.x === snake.snakeBlocks[i].x && cell.y === snake.snakeBlocks[i].y) {
  154. snake.x = 160;
  155. snake.y = 160;
  156. snake.snakeBlocks = [];
  157. snake.startSnakeBlocks = 6;
  158. snake.dx = block;
  159. snake.dy = 0;
  160. can.x = randNum(0, 25) * block;
  161. can.y = randNum(0, 25) * block;
  162. isGameOver = true;
  163. }
  164. }
  165. });
  166. }
  167. // listen to keyboard events to move the snake
  168. document.addEventListener('keydown', function(e) {
  169. // prevent snake from backtracking on itself by checking that it's
  170. //not already moving on the same axis (pressing left while moving
  171. // left won't do anything, and pressing right while moving left
  172. // shouldn't let you collide with your own body)
  173.  
  174. //checks the direction of movement and dissallows backtracking
  175. // left arrow key
  176. if (e.which === 37 && snake.dx === 0) {
  177. snake.dx = -block;
  178. snake.dy = 0;
  179. }
  180. // up arrow key
  181. else if (e.which === 38 && snake.dy === 0) {
  182. snake.dy = -block;
  183. snake.dx = 0;
  184. }
  185. // right arrow key
  186. else if (e.which === 39 && snake.dx === 0) {
  187. snake.dx = block;
  188. snake.dy = 0;
  189. }
  190. // down arrow key
  191. else if (e.which === 40 && snake.dy === 0) {
  192. snake.dy = block;
  193. snake.dx = 0;
  194. }
  195. });
  196. // restart the game
  197. requestAnimationFrame(loop);
  198. </script>
  199. </body>
  200. </html>
Advertisement
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!