Facebook
From Melodic Mousedeer, 3 Years ago, written in Plain Text.
Embed
Download Paste or View Raw
Hits: 63
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>Arkanoid</title>
  5.         <meta charset="UTF-8"/>
  6.         <style>
  7.             canvas {
  8.                 background: #a89ea8;
  9.                 margin: 0 auto;
  10.                 display: block;
  11.             }
  12.         </style>
  13.     </head>
  14.     <body>
  15.         <canvas id="Arkanoid" width="200" height="200"></canvas>
  16.        
  17.         <script type="text/javascript">
  18.             var arkanoid = document.getElementById('Arkanoid');
  19.             var context = arkanoid.getContext('2d');
  20.  
  21.             var cegly = [];
  22.             var wierszy = parseInt(Math.random()*5)+4;
  23.             var kolumny = parseInt(Math.random()*5)+4;
  24.             var szerCegla = 70;
  25.             var wysCegla = 20;
  26.             var ceglaPadding = 10;
  27.             var ceglaOffsetTop = 30;
  28.             var ceglaOffsetLeft = (arkanoid.width - (szerCegla + ceglaPadding) * kolumny)/2;
  29.             var x = arkanoid.width/2;
  30.             var y = arkanoid.height/2;
  31.             var rozmiarKulki = 20;
  32.             var szerPaletki = 80;
  33.             var wysPaletki = 10;
  34.             var xp = (arkanoid.width-szerPaletki)/2
  35.             const yp = arkanoid.height-2*wysPaletki;
  36.  
  37.  
  38.             context.fillStyle = "rgb(0, 255, 0)";
  39.  
  40.             document.addEventListener('keydown', klawiszWcisniety, false);
  41.             document.addEventListener('keyup', klawiszPuszczony, false);
  42.  
  43.             function klawiszWcisniety(e) {
  44.                 if (e.keyCode == 37) {
  45.                     ruchLewo = true;
  46.                     ruchPrawo = false;
  47.                 }
  48.                 if (e.keyCode == 39) {
  49.                     ruchLewo = false;
  50.                     ruchPrawo = true;
  51.                 }
  52.             }
  53.  
  54.             function klawiszPuszczony(e) {
  55.                 ruchLewo = ruchPrawo = false;
  56.             }
  57.  
  58.             function ruchPaletki() {
  59.                 if (ruchPrawo && xp < arkanoid.width + szerPaletki) {
  60.                    
  61.                 }
  62.             }
  63.  
  64.             function Cegla(cx, cy) {
  65.                 this.x = cx;
  66.                 this.y = cy;
  67.             }
  68.  
  69.             function rysujCegle(cegla) {
  70.                 context.beginPath();
  71.                 context.rect(cegla.x, cegla.y, szerCegla, wysCegla);
  72.                 context.fillStyle = "#AAA";
  73.                 context.fill();
  74.                 context.closePath();
  75.             }
  76.  
  77.             function rysujCegly() {
  78.                 for (var i = 0; i < kolumny; i++) {
  79.                     cegly[i] = [];
  80.                     for (var j = 0; j < wierszy; j++) {
  81.                         var cx = i * (szerCegla + ceglaPadding) + ceglaOffsetLeft;
  82.                         var cy = j * (wysCegla + ceglaPadding) + ceglaOffsetTop;
  83.                         cegly[i][j] = new Cegla(cx, cy);
  84.                         rysujCegle(cegly[i][j]);
  85.                     }
  86.                 }
  87.             }
  88.  
  89.             function rysujKulke() {
  90.                 context.beginPath();
  91.                 context.arc(x, y, rozmiarKulki, 0, Math.PI * 2, false);
  92.                 context.fillStyle = "red";
  93.                 context.fill();
  94.                 context.closePath();
  95.             }
  96.  
  97.             function rysujPaletke() {
  98.                 context.beginPath();
  99.                 context.rect(xp, yp, szerPaletki, wysPaletki);
  100.                 context.fillStyle = "black";
  101.                 context.fill();
  102.                 context.closePath();
  103.             }
  104.  
  105.             function rysuj() {
  106.                 rysujCegly();
  107.             }
  108.  
  109.             setInterval(rysuj, 10);
  110.         </script>
  111.  
  112.     </body>
  113. </html>