lemansky

Untitled

Nov 30th, 2021
897
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         body{
  9.             /*margin:0px;*/
  10.         }
  11.     </style>
  12.     <script>
  13.  
  14.         document.addEventListener('DOMContentLoaded', function(){
  15.             const canvas = document.getElementById("canvasId");
  16.             const context = canvas.getContext("2d");
  17.  
  18.              
  19.             let moveX = 0; // скорост по широчина
  20.             let moveY = 0; // скорост по височина
  21.             let radius = 20; // радиус на топче
  22.             let playerX = 0; // позиция по широчина на палката
  23.             let playerWidth = 100; // широчина на палката
  24.             let x = canvas.width/2; // позиция на център на окръжност
  25.             let y = canvas.height - 20 - radius; // minus visochinata na palkata  позиция на център на окръжност
  26.             let brickArray = [];
  27.             let bonus;
  28.  
  29.             let colorArray = ["red", "yellow", "royalblue", "green", "firebrick", "lightseagreen", "pink", "orange", "teal", "magenta", "darkgreen", "coral"];
  30.  
  31.  
  32.             const createBricks = () => {
  33.                 for (let i = 0; i < 9; i++) {
  34.                     let rnd = Math.floor(Math.random()*12);
  35.                     let brick = new Brick(0 + i*90, 0, 80, 20, colorArray[rnd], false, false);
  36.                     brickArray.push(brick);
  37.                 }
  38.             }
  39.  
  40.             createBricks();
  41.  
  42.             const chooseSolidBrick = () => {
  43.                 let rnd = Math.floor(Math.random()*brickArray.length);
  44.                 // console.log(rnd);
  45.                 brickArray[rnd].solid = true;
  46.             }
  47.  
  48.             chooseSolidBrick();
  49.  
  50.             const chooseBonusBrick = () => {
  51.                 let rnd = Math.floor(Math.random()*brickArray.length);
  52.                 bonus = new Bonus(brickArray[rnd].x + 20, brickArray[rnd].y);
  53.                 brickArray[rnd].bonus = true;
  54.                 console.log(rnd);
  55.  
  56.             }
  57.  
  58.             chooseBonusBrick();
  59.  
  60.             canvas.addEventListener('mousemove', (e) => {
  61.                 let mouse = mouse_player1(e);
  62.                
  63.                 // context.beginPath();
  64.                 // context.fillStyle = "red";
  65.                 // context.arc(mouse.x, mouse.y, 20, 0, 2*Math.PI);
  66.                 // context.fill();
  67.                 // context.closePath();
  68.  
  69.                 playerX = mouse.x - playerWidth/2;
  70.                 if(moveX == 0) {
  71.                     x = mouse.x;   
  72.                 }
  73.             });
  74.  
  75.             canvas.addEventListener('click', (e) => {
  76.                 // moveX =  moveX == 0 ? (Math.floor(Math.random()*2)  == 1 ? 10 : -10) : moveX;
  77.                 if(moveX == 0){
  78.                     if(Math.floor(Math.random()*2) == 1) {
  79.                         moveX = 10;
  80.                     } else {
  81.                         moveX = -10;
  82.                     }
  83.                 }
  84.                 // moveY = moveY == 0 ? moveY = -14 : moveY;
  85.                 if(moveY == 0) {
  86.                     moveY = -14;
  87.                 }
  88.  
  89.             });
  90.  
  91.             const mouse_player1 = (e) => {
  92.                 return {
  93.                     x: e.layerX,
  94.                     y: e.layerY,
  95.                 }
  96.             }
  97.  
  98.             const executeTasks = () =>{
  99.                 moveTask();
  100.                 drawTask();
  101.             }
  102.  
  103.             const moveTask = () => {
  104.                 x += moveX;
  105.                 y += moveY;
  106.                 if( x >= canvas.width - radius) {
  107.                     moveX = -moveX;
  108.                 }
  109.                 if( x <= 0 + radius ) {
  110.                     moveX = -moveX;
  111.                 }
  112.                 if(y >= canvas.height - radius*1.55){
  113.                    
  114.                     if(x >= playerX - 10 && x <= playerX + playerWidth + 10){
  115.                         moveY = -moveY;
  116.                     } else {
  117.                         console.log('game over');
  118.                         restart();
  119.                     }
  120.                 }
  121.  
  122.                 if(y <= 0 + radius){
  123.                     if(x >= 0 - 10 && x <= 0 + 80 + 10){
  124.                        
  125.                         brickArray[0].width = 0;
  126.                     }
  127.                     // for(let i = 0; i < brickArray.length; i++){
  128.                     //  if(x >= brickArray[i].x - 10 && x <= brickArray[i].x + brickArray[i].width + 10){
  129.  
  130.                     //      if(brickArray[i].solid == false) {
  131.                     //          brickArray[i].width = 0;
  132.                     //      }
  133.                     //      if(brickArray[i].solid == true){
  134.                     //          brickArray[i].color = 'gray';
  135.                     //      }
  136.                     //  }
  137.                     // }
  138.  
  139.                     brickArray.forEach( item => {
  140.                         if(x >= item.x - 10 && x <= item.x + item.width + 10){
  141.                             if(item.solid == false) {
  142.                                 item.width = 0;
  143.                                 if(item.bonus == true){
  144.                                     bonus.width = 40;
  145.                                     bonus.height = 40;
  146.                                     console.log(bonus);
  147.                                 }
  148.                             }
  149.  
  150.                             if(item.solid == true && item.color == 'gray'){
  151.                                 item.width = 0;
  152.                                 if(item.bonus == true){
  153.                                     bonus.width = 40;
  154.                                     bonus.height = 40;
  155.                                     console.log(bonus);
  156.                                 }
  157.  
  158.                             }
  159.                             if(item.solid == true && item.color != 'gray'){
  160.                                 item.color = 'gray';
  161.                             }
  162.                         }
  163.                     });
  164.                     moveY = -moveY;
  165.  
  166.                 }
  167.  
  168.                 if(bonus.width != 0){
  169.                     bonus.y += 10;
  170.                 }
  171.  
  172.                 if(bonus.y >= canvas.height - 20) {
  173.                     if(bonus.x >= playerX && bonus.x <= playerX + playerWidth){
  174.                         playerWidth = playerWidth*2;
  175.                         bonus.width = 0;
  176.                         bonus.x = 999;
  177.  
  178.                     }
  179.                 }
  180.  
  181.             }
  182.  
  183.             const restart = () => {
  184.                 moveX = 0;
  185.                 moveY = 0;
  186.                 y = canvas.height - 20 - radius;
  187.                 brickArray = [];
  188.                 createBricks();    
  189.                 chooseSolidBrick();
  190.                 chooseBonusBrick();
  191.  
  192.             }
  193.  
  194.             const drawTask = () => {
  195.                 context.clearRect(0, 0, canvas.width, canvas.height);
  196.  
  197.                 context.fillStyle = "green";
  198.                 context.beginPath();
  199.                 context.arc(x, y, radius, 0, Math.PI*2);
  200.                 context.fill();
  201.                 context.closePath();
  202.  
  203.                 context.fillStyle = "white";
  204.                 context.fillRect(playerX, 580, playerWidth, 20);
  205.                
  206.                 for (let i = 0; i < brickArray.length; i++) {
  207.                     context.fillStyle = brickArray[i].color;
  208.                     context.fillRect(brickArray[i].x,
  209.                                     brickArray[i].y,
  210.                                     brickArray[i].width,
  211.                                     brickArray[i].height);
  212.                 }
  213.                
  214.                 context.fillStyle = bonus.color;
  215.                 context.fillRect(bonus.x, bonus.y, bonus.width, bonus.height);
  216.  
  217.             }
  218.  
  219.             setInterval(executeTasks, 24);
  220.         });
  221.  
  222.  
  223.         class Brick{
  224.             constructor(x, y, width, height, color, solid, bonus){
  225.                 this.x = x;
  226.                 this.y = y;
  227.                 this.width = width;
  228.                 this.height = height;
  229.                 this.color = color;
  230.                 this.solid = solid;
  231.                 this.bonus = bonus;
  232.             }
  233.         }
  234.  
  235.         class Bonus{
  236.             constructor(x, y){
  237.                 this.x = x;
  238.                 this.y = y;
  239.                 this.width = 0;
  240.                 this.height = 0;
  241.                 this.color = 'blue';
  242.                 this.type = 'increase-paddle-size';
  243.             }
  244.         }
  245.            
  246.     </script>
  247.     <style>
  248.         #canvasId{
  249.             background:black;
  250.         }
  251.     </style>
  252. </head>
  253. <body>
  254.     <canvas id="canvasId" width="800" height="600"></canvas>
  255. </body>
  256. </html>
RAW Paste Data