API tools faq
paste
Advertisement
Szczepan86

ATARI Breakout

Szczepan86
May 26th, 2018
184
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 3.76 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title>Moja pierwsza gra</title>
  6.     <style>
  7.         * { padding: 0; margin: 0; }
  8.         canvas { background: #eee; display: block; margin: 0 auto; }
  9.     </style>
  10. </head>
  11. <body>
  12.  
  13. <canvas id="myCanvas" width="480" height="320"></canvas>
  14.  
  15. <script>
  16.     var canvas = document.getElementById("myCanvas");
  17.     var ctx = canvas.getContext("2d");
  18.     // koordynaty kola wraz z wartoscia poczatkowa
  19.     var x = canvas.width / 2;
  20.     var y = canvas.height - 30;
  21.     var dx = 2;
  22.     var dy = -2;
  23.     var ballRadius = 10;
  24.     // ustawienia paletki
  25.     var paddleHeight = 10;
  26.     var paddleWidth = 80;
  27.     var paddleX = canvas.width / 2;
  28.     var paddleY = canvas.height - paddleHeight;
  29.     var rightPressed = false;
  30.     var leftPressed = false;
  31.     // cegly
  32.     var brickWidth = 75;        // szerokosc cegly
  33.     var brickHeight = 20;       // wysokosc cegly
  34.     var brickPadding = 10;      // odstep miedzy ceglami
  35.     var brickOffsetTop = 30;    // odleglosc od gornej krawedzi ekranu
  36.     var brickOffsetLeft = 30;   // odleglosc od lewej strony ekranu
  37.     var brickRowCount = 3;      // ilosc wierszy
  38.     var brickColumnCount = 5;   // ilosc kolumn
  39.    
  40.     var brick = [];
  41.    
  42.    
  43.     for(var r = 0; r < brickRowCount; r++) {
  44.         brick[r] = [];
  45.         for(var c = 0; c < brickColumnCount; c++) {
  46.             var brickX = brickOffsetLeft + c * (brickWidth + brickPadding);
  47.             var brickY = brickOffsetTop + r * (brickHeight + brickPadding);
  48.             brick[r][c] = {x: brickX, y: brickY, status: 1};
  49.         }
  50.     }
  51.    
  52.     // rysowanie paletki
  53.     function drawPaddle() {
  54.         ctx.beginPath();
  55.         ctx.rect(paddleX, paddleY, paddleWidth, paddleHeight);
  56.         ctx.fillStyle = "blue";
  57.         ctx.fill();
  58.         ctx.closePath();
  59.     }
  60.    
  61.     // rysowanie pilki
  62.     function drawBall() {
  63.         ctx.beginPath();
  64.         ctx.arc(x, y, ballRadius, 0, Math.PI*2, false);
  65.         ctx.fillStyle = "#b34f9d";
  66.         ctx.fill();
  67.         ctx.closePath();
  68.     }
  69.    
  70.     // rysowanie cegiel
  71.     function drawBricks() {
  72.         for(var r = 0; r < brickRowCount; r++) {
  73.             for(var c = 0; c < brickColumnCount; c++) {
  74.                 if(brick[r][c].status == 1) {
  75.                     var brickX = brick[r][c].x;
  76.                     var brickY = brick[r][c].y;
  77.                     ctx.beginPath();
  78.                     ctx.rect(brickX, brickY, brickWidth, brickHeight);
  79.                     ctx.fillStyle = "black";
  80.                     ctx.fill();
  81.                     ctx.closePath();
  82.                 }
  83.             }
  84.         }
  85.     }
  86.    
  87.     function collisionDection() {
  88.         for(var r = 0; r < brickRowCount; r++) {
  89.             for(var c = 0; c < brickColumnCount; c++) {
  90.                 var b = brick[r][c];
  91.                 if(b.status == 1) {
  92.                     if(x > b.x && x < b.x + brickWidth && y > b.y && y < b.y + brickHeight) {
  93.                         b.status = 0;
  94.                         dy = - dy;
  95.                     }
  96.                 }
  97.             }
  98.         }
  99.     }
  100.    
  101.     function keyDownHandler(e) {
  102.         // strzalka w prawo - 39
  103.         if(e.keyCode == 39) {
  104.             rightPressed = true;
  105.         }
  106.         // strzalka w left - 37
  107.         if(e.keyCode == 37) {
  108.             leftPressed = true;
  109.         }
  110.     }
  111.        
  112.     function keyUpHandler(e) {
  113.         // strzalka w prawo - 39
  114.         if(e.keyCode == 39) {
  115.             rightPressed = false;
  116.         }
  117.         // strzalka w left - 37
  118.         if(e.keyCode == 37) {
  119.             leftPressed = false;
  120.         }
  121.     }
  122.    
  123.     function draw() {
  124.         ctx.clearRect(0, 0, canvas.width, canvas.height);
  125.         drawBall();
  126.         drawPaddle();
  127.         drawBricks();
  128.         collisionDection();
  129.        
  130.         if(x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
  131.             dx = -dx;
  132.         }
  133.         if(y + dy < ballRadius) {
  134.             dy = -dy;
  135.         }
  136.         if(y + dy > canvas.height - ballRadius) {
  137.             if(x < paddleX || x > paddleX + paddleWidth) {
  138.                 alert("GAME OVER");
  139.                 document.location.reload();
  140.             } else {
  141.                 dy = -dy;
  142.             }
  143.         }
  144.        
  145.         document.addEventListener("keydown", keyDownHandler);
  146.         document.addEventListener("keyup", keyUpHandler);
  147.         if(rightPressed && paddleX < canvas.width - paddleWidth) {
  148.             paddleX += 6;
  149.         }
  150.         if(leftPressed && paddleX > 0) {
  151.             paddleX -= 6;
  152.         }
  153.        
  154.        
  155.         x = x + dx;
  156.         y = y + dy;
  157.     }
  158.    
  159.     setInterval(draw, 10);
  160. </script>
  161.  
  162. </body>
  163. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!