lemansky

Untitled

Nov 29th, 2021
771
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.             let x = 50;
  19.             let y = 50;
  20.             let moveX = 10;
  21.             let moveY = 14;
  22.             let radius = 20;
  23.  
  24.             canvas.addEventListener('mousemove', (e) => {
  25.                 let mouse = mouse_player1(e);
  26.                
  27.                 context.beginPath();
  28.                 context.fillStyle = "red";
  29.                 context.arc(mouse.x, mouse.y, 20, 0, 2*Math.PI);
  30.                 context.fill();
  31.                 context.closePath();
  32.             });
  33.  
  34.             const mouse_player1 = (e) => {
  35.                 return {
  36.                     x: e.layerX,
  37.                     y: e.layerY,
  38.                 }
  39.             }
  40.  
  41.             const executeTasks = () =>{
  42.                 // moveTask();
  43.                 drawTask();
  44.             }
  45.  
  46.             const moveTask = () => {
  47.                 x += moveX;
  48.                 y += moveY;
  49.                 if( x >= canvas.width - radius) {
  50.                     moveX = -moveX;
  51.                 }
  52.                 if( x <= 0 + radius ) {
  53.                     moveX = -moveX;
  54.                 }
  55.                 if(y >= canvas.height - radius){
  56.                     moveY = -moveY;
  57.                 }
  58.                 if(y <= 0 + radius ){
  59.                     moveY = -moveY;
  60.                 }
  61.  
  62.             }
  63.  
  64.             const drawTask = () => {
  65.                 context.clearRect(0, 0, canvas.width, canvas.height);
  66.  
  67.                 context.fillStyle = "green";
  68.                 context.beginPath();
  69.                 context.arc(x, y, radius, 0, Math.PI*2);
  70.                 context.fill();
  71.                 context.closePath();
  72.             }
  73.  
  74.             setInterval(executeTasks, 24);
  75.         });
  76.            
  77.     </script>
  78.     <style>
  79.         #canvasId{
  80.             background:black;
  81.         }
  82.     </style>
  83. </head>
  84. <body>
  85.     <canvas id="canvasId" width="800" height="600"></canvas>
  86. </body>
  87. </html>
RAW Paste Data