lemansky

Untitled

Nov 30th, 2020
506
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.     <script>
  8.  
  9.         document.addEventListener('DOMContentLoaded', function(){
  10.             const canvas = document.getElementById("canvasId");
  11.             const canvasId = canvas.getContext("2d");
  12.             let ball = new Ball(50, 50, 20, 10, 13);
  13.  
  14.             // canvas.addEventListener("mousemove", function(evt){
  15.             //  const mouse = mouse_player1(evt, canvas);
  16.                
  17.             //  // do some tasks
  18.  
  19.             // });
  20.  
  21.             const executeTasks = () => {
  22.                 moveTask();
  23.                 drawTask();
  24.             }
  25.  
  26.             const moveTask = () => {
  27.                 ball.x += ball.speedX;
  28.  
  29.                 if(ball.x + ball.r >= canvas.width || ball.x - ball.r <= 0){
  30.                    ball.speedX = -ball.speedX;
  31.                }
  32.  
  33.             }
  34.  
  35.             const drawTask = () => {
  36.                 canvasId.fillStyle = "black";
  37.                 canvasId.fillRect(0, 0, canvas.width, canvas.height);
  38.  
  39.                 canvasId.fillStyle = "green";
  40.                 canvasId.beginPath();
  41.                 canvasId.arc(ball.x, ball.y, 20, 0, Math.PI*2);
  42.                 canvasId.fill();
  43.                 canvasId.closePath();
  44.             }
  45.  
  46.             setInterval(executeTasks, 33);
  47.  
  48.         });
  49.  
  50.         class Ball{
  51.             constructor(x, y, radius, speedX, speedY){
  52.                 this.x = x;
  53.                 this.y = y;
  54.                 this.r = radius;
  55.                 this.speedX = speedX;
  56.                 this.speedY = speedY;
  57.             }
  58.         }
  59.  
  60.         // const mouse_player1 = (evt, canvas) => {
  61.         //  let rect = canvas.getBoundingClientRect(); // взима позицията на платното в документа, в случай, че то не започва от горния ляв ъгъл
  62.         //  let mouseX = evt.clientX - rect.left; // позицията на курсора по хоризонтала
  63.         //  let mouseY = evt.clientY - rect.top; // позиията на курсора по вертикала
  64.         //  return {
  65.         //      x: mouseX,
  66.         //      y: mouseY,
  67.         //  } // фунцкията връша два параметъра, x и y
  68.         // }
  69.  
  70.            
  71.     </script>
  72.     <style>
  73.         #canvasId{
  74.             background:black;
  75.         }
  76.     </style>
  77. </head>
  78. <body>
  79.     <canvas id="canvasId" width="1000" height="600"></canvas>
  80. </body>
  81. </html>
RAW Paste Data