lemansky

Untitled

Nov 30th, 2021
752
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.  
  28.             const createBricks = () => {
  29.                 for (let i = 0; i < 9; i++) {
  30.                     let brick = new Brick(0 + i*90, 0, 80, 20);
  31.                     brickArray.push(brick);
  32.                 }
  33.             }
  34.  
  35.             createBricks();
  36.             console.log(brickArray);
  37.  
  38.             canvas.addEventListener('mousemove', (e) => {
  39.                 let mouse = mouse_player1(e);
  40.                
  41.                 // context.beginPath();
  42.                 // context.fillStyle = "red";
  43.                 // context.arc(mouse.x, mouse.y, 20, 0, 2*Math.PI);
  44.                 // context.fill();
  45.                 // context.closePath();
  46.  
  47.                 playerX = mouse.x - playerWidth/2;
  48.                 if(moveX == 0) {
  49.                     x = mouse.x;   
  50.                 }
  51.             });
  52.  
  53.             canvas.addEventListener('click', (e) => {
  54.                 // moveX =  moveX == 0 ? (Math.floor(Math.random()*2)  == 1 ? 10 : -10) : moveX;
  55.                 if(moveX == 0){
  56.                     if(Math.floor(Math.random()*2) == 1) {
  57.                         moveX = 10;
  58.                     } else {
  59.                         moveX = -10;
  60.                     }
  61.                 }
  62.                 // moveY = moveY == 0 ? moveY = -14 : moveY;
  63.                 if(moveY == 0) {
  64.                     moveY = -14;
  65.                 }
  66.  
  67.             });
  68.  
  69.             const mouse_player1 = (e) => {
  70.                 return {
  71.                     x: e.layerX,
  72.                     y: e.layerY,
  73.                 }
  74.             }
  75.  
  76.             const executeTasks = () =>{
  77.                 moveTask();
  78.                 drawTask();
  79.             }
  80.  
  81.             const moveTask = () => {
  82.                 x += moveX;
  83.                 y += moveY;
  84.                 if( x >= canvas.width - radius) {
  85.                     moveX = -moveX;
  86.                 }
  87.                 if( x <= 0 + radius ) {
  88.                     moveX = -moveX;
  89.                 }
  90.                 if(y >= canvas.height - radius*1.55){
  91.                    
  92.                     if(x >= playerX - 10 && x <= playerX + playerWidth + 10){
  93.                         moveY = -moveY;
  94.                     } else {
  95.                         console.log('game over');
  96.                         restart();
  97.                     }
  98.                 }
  99.                 if(y <= 0 + radius ){
  100.                     if(x >= 0 - 10 && x <= 0 + 80 + 10){
  101.                        
  102.                         brickArray[0].width = 0;
  103.                     }
  104.                     moveY = -moveY;
  105.  
  106.                 }
  107.  
  108.             }
  109.  
  110.             const restart = () => {
  111.                 moveX = 0;
  112.                 moveY = 0;
  113.                 y = canvas.height - 20 - radius;
  114.                 brickArray = [];
  115.                 createBricks();    
  116.             }
  117.  
  118.             const drawTask = () => {
  119.                 context.clearRect(0, 0, canvas.width, canvas.height);
  120.  
  121.                 context.fillStyle = "green";
  122.                 context.beginPath();
  123.                 context.arc(x, y, radius, 0, Math.PI*2);
  124.                 context.fill();
  125.                 context.closePath();
  126.  
  127.                 context.fillStyle = "white";
  128.                 context.fillRect(playerX, 580, playerWidth, 20);
  129.  
  130.                 context.fillStyle = "red";
  131.                 for (let i = 0; i < brickArray.length; i++) {
  132.                     context.fillRect(brickArray[i].x,
  133.                                     brickArray[i].y,
  134.                                     brickArray[i].width,
  135.                                     brickArray[i].height);
  136.                 }
  137.                
  138.  
  139.             }
  140.  
  141.             setInterval(executeTasks, 24);
  142.         });
  143.  
  144.  
  145.         class Brick{
  146.             constructor(x, y, width, height){
  147.                 this.x = x;
  148.                 this.y = y;
  149.                 this.width = width;
  150.                 this.height = height;
  151.             }
  152.         }
  153.            
  154.     </script>
  155.     <style>
  156.         #canvasId{
  157.             background:black;
  158.         }
  159.     </style>
  160. </head>
  161. <body>
  162.     <canvas id="canvasId" width="800" height="600"></canvas>
  163. </body>
  164. </html>
RAW Paste Data