API tools faq
paste
beannshie

HTML Atari Breakout

beannshie
Sep 22nd, 2018
181
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 12.26 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <meta http-equiv="x-ua-compatible" content="ie=edge">
  6.         <title>Atari Breakout</title>
  7.         <meta name="description" content="">
  8.         <meta name="viewport" content="width=device-width, initial-scale=1">
  9.         <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  10.         <link rel="icon" href="">
  11.         <style>
  12.             * {
  13.                 font-family: sans-serif;
  14.                 font-size: 16px;
  15.                 width: 100%;
  16.                 height: 100%;
  17.                 padding: 0;
  18.                 margin: 0;
  19.             }
  20.             canvas {
  21.                 width: 100%;
  22.                 height: 99.6%;
  23.             }
  24.         </style>
  25.     </head>
  26.     <body>
  27.         <canvas id="canvas"></canvas>
  28.         <script>
  29.             var canvas = document.getElementById("canvas");
  30.             var canvasContext = canvas.getContext('2d');
  31.            
  32.             var winW = window.innerWidth;
  33.             var winH = window.innerHeight;
  34.             canvasContext.canvas.width  = window.innerWidth;
  35.             canvasContext.canvas.height = window.innerHeight;
  36.            
  37.             const contX = canvas.width/30;                          // container X
  38.             const contY = canvas.height/7;                          // container Y
  39.             const contW = canvas.width - canvas.width/15;           // container width
  40.             const contH = canvas.height - canvas.height/5;          // container height
  41.            
  42.             const gameX = contX + contW/100;
  43.             const gameY = contY + contH/50;
  44.             const gameW = contW - contW/50;
  45.             const gameH = contH - contH/25;
  46.            
  47.             const borderTop = contY + contH/50;                     // top border of container
  48.             const borderBot = borderTop + (contH - contH/25);       // bottom border of container
  49.             const borderLeft = contX + contW/100;                   // left border of container
  50.             const borderRight = borderLeft + (contW - contW/50);    // right border of container
  51.            
  52.             const paddleW = borderLeft*4;                           // paddle width
  53.             const paddleH = gameH/25;                               // paddle height
  54.             const paddleY = borderBot - contH/10;                   // paddle Y
  55.             var paddleX;                                            // paddle X
  56.            
  57.             const ballR = 10;
  58.             const maxBallSpeed = 10;
  59.             var ballX,ballY,ballSpeedX,ballSpeedY,firstHit,bounceVAR;
  60.            
  61.             var score,lives;
  62.             var gameWon,gameOver = false;
  63.             const ROWS = 10;
  64.             const COLUMNS = 5;
  65.             const MAX_SCORE = ROWS*COLUMNS*100;
  66.            
  67.             var brickDistX = (gameW/ROWS)/(ROWS*5);
  68.             var brickDistY = (gameH/ROWS)/(ROWS*2);
  69.             var brickW = gameW/ROWS - brickDistX;
  70.             var brickH = gameH/(COLUMNS*4) - brickDistY;
  71.             var bricksX = [];                                       // array with X coordinate of each brick
  72.             var bricksY = [];                                       // array with Y coordinate of each brick
  73.             var bricksBroken = [];                                  // array that holds information about which bricks are broken
  74.            
  75.             var currentColumn = 1;
  76.             for(var j = 0; j < (COLUMNS*ROWS); j += ROWS)
  77.             {
  78.                 for(var i = 0; i < ROWS; i++)
  79.                 {
  80.                     if(i === 0 || (i !== 1 && i%ROWS === 0))
  81.                     {
  82.                         bricksX[(i+j)] = borderLeft + (brickW * i) + brickDistX*3;
  83.                     }
  84.                     else
  85.                     {
  86.                         bricksX[(i+j)] = bricksX[(i-1)] + brickW + (brickDistX/2);
  87.                     }
  88.                     bricksY[(i+j)] = (borderTop + gameH/10) + ((brickDistY + brickH) * currentColumn);
  89.                     bricksBroken[(i+j)] = false;
  90.                 }
  91.                 currentColumn++;
  92.             }
  93.            
  94.             canvas.addEventListener('mousemove',                    // checks if the mouse moves
  95.                 function(evt) {
  96.                     var mousePos = calculateMousePos(evt);
  97.                    
  98.                     if(mousePos.x < borderLeft+(paddleW/2))
  99.                     {
  100.                         paddleX = gameX+1;
  101.                     }
  102.                     else if(mousePos.x >= borderRight-(paddleW/2))
  103.                     {
  104.                         paddleX = (borderRight-paddleW)-1;
  105.                     }
  106.                     else
  107.                     {
  108.                         paddleX = mousePos.x - paddleW/2;
  109.                     }
  110.                 }
  111.             );
  112.            
  113.             setup();
  114.             function timeout() {
  115.                 setTimeout(function () {
  116.                     main();
  117.                     timeout();
  118.                 }, 30);
  119.             };
  120.             timeout();
  121.            
  122.             function setup()
  123.             {
  124.                 firstHit = true;
  125.                 score = 0;
  126.                 lives = 3;
  127.                 ballX = winW/2;
  128.                 ballY = gameH/1.5;
  129.                 ballSpeedX = 0;
  130.                 ballSpeedY = 5;
  131.                 paddleX = gameX + gameW/2 - paddleW/2;
  132.                 for(var i = 0; i < (ROWS*COLUMNS); i++)
  133.                 {
  134.                     bricksBroken[i] = false;
  135.                 }
  136.             }
  137.  
  138.             function main()
  139.             {
  140.                 move();
  141.                 logic();
  142.                 draw();
  143.             }
  144.            
  145.             function draw()
  146.             {
  147.                 rect(0,0, winW,winH, 'black');                                                          // canvas
  148.                 rect(contX,contY, contW,contH,'white');                                                 // game area container
  149.                 rect(gameX,gameY, gameW,gameH,'black');                                                 // game area
  150.                 rect(paddleX,paddleY, paddleW,paddleH,'white');                                         // paddle
  151.                
  152.                 if(!gameOver && !gameWon)
  153.                 {
  154.                     circle(ballX,ballY, ballR,'white');                                                     // ball
  155.                
  156.                     for(var i = 0; i < (ROWS*COLUMNS); i++)
  157.                     {
  158.                         if(!bricksBroken[i])
  159.                         {
  160.                             rect(bricksX[i],bricksY[i], brickW,brickH,'white');
  161.                         }
  162.                     }
  163.                 }
  164.                
  165.                 text("Score : " + score, canvas.width/4,canvas.height/12, canvas.height/16,'white');
  166.                 text("Lives : " + lives, canvas.width/4 + 2*(canvas.width/6),canvas.height/12, canvas.height/16,'white');
  167.             }
  168.            
  169.             function move()
  170.             {
  171.                 ballX += ballSpeedX;
  172.                 ballY += ballSpeedY;
  173.             }
  174.            
  175.             function logic()
  176.             {
  177.                 // reset the ball when it hits the bottom border
  178.                 if(ballY >= borderBot)
  179.                 {
  180.                     lives--;
  181.                     ballX = winW/2;
  182.                     ballY = gameH/1.5;
  183.                     ballSpeedX = 0;
  184.                     ballSpeedY = 5;
  185.                     firstHit = true;
  186.                 }
  187.                
  188.                 //  bounce the ball when it hits a wall
  189.                 if(ballY <= borderTop)
  190.                 {
  191.                     ballSpeedY *= -1;
  192.                 }
  193.                 if((ballX <= borderLeft) || (ballX >= borderRight))
  194.                 {
  195.                     ballSpeedX *= -1;
  196.                 }
  197.                
  198.                 //  bounce the ball when it hits the paddle
  199.                 if((ballY >= paddleY) && (ballY <= (paddleY+paddleH)) && (ballX >= paddleX) && (ballX <= (paddleX+paddleW)))
  200.                 {
  201.                     if(firstHit)
  202.                     {
  203.                         if(ballX < (paddleX+paddleX/2))
  204.                         {
  205.                             ballSpeedX = 5;
  206.                         }
  207.                         else if(ballX >= (paddleX+paddleX/2))
  208.                         {
  209.                             ballSpeedX = -5;
  210.                         }
  211.                         ballSpeedY = 10;
  212.                         firstHit = false;
  213.                     }
  214.                    
  215.                     bounceVAR = ballX - (paddleX+paddleW/2);
  216.                     ballSpeedX = bounceVAR * 0.35;
  217.                     ballSpeedY *= -1;
  218.                    
  219.                     if(ballSpeedX > maxBallSpeed)
  220.                     {
  221.                         ballSpeedX = maxBallSpeed;
  222.                     }
  223.                 }
  224.                
  225.                 // check if a brick is hit
  226.                 for(var i = 0; i < (ROWS*COLUMNS); i++)
  227.                 {
  228.                     if((ballX >= bricksX[i]) && (ballX <= (bricksX[i]+brickW)) && (ballY >= bricksY[i]) && (ballY <= (bricksY[i]+brickH)) && (!bricksBroken[i]))
  229.                     {
  230.                         if((ballX - ballSpeedX) < bricksX[i])
  231.                         {
  232.                             ballX = bricksX[i];
  233.                             ballSpeedX *= -1;
  234.                         }
  235.                         if((ballX - ballSpeedX) > (bricksX[i] + brickW))
  236.                         {
  237.                             ballX = bricksX[i] + brickW;
  238.                             ballSpeedX *= -1;
  239.                         }
  240.                         if(((ballY - ballSpeedY) < bricksY[i]))
  241.                         {
  242.                             ballY = bricksY[i];
  243.                             ballSpeedY *= -1;
  244.                         }
  245.                         if((ballY - ballSpeedY) > (bricksY[i] + brickH))
  246.                         {
  247.                             ballY = bricksY[i] + brickH;
  248.                             ballSpeedY *= -1;
  249.                         }
  250.                         bricksBroken[i] = true;
  251.                         score += 100;
  252.                     }
  253.                 }
  254.                
  255.                 // checks if the player won the game and if the player has no lives left
  256.                 if(score >= MAX_SCORE)
  257.                 {
  258.                     draw();
  259.                     alert("Congratulations, you've won the game with " + lives + " lives left!!!");
  260.                     setup();
  261.                     gameWon = true;
  262.                 }
  263.                 else if(lives <= 0)
  264.                 {
  265.                     var prependAlert = "";
  266.                     for(var i = 0; i < (score.toString().length); i += 2)
  267.                     {
  268.                         prependAlert += ' ';
  269.                     }
  270.                     alert(prependAlert + "\t       Game Over\nYou died with a score of " + score);
  271.                     setup();
  272.                 }
  273.             }
  274.            
  275.             function rect(x,y, width,height, color)
  276.             {
  277.                 canvasContext.fillStyle = color;
  278.                 canvasContext.fillRect(x,y, width,height);
  279.             }
  280.            
  281.             function circle(cX,cY, radius, color)
  282.             {
  283.                 canvasContext.fillStyle = color;
  284.                 canvasContext.beginPath();
  285.                 canvasContext.arc(cX,cY, radius,0,Math.PI*2,true);
  286.                 canvasContext.fill();
  287.             }
  288.            
  289.             function text(txt, x,y, size,color)
  290.             {
  291.                 canvasContext.fillStyle = color;
  292.                 canvasContext.font = size + "px Arial";
  293.                 canvasContext.fillText(txt,x,y);
  294.             }
  295.            
  296.             function calculateMousePos(evt) {                       // calculates the position of the mouse
  297.                 var rect = canvas.getBoundingClientRect();
  298.                 var root = document.documentElement;
  299.                 var mouseX = evt.clientX - rect.left  - root.scrollLeft;
  300.                 var mouseY = evt.clientY - rect.top  - root.scrollTop;
  301.                 return {
  302.                     x:mouseX,
  303.                     y:mouseY
  304.                 };
  305.             }
  306.         </script>
  307.     </body>
  308. </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!