API tools faq
paste
Advertisement
deyanivanov966

Упражнение 5 Банков Canvas Решение на задача тухлички 30.11.21

deyanivanov966
Jan 13th, 2022
644
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 6.03 KB | None | 0 0
raw download clone embed print report
  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>
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!