daily pastebin goal
66%
SHARE
TWEET

Untitled

a guest Apr 19th, 2018 53 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  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>
RAW Paste Data
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
 
Top