API tools faq
paste
beannshie

HTML Game Menu

beannshie
Sep 26th, 2018
185
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 32.02 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2. <html>
  3.     <!--beannshie-->
  4.     <head>
  5.         <meta charset="utf-8">
  6.         <meta http-equiv="x-ua-compatible" content="ie=edge">
  7.         <title>Game Menu</title>
  8.         <meta name="description" content="">
  9.         <meta name="viewport" content="width=device-width, initial-scale=1">
  10.         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  11.         <link rel="icon" href="https://i.imgur.com/UJ9CaVW.png">
  12.         <style>
  13.             * {
  14.                 font-family: sans-serif;
  15.                 font-size: 16px;
  16.             }
  17.             body {
  18.                 background: url("https://i.pinimg.com/originals/7f/30/66/7f30662655df2ba727a226131755dcf8.png");
  19.                 background-repeat: no-repeat;
  20.                 background-position: center center;  
  21.             }
  22.             .container {
  23.                 width: 100%;
  24.                 height: 100%;
  25.                 padding: 12.5% 0 0 0;
  26.             }
  27.             .btns {
  28.                 width: 50%;
  29.                 margin: auto;
  30.                 background: #000000;
  31.                 padding: 1% 3.5% 1% 1%;
  32.             }
  33.             ul {
  34.                 list-style-type: none;
  35.             }
  36.             button {
  37.                 padding: 1%;
  38.                 width: 100%;
  39.                 font-size: 20px;
  40.                 background: #00CC00;
  41.                 border: 2px solid #000000;
  42.             }
  43.             button:hover {
  44.                 cursor: pointer;
  45.                 background: #00AA00;
  46.                 border: 2px solid #008800;
  47.             }
  48.         </style>
  49.     </head>
  50.     <body>
  51.         <canvas id="canvas"></canvas>
  52.         <div class="container">
  53.             <div class="btns">
  54.                 <ul>
  55.                     <li><button id="atari">Atari Breakout</button></li>
  56.                     <li><button id="flappy">Flappy Bird</button></li>
  57.                     <li><button id="snake">Snake Game</button></li>
  58.                 </ul>
  59.             </div>
  60.         </div>
  61.         <script>
  62.             $("#atari").on("click", function(){
  63.                 $("*").css("width","100%");
  64.                 $("*").css("height","100%");
  65.                 $("*").css("padding","0");
  66.                 $("*").css("margin","0");
  67.                 $("canvas").css("width","100%");
  68.                 $("canvas").css("height","99.6%");
  69.                 $("div").css("display","none");
  70.                 $("body").css("background","#000000");
  71.                 $("title").html("Atari Breakout");
  72.                
  73.                 var canvas = document.getElementById("canvas");
  74.                 var canvasContext = canvas.getContext('2d');
  75.  
  76.                 var winW = window.innerWidth;
  77.                 var winH = window.innerHeight;
  78.                 canvasContext.canvas.width  = window.innerWidth;
  79.                 canvasContext.canvas.height = window.innerHeight;
  80.  
  81.                 const contX = canvas.width/30;                          // container X
  82.                 const contY = canvas.height/7;                          // container Y
  83.                 const contW = canvas.width - canvas.width/15;           // container width
  84.                 const contH = canvas.height - canvas.height/5;          // container height
  85.  
  86.                 const gameX = contX + contW/100;
  87.                 const gameY = contY + contH/50;
  88.                 const gameW = contW - contW/50;
  89.                 const gameH = contH - contH/25;
  90.  
  91.                 const borderTop = contY + contH/50;                     // top border of container
  92.                 const borderBot = borderTop + (contH - contH/25);       // bottom border of container
  93.                 const borderLeft = contX + contW/100;                   // left border of container
  94.                 const borderRight = borderLeft + (contW - contW/50);    // right border of container
  95.  
  96.                 const paddleW = borderLeft*4;                           // paddle width
  97.                 const paddleH = gameH/25;                               // paddle height
  98.                 const paddleY = borderBot - contH/10;                   // paddle Y
  99.                 var paddleX;                                            // paddle X
  100.  
  101.                 const ballR = 10;
  102.                 const maxBallSpeed = 10;
  103.                 var ballX,ballY,ballSpeedX,ballSpeedY,firstHit,bounceVAR;
  104.  
  105.                 var score,lives;
  106.                 var gameWon,gameOver = false;
  107.                 const ROWS = 10;
  108.                 const COLUMNS = 5;
  109.                 const MAX_SCORE = ROWS*COLUMNS*100;
  110.  
  111.                 var brickDistX = (gameW/ROWS)/(ROWS*5);
  112.                 var brickDistY = (gameH/ROWS)/(ROWS*2);
  113.                 var brickW = gameW/ROWS - brickDistX;
  114.                 var brickH = gameH/(COLUMNS*4) - brickDistY;
  115.                 var bricksX = [];                                       // array with X coordinate of each brick
  116.                 var bricksY = [];                                       // array with Y coordinate of each brick
  117.                 var bricksBroken = [];                                  // array that holds information about which bricks are broken
  118.  
  119.                 var currentColumn = 1;
  120.                 for(var j = 0; j < (COLUMNS*ROWS); j += ROWS)
  121.                 {
  122.                     for(var i = 0; i < ROWS; i++)
  123.                     {
  124.                         if(i === 0 || (i !== 1 && i%ROWS === 0))
  125.                         {
  126.                             bricksX[(i+j)] = borderLeft + (brickW * i) + brickDistX*3;
  127.                         }
  128.                         else
  129.                         {
  130.                             bricksX[(i+j)] = bricksX[(i-1)] + brickW + (brickDistX/2);
  131.                         }
  132.                         bricksY[(i+j)] = (borderTop + gameH/10) + ((brickDistY + brickH) * currentColumn);
  133.                         bricksBroken[(i+j)] = false;
  134.                     }
  135.                     currentColumn++;
  136.                 }
  137.  
  138.                 canvas.addEventListener('mousemove',                    // checks if the mouse moves
  139.                     function(evt) {
  140.                         var mousePos = calculateMousePos(evt);
  141.  
  142.                         if(mousePos.x < borderLeft+(paddleW/2))
  143.                         {
  144.                             paddleX = gameX+1;
  145.                         }
  146.                         else if(mousePos.x >= borderRight-(paddleW/2))
  147.                         {
  148.                             paddleX = (borderRight-paddleW)-1;
  149.                         }
  150.                         else
  151.                         {
  152.                             paddleX = mousePos.x - paddleW/2;
  153.                         }
  154.                     }
  155.                 );
  156.  
  157.                 setup();
  158.                 function timeout() {
  159.                     setTimeout(function () {
  160.                         main();
  161.                         timeout();
  162.                     }, 30);
  163.                 };
  164.                 timeout();
  165.  
  166.                 function setup()
  167.                 {
  168.                     firstHit = true;
  169.                     score = 0;
  170.                     lives = 3;
  171.                     ballX = winW/2;
  172.                     ballY = gameH/1.5;
  173.                     ballSpeedX = 0;
  174.                     ballSpeedY = 5;
  175.                     paddleX = gameX + gameW/2 - paddleW/2;
  176.                     for(var i = 0; i < (ROWS*COLUMNS); i++)
  177.                     {
  178.                         bricksBroken[i] = false;
  179.                     }
  180.                 }
  181.  
  182.                 function main()
  183.                 {
  184.                     move();
  185.                     logic();
  186.                     draw();
  187.                 }
  188.  
  189.                 function draw()
  190.                 {
  191.                     rect(0,0, winW,winH, 'black');                                                          // canvas
  192.                     rect(contX,contY, contW,contH,'white');                                                 // game area container
  193.                     rect(gameX,gameY, gameW,gameH,'black');                                                 // game area
  194.                     rect(paddleX,paddleY, paddleW,paddleH,'white');                                         // paddle
  195.  
  196.                     if(!gameOver && !gameWon)
  197.                     {
  198.                         circle(ballX,ballY, ballR,'white');                                                     // ball
  199.  
  200.                         for(var i = 0; i < (ROWS*COLUMNS); i++)
  201.                         {
  202.                             if(!bricksBroken[i])
  203.                             {
  204.                                 rect(bricksX[i],bricksY[i], brickW,brickH,'white');
  205.                             }
  206.                         }
  207.                     }
  208.  
  209.                     text("Score : " + score, canvas.width/4,canvas.height/12, canvas.height/16,'white');
  210.                     text("Lives : " + lives, canvas.width/4 + 2*(canvas.width/6),canvas.height/12, canvas.height/16,'white');
  211.                 }
  212.  
  213.                 function move()
  214.                 {
  215.                     ballX += ballSpeedX;
  216.                     ballY += ballSpeedY;
  217.                 }
  218.  
  219.                 function logic()
  220.                 {
  221.                     // reset the ball when it hits the bottom border
  222.                     if(ballY >= borderBot)
  223.                     {
  224.                         lives--;
  225.                         ballX = winW/2;
  226.                         ballY = gameH/1.5;
  227.                         ballSpeedX = 0;
  228.                         ballSpeedY = 5;
  229.                         firstHit = true;
  230.                     }
  231.  
  232.                     //  bounce the ball when it hits a wall
  233.                     if(ballY <= borderTop)
  234.                     {
  235.                         ballSpeedY *= -1;
  236.                     }
  237.                     if((ballX <= borderLeft) || (ballX >= borderRight))
  238.                     {
  239.                         ballSpeedX *= -1;
  240.                     }
  241.  
  242.                     //  bounce the ball when it hits the paddle
  243.                     if((ballY >= paddleY) && (ballY <= (paddleY+paddleH)) && (ballX >= paddleX) && (ballX <= (paddleX+paddleW)))
  244.                     {
  245.                         if(firstHit)
  246.                         {
  247.                             if(ballX < (paddleX+paddleX/2))
  248.                             {
  249.                                 ballSpeedX = 5;
  250.                             }
  251.                             else if(ballX >= (paddleX+paddleX/2))
  252.                             {
  253.                                 ballSpeedX = -5;
  254.                             }
  255.                             ballSpeedY = 10;
  256.                             firstHit = false;
  257.                         }
  258.  
  259.                         bounceVAR = ballX - (paddleX+paddleW/2);
  260.                         ballSpeedX = bounceVAR * 0.35;
  261.                         ballSpeedY *= -1;
  262.  
  263.                         if(ballSpeedX > maxBallSpeed)
  264.                         {
  265.                             ballSpeedX = maxBallSpeed;
  266.                         }
  267.                     }
  268.  
  269.                     // check if a brick is hit
  270.                     for(var i = 0; i < (ROWS*COLUMNS); i++)
  271.                     {
  272.                         if((ballX >= bricksX[i]) && (ballX <= (bricksX[i]+brickW)) && (ballY >= bricksY[i]) && (ballY <= (bricksY[i]+brickH)) && (!bricksBroken[i]))
  273.                         {
  274.                             if((ballX - ballSpeedX) < bricksX[i])
  275.                             {
  276.                                 ballX = bricksX[i];
  277.                                 ballSpeedX *= -1;
  278.                             }
  279.                             if((ballX - ballSpeedX) > (bricksX[i] + brickW))
  280.                             {
  281.                                 ballX = bricksX[i] + brickW;
  282.                                 ballSpeedX *= -1;
  283.                             }
  284.                             if(((ballY - ballSpeedY) < bricksY[i]))
  285.                             {
  286.                                 ballY = bricksY[i];
  287.                                 ballSpeedY *= -1;
  288.                             }
  289.                             if((ballY - ballSpeedY) > (bricksY[i] + brickH))
  290.                             {
  291.                                 ballY = bricksY[i] + brickH;
  292.                                 ballSpeedY *= -1;
  293.                             }
  294.                             bricksBroken[i] = true;
  295.                             score += 100;
  296.                         }
  297.                     }
  298.  
  299.                     // checks if the player won the game and if the player has no lives left
  300.                     if(score >= MAX_SCORE)
  301.                     {
  302.                         draw();
  303.                         alert("Congratulations, you've won the game with " + lives + " lives left!!!");
  304.                         setup();
  305.                         gameWon = true;
  306.                     }
  307.                     else if(lives <= 0)
  308.                     {
  309.                         var prependAlert = "";
  310.                         for(var i = 0; i < (score.toString().length); i += 2)
  311.                         {
  312.                             prependAlert += ' ';
  313.                         }
  314.                         alert(prependAlert + "\t       Game Over\nYou died with a score of " + score);
  315.                         setup();
  316.                     }
  317.                 }
  318.  
  319.                 function rect(x,y, width,height, color)
  320.                 {
  321.                     canvasContext.fillStyle = color;
  322.                     canvasContext.fillRect(x,y, width,height);
  323.                 }
  324.  
  325.                 function circle(cX,cY, radius, color)
  326.                 {
  327.                     canvasContext.fillStyle = color;
  328.                     canvasContext.beginPath();
  329.                     canvasContext.arc(cX,cY, radius,0,Math.PI*2,true);
  330.                     canvasContext.fill();
  331.                 }
  332.  
  333.                 function text(txt, x,y, size,color)
  334.                 {
  335.                     canvasContext.fillStyle = color;
  336.                     canvasContext.font = size + "px Arial";
  337.                     canvasContext.fillText(txt,x,y);
  338.                 }
  339.  
  340.                 function calculateMousePos(evt) {                       // calculates the position of the mouse
  341.                     var rect = canvas.getBoundingClientRect();
  342.                     var root = document.documentElement;
  343.                     var mouseX = evt.clientX - rect.left  - root.scrollLeft;
  344.                     var mouseY = evt.clientY - rect.top  - root.scrollTop;
  345.                     return {
  346.                         x:mouseX,
  347.                         y:mouseY
  348.                     };
  349.                 }
  350.             });
  351.            
  352.             $("#flappy").on("click", function(){
  353.                 $("*").css("width","100%");
  354.                 $("*").css("height","100%");
  355.                 $("*").css("padding","0");
  356.                 $("*").css("margin","0");
  357.                 $("canvas").css("width","100%");
  358.                 $("canvas").css("height","99.6%");
  359.                 $("div").css("display","none");
  360.                 $("body").css("background","#007700");
  361.                 $("title").html("Flappy Bird");
  362.                
  363.                 var canvas = document.getElementById("canvas");
  364.                 var ctx = canvas.getContext("2d");
  365.                 var winW = window.innerWidth;
  366.                 var winH = window.innerHeight;
  367.                 canvas.width  = window.innerWidth;
  368.                 canvas.height = window.innerHeight;
  369.                 document.onkeydown = checkKey;
  370.  
  371.                 var gameSpeed = 30;
  372.  
  373.                 var x,y,score;
  374.                 var scored = false;
  375.                 var jumpH = winH/10;
  376.                 var gravity = winH/750;
  377.                 var maxGrav = 15;
  378.                 const pillarCount = 4;
  379.  
  380.                 var pillarX = [];
  381.                 var pillarY1 = [];
  382.                 var pillarY2 = [];
  383.                 var pillarW = winW/(pillarCount*2.75+1);
  384.                 var pillarDist = winH/5;
  385.                 var ballR = jumpH/3.5;
  386.  
  387.                 setup();
  388.                 function timeout() {
  389.                     setTimeout(function () {
  390.                         main();
  391.                         timeout();
  392.                     }, gameSpeed);
  393.                 };
  394.                 timeout();
  395.  
  396.                 function setup()
  397.                 {
  398.                     x = winW/10;
  399.                     y = winH/2;
  400.                     score = 0;
  401.  
  402.                     for(var i = 0; i < pillarCount; i++)
  403.                     {
  404.                         if(i === 0)
  405.                         {
  406.                             pillarX[i] = winW;
  407.                         }
  408.                         else
  409.                         {
  410.                             pillarX[i] = pillarX[(i-1)] + pillarW*4;
  411.                         }
  412.                         pillarY1[i] = Math.floor(Math.random() * ((winH-winH/5) - (winH/10) + 1)) + (winH/10);
  413.                         pillarY2[i] = pillarY1[i] + pillarDist;
  414.                     }
  415.                 }
  416.  
  417.                 function main()
  418.                 {
  419.                     logic();
  420.                     move();
  421.                     draw();
  422.                 }
  423.  
  424.                 function move()
  425.                 {
  426.                     if(gravity < maxGrav/2)
  427.                     {
  428.                         gravity *= 1.1;
  429.                     }
  430.                     else if(gravity < maxGrav)
  431.                     {
  432.                         gravity *= 1.05;
  433.                     }
  434.                     y += gravity;
  435.                     for(var i = 0; i < pillarCount; i++)
  436.                     {
  437.                         pillarX[i] -= 10;
  438.                     }
  439.                 }
  440.  
  441.                 function logic()
  442.                 {
  443.                     if(y < 0 || y > winH)
  444.                     {
  445.                         alert("You died with a score of " + score);
  446.                         setup();
  447.                     }
  448.  
  449.                     for(var i = 0; i < pillarCount; i++)
  450.                     {
  451.                         if(x >= pillarX[i] && x <= pillarX[i]+pillarW && y-ballR/1.5 > pillarY1[i] && y+ballR/1.5 < pillarY2[i])
  452.                         {
  453.                             if(!scored)
  454.                             {
  455.                                 score++;
  456.                                 scored = true;
  457.                             }
  458.                         }
  459.                         else if(x+ballR/1.5 >= pillarX[i] && x-ballR/1.5 <= pillarX[i]+pillarW && (y-ballR/1.5 < pillarY1[i] || y+ballR/1.5 > pillarY2[i]))
  460.                         {
  461.                             alert("You died with a score of " + score);
  462.                             setup();
  463.                         }
  464.  
  465.                         if(scored)
  466.                         {
  467.                             if(x > pillarX[i]+pillarW)
  468.                             {
  469.                                 scored = false;
  470.                             }
  471.                         }
  472.  
  473.                         if(pillarX[i]+pillarW <= 0)
  474.                         {
  475.                             pillarX[i] += winW + pillarW*4;
  476.                             pillarY1[i] = Math.floor(Math.random() * ((winH-winH/5) - (winH/10) + 1)) + (winH/10);
  477.                             pillarY2[i] = pillarY1[i] + pillarDist;
  478.                         }
  479.                     }
  480.                 }
  481.  
  482.                 function draw()
  483.                 {
  484.                     rect(0,0, winW,winH, '#0088CC');
  485.                     circle(x,y, ballR,'#CCCC00');
  486.  
  487.                     for(var i = 0; i < pillarCount; i++)
  488.                     {
  489.                         rect(pillarX[i],0, pillarW,pillarY1[i],'#007700');
  490.                         rect(pillarX[i],pillarY2[i], pillarW,(winH-pillarY2[i]),'#007700');
  491.                     }
  492.  
  493.                     ctx.fillStyle = 'red';
  494.                     ctx.font = 'normal bold 42px sans-serif';
  495.                     ctx.textAlign = 'center';
  496.                     ctx.fillText(score,winW/2,winH/15);
  497.  
  498.                 }
  499.  
  500.                 function rect(x,y, width,height, color)
  501.                 {
  502.                     ctx.fillStyle = color;
  503.                     ctx.fillRect(x,y, width,height);
  504.                 }
  505.  
  506.                 function circle(cX,cY, radius, color)
  507.                 {
  508.                     ctx.fillStyle = color;
  509.                     ctx.beginPath();
  510.                     ctx.arc(cX,cY, radius,0,Math.PI*2,true);
  511.                     ctx.fill();
  512.                 }
  513.  
  514.                 function checkKey(e)
  515.                 {
  516.                     var keynum;
  517.                     if(window.event) { // IE                    
  518.                         keynum = e.keyCode;
  519.                     } else if(e.which){ // Netscape/Firefox/Opera                  
  520.                         keynum = e.which;
  521.                     }
  522.  
  523.                     switch(keynum)
  524.                     {
  525.                         case 32:
  526.                             gravity = 0;
  527.                             j = Math.floor(jumpH/2);
  528.                             (function theLoop (i) {
  529.                                 setTimeout(function () {
  530.                                     y -= 2;
  531.                                     if (--i) {
  532.                                       theLoop(i);
  533.                                     }
  534.                                 }, 1);
  535.                             })(j);
  536.                             setTimeout(function () { gravity = winH/750; }, j);
  537.                             break;
  538.                     }
  539.                 }
  540.             });
  541.            
  542.             $("#snake").on("click", function(){
  543.                 $("*").css("width","100%");
  544.                 $("*").css("height","100%");
  545.                 $("*").css("padding","0");
  546.                 $("*").css("margin","0");
  547.                 $("canvas").css("width","100%");
  548.                 $("canvas").css("height","99.6%");
  549.                 $("div").css("display","none");
  550.                 $("body").css("background","#000000");
  551.                 $("title").html("Snake Game");
  552.                
  553.                 var canvas = document.getElementById("canvas");
  554.                 var canvasContext = canvas.getContext('2d');
  555.  
  556.                 var winW = window.innerWidth;
  557.                 var winH = window.innerHeight;
  558.                 canvas.width  = window.innerWidth;
  559.                 canvas.height = window.innerHeight;
  560.  
  561.                 document.onkeydown = checkKey;
  562.  
  563.                 var x,y,fruitX,fruitY,nTail,score;
  564.                 var tailX = [];
  565.                 var tailY = [];
  566.                 const COLUMNS = 15;
  567.                 const ROWS = COLUMNS;
  568.  
  569.                 var gameSpeed = 120;
  570.  
  571.                 const directions = {
  572.                     UP: 'up',
  573.                     DOWN: 'down',
  574.                     LEFT: 'left',
  575.                     RIGHT: 'right'
  576.                 };
  577.                
  578.                 let direciton;
  579.  
  580.                 setup();
  581.                 function timeout() {
  582.                     setTimeout(function () {
  583.                         main();
  584.                         timeout();
  585.                     }, gameSpeed);
  586.                 };
  587.                 timeout();
  588.  
  589.                 function main()
  590.                 {
  591.                     draw();
  592.                     move();
  593.                     logic();
  594.                 }
  595.  
  596.                 function setup()
  597.                 {
  598.                     x = 7;
  599.                     y = 7;
  600.                     score = 0;
  601.                     nTail = 0;
  602.                     tailX = [];
  603.                     tailY = [];
  604.                     direction = null;
  605.                     fruitX = Math.floor(Math.random() * ROWS);
  606.                     fruitY = Math.floor(Math.random() * COLUMNS);
  607.                 }
  608.  
  609.                 function draw()
  610.                 {
  611.                     const GAME_HEIGHT = winH - (winH/50);
  612.                     const GAME_WIDTH = GAME_HEIGHT;
  613.                     const GAME_X = (winW/2)-(GAME_WIDTH/2);
  614.                     const GAME_Y = winH/100;
  615.                     const TILE_WIDTH = GAME_WIDTH / ROWS;
  616.                     const TILE_HEIGHT = GAME_HEIGHT / COLUMNS;
  617.                     const HEAD_RADIUS = (TILE_WIDTH - (TILE_WIDTH / 3)) / 2;
  618.                     const TAIL_RADIUS = TILE_WIDTH / 4;
  619.  
  620.                     rect(0,0, winW,winH, 'black'); // canvas
  621.                     rect(GAME_X,GAME_Y, GAME_WIDTH,GAME_HEIGHT, 'white');
  622.  
  623.                     for(var i = 0; i < COLUMNS; i++)
  624.                     {
  625.                         for(var j = 0; j < ROWS; j++)
  626.                         {
  627.                             rect(GAME_X+(i*TILE_WIDTH),GAME_Y+(j*TILE_HEIGHT), TILE_WIDTH,TILE_HEIGHT, 'red');
  628.                             if(x === i && y === j)
  629.                             {
  630.                                 var circleX = ((GAME_X+(i*TILE_WIDTH)) - (TILE_WIDTH / 2)) + TILE_WIDTH;
  631.                                 var circleY = ((GAME_Y+(j*TILE_HEIGHT)) - (TILE_HEIGHT / 2)) + TILE_HEIGHT;
  632.                                 circle(circleX,circleY, HEAD_RADIUS, '#555555');
  633.                             }
  634.                             if(fruitX === i && fruitY === j)
  635.                             {
  636.                                 var circleX = ((GAME_X+(i*TILE_WIDTH)) - (TILE_WIDTH / 2)) + TILE_WIDTH;
  637.                                 var circleY = ((GAME_Y+(j*TILE_HEIGHT)) - (TILE_HEIGHT / 2)) + TILE_HEIGHT;
  638.                                 circle(circleX,circleY, TAIL_RADIUS, '#00AA00');
  639.                             }
  640.                             for(var k = 0; k < nTail; k++)
  641.                             {
  642.                                 if (tailX[k] === i && tailY[k] === j)
  643.                                 {
  644.                                     var circleX = ((GAME_X+(i*TILE_WIDTH)) - (TILE_WIDTH / 2)) + TILE_WIDTH;
  645.                                     var circleY = ((GAME_Y+(j*TILE_HEIGHT)) - (TILE_HEIGHT / 2)) + TILE_HEIGHT;
  646.                                     circle(circleX,circleY, TAIL_RADIUS, '#555555');
  647.                                 }
  648.                             }
  649.                         }
  650.                     }
  651.                 }
  652.  
  653.                 function move()
  654.                 {
  655.                     switch(direction)
  656.                     {
  657.                         case directions.UP:
  658.                             y--;
  659.                             break;
  660.                         case directions.DOWN:
  661.                             y++;
  662.                             break;
  663.                         case directions.LEFT:
  664.                             x--;
  665.                             break;
  666.                         case directions.RIGHT:
  667.                             x++;
  668.                             break;
  669.                     }
  670.                 }
  671.  
  672.                 function logic()
  673.                 {
  674.                     if(x < 0 || x >= ROWS || y < 0 || y >= COLUMNS)
  675.                     {
  676.                         alert("Game Over - you died with a score of " + score + ".");
  677.                         setup();
  678.                     }
  679.                     if(x === fruitX && y === fruitY)
  680.                     {
  681.                         fruitX = Math.floor(Math.random() * ROWS);
  682.                         fruitY = Math.floor(Math.random() * COLUMNS);
  683.                         score += 100;
  684.                         if(nTail === 0)
  685.                         {
  686.                             nTail += 2;
  687.                         }
  688.                         else
  689.                         {
  690.                             nTail++;
  691.                         }
  692.                     }
  693.                     for(var i = 0; i < nTail; i++)
  694.                     {
  695.                         if(tailX[i] === x && tailY[i] === y && i !== 1)
  696.                         {
  697.                             draw();
  698.                             alert("Game Over - you bit youself, you died with a score of " + score + ".");
  699.                             setup();
  700.                         }
  701.                         if(tailX[i] === x && tailY[i] === y && i === 1)
  702.                         {
  703.                             switch(direction)
  704.                             {
  705.                                 case directions.UP:
  706.                                     y += 2;
  707.                                     direction = directions.DOWN;
  708.                                     break;
  709.                                 case directions.DOWN:
  710.                                     y -= 2;
  711.                                     direction = directions.UP;
  712.                                     break;
  713.                                 case directions.LEFT:
  714.                                     x += 2;
  715.                                     direction = directions.RIGHT;
  716.                                     break;
  717.                                 case directions.RIGHT:
  718.                                     x -= 2;
  719.                                     direction = directions.LEFT;
  720.                                     break;
  721.                             }
  722.                         }
  723.                     }
  724.  
  725.                     var prevX = tailX[0];
  726.                     var prevY = tailY[0];
  727.                     var prevX2, prevY2;
  728.                     tailX[0] = x;
  729.                     tailY[0] = y;
  730.                     for (var i = 1; i < nTail; i++)
  731.                     {
  732.                         prevX2 = tailX[i];
  733.                         prevY2 = tailY[i];
  734.                         tailX[i] = prevX;
  735.                         tailY[i] = prevY;
  736.                         prevX = prevX2;
  737.                         prevY = prevY2;
  738.                     }
  739.                 }
  740.  
  741.                 function rect(x,y, width,height, color)
  742.                 {
  743.                     canvasContext.fillStyle = color;
  744.                     canvasContext.fillRect(x,y, width,height);
  745.                 }
  746.  
  747.                 function circle(cX,cY, radius, color)
  748.                 {
  749.                     canvasContext.fillStyle = color;
  750.                     canvasContext.beginPath();
  751.                     canvasContext.arc(cX,cY, radius,0,Math.PI*2,true);
  752.                     canvasContext.fill();
  753.                 }
  754.  
  755.                 function checkKey(e)
  756.                 {
  757.                     var keynum;
  758.  
  759.                     if(window.event) { // IE                    
  760.                         keynum = e.keyCode;
  761.                     } else if(e.which){ // Netscape/Firefox/Opera                  
  762.                         keynum = e.which;
  763.                     }
  764.  
  765.                     switch(keynum)
  766.                     {
  767.                         case 87:    // w
  768.                             if(direction !== directions.DOWN)
  769.                             {
  770.                                 direction = directions.UP;
  771.                             }
  772.                             else if(nTail === 0)
  773.                             {
  774.                                 direction = directions.UP;
  775.                             }
  776.                             break;
  777.                         case 65:    // a
  778.                             if(direction !== directions.RIGHT)
  779.                             {
  780.                                 direction = directions.LEFT;
  781.                             }
  782.                             else if(nTail === 0)
  783.                             {
  784.                                 direction = directions.LEFT;
  785.                             }
  786.                             break;
  787.                         case 83:    // s
  788.                             if(direction !== directions.UP)
  789.                             {
  790.                                 direction = directions.DOWN;
  791.                             }
  792.                             else if(nTail === 0)
  793.                             {
  794.                                 direction = directions.DOWN;
  795.                             }
  796.                             break;
  797.                         case 68:    // d
  798.                             if(direction !== directions.LEFT)
  799.                             {
  800.                                 direction = directions.RIGHT;
  801.                             }
  802.                             else if(nTail === 0)
  803.                             {
  804.                                 direction = directions.RIGHT;
  805.                             }
  806.                             break;
  807.                     }
  808.                 }
  809.             });
  810.         </script>
  811.     </body>
  812. </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!