API tools faq
paste
chadthecoder

Chris DeLeon Snek Game, but added stuff

chadthecoder
Dec 3rd, 2018
809
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 5.53 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <!--
  4.     Original Snake Game coded by Chris DeLeon of Gamkedo https://www.youtube.com/channel/UC15WSgcM_5tmN6JRbhA4UaQ
  5.     Button taken from Ottis Kelleghan on CodePen https://codepen.io/cheeriottis/pen/inluv
  6.     Put together and changed by Chad McAdams
  7. -->
  8.  
  9. <title>Snek Game!</title>
  10. <body style="background-color:white;"></body>
  11.  
  12. <p id="score"></p>
  13. <canvas id="gc" width="400" height="400"></canvas>
  14.  
  15. <style>
  16.         body
  17.         {
  18.             padding: 50px;
  19.         }
  20.        
  21.         .animate
  22.         {
  23.             transition: all 0.1s;
  24.             -webkit-transition: all 0.1s;
  25.         }
  26.        
  27.         .action-button
  28.         {
  29.             position: relative;
  30.             padding: 10px 40px;
  31.           margin: 0px 10px 10px 0px;
  32.           float: left;
  33.             border-radius: 10px;
  34.             font-family: 'Pacifico', cursive;
  35.             font-size: 25px;
  36.             color: #FFF;
  37.             text-decoration: none;
  38.         }
  39.        
  40.         .blue
  41.         {
  42.             background-color: #3498DB;
  43.             border-bottom: 5px solid #2980B9;
  44.             text-shadow: 0px -2px #2980B9;
  45.         }
  46.        
  47.         .red
  48.         {
  49.             background-color: #E74C3C;
  50.             border-bottom: 5px solid #BD3E31;
  51.             text-shadow: 0px -2px #BD3E31;
  52.         }
  53.        
  54.         .green
  55.         {
  56.             background-color: #82BF56;
  57.             border-bottom: 5px solid #669644;
  58.             text-shadow: 0px -2px #669644;
  59.         }
  60.        
  61.         .yellow
  62.         {
  63.             background-color: #F2CF66;
  64.             border-bottom: 5px solid #D1B358;
  65.             text-shadow: 0px -2px #D1B358;
  66.         }
  67.        
  68.         .action-button:active
  69.         {
  70.             transform: translate(0px,5px);
  71.           -webkit-transform: translate(0px,5px);
  72.             border-bottom: 1px solid;
  73.         }
  74.         </style>
  75.  
  76. <a class="action-button shadow animate blue" id="play" onclick="playAgain()" style="display: none;">Play Again?</a>
  77.  
  78. <style>
  79.         #gc
  80.         {
  81.             border-style: solid;
  82.             border-color: black;
  83.         }
  84.         </style>
  85.  
  86. <script>
  87.  
  88. window.onload=function()
  89. {
  90.     canv = document.getElementById("gc");
  91.     ctx = canv.getContext("2d");
  92.     document.addEventListener("keydown", keyPush);
  93.     setInterval(game, 1000/15);
  94.     setVars();
  95. }
  96.  
  97. function setVars()
  98. {
  99. px=py=10;
  100. gs=tc=20;
  101. ax=ay=15;
  102. bx=by=5;
  103. xv=yv=0;
  104. trail=[];
  105. tail = 1;
  106. score = 0;
  107. console.log(score);
  108. }
  109.  
  110. function playAgain()
  111. {
  112.     var x = document.getElementById("gc");
  113.     x.style.display = "block";
  114.     var y = document.getElementById("play");
  115.     y.style.display = "none";
  116.     setVars();
  117. }
  118.  
  119. function gameOver()
  120. {
  121.     var x = document.getElementById("gc");
  122.     x.style.display = "none";
  123.     var y = document.getElementById("play");
  124.     y.style.display = "block";
  125.     //window.location.href = "./gameOver.html";
  126. }
  127.  
  128. function checkZero()
  129. {
  130.     if(tail <= 0)
  131.     {
  132.         gameOver();
  133.     }
  134. }
  135.  
  136. function reloadBackground()
  137. {
  138.     ctx.fillStyle="white";
  139.     ctx.fillRect(0, 0, canv.width, canv.height);
  140. }
  141.  
  142. function reloadTail()
  143. {
  144.     ctx.fillStyle="lime";
  145.     for (var i=0; i < trail.length; i++)
  146.     {
  147.         ctx.fillRect(trail[i].x*gs, trail[i].y*gs, gs-2, gs-2);
  148.        
  149.         if(trail[i].x == px && trail[i].y == py)
  150.         {
  151.             tail = i + 1;
  152.             score = i + 1;
  153.             console.log(score);
  154.             document.getElementById("score").innerHTML = score.toString();
  155.             checkZero();
  156.             //different version that I don't like
  157.             //tail = tail - 1;
  158.         }
  159.     }
  160.  
  161.    trail.push({x:px,y:py});
  162.  
  163.     while(trail.length > tail)
  164.     {
  165.         trail.shift();
  166.     }
  167. }
  168.  
  169. function reloadBombs() //add suopport for multiple bombs?
  170. {
  171.     if(bx == px && by == py)
  172.     {
  173.         --tail;
  174.         --score;
  175.         console.log(score);
  176.         document.getElementById("score").innerHTML = score.toString();
  177.         checkZero();
  178.         bx = Math.floor(Math.random()*tc);
  179.         by = Math.floor(Math.random()*tc);
  180.     }
  181.  
  182.     ctx.fillStyle="black";
  183.     ctx.fillRect(bx*gs, by*gs, gs-2, gs-2);
  184. }
  185.  
  186. function reloadApples() //add support for multiple apples?
  187. {
  188.     if(ax == px && ay == py)
  189.     {
  190.         tail++;
  191.         score++;
  192.         console.log(score);
  193.         document.getElementById("score").innerHTML = score.toString();
  194.         ax = Math.floor(Math.random()*tc);
  195.         ay = Math.floor(Math.random()*tc);
  196.     }
  197.  
  198.     ctx.fillStyle="red";
  199.     ctx.fillRect(ax*gs, ay*gs, gs-2, gs-2);
  200. }
  201.  
  202. function outOfBounds()
  203. {
  204.     tail = 0;
  205.     score = 0;
  206.     console.log(score);
  207.     document.getElementById("score").innerHTML = score.toString();
  208.     checkZero();
  209. }
  210.  
  211. function moving()
  212. {
  213.     px += xv;
  214.     py += yv;
  215.     if(px < 0)
  216.     {
  217.         //px = tc-1;
  218.         outOfBounds();
  219.     }
  220.     if(px > tc - 1)
  221.     {
  222.         //px = 0;
  223.         outOfBounds();
  224.     }
  225.     if(py < 0)
  226.     {
  227.         //py = tc-1;
  228.         outOfBounds();
  229.     }
  230.     if(py > tc - 1)
  231.     {
  232.        //py = 0;
  233.        outOfBounds();
  234.     }
  235. }
  236.  
  237. function game()
  238. {
  239.     moving();
  240.     reloadBackground();
  241.     reloadTail();
  242.     reloadApples();
  243.     reloadBombs();
  244. }
  245.  
  246. function keyPush(evt)
  247. {
  248.     switch(evt.keyCode)
  249.     {
  250.         case 37:
  251.             xv=-1; yv=0;
  252.             break;
  253.         case 38:
  254.             xv=0; yv=-1;
  255.             break;
  256.         case 39:
  257.             xv=1; yv=0;
  258.             break;
  259.         case 40:
  260.             xv=0; yv=1;
  261.             break;
  262.  
  263.     }
  264. }
  265.  
  266. </script>
  267. </body>
  268. </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!