lemansky

Untitled

Nov 29th, 2021
735
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.  
  27.  
  28.             canvas.addEventListener('mousemove', (e) => {
  29.                 let mouse = mouse_player1(e);
  30.                
  31.                 context.beginPath();
  32.                 context.fillStyle = "red";
  33.                 context.arc(mouse.x, mouse.y, 20, 0, 2*Math.PI);
  34.                 context.fill();
  35.                 context.closePath();
  36.  
  37.                 playerX = mouse.x - playerWidth/2;
  38.  
  39.             });
  40.  
  41.             canvas.addEventListener('click', (e) => {
  42.                 // moveX =  moveX == 0 ? (Math.floor(Math.random()*2)  == 1 ? 10 : -10) : moveX;
  43.                 if(moveX == 0){
  44.                     if(Math.floor(Math.random()*2) == 1) {
  45.                         moveX = 10;
  46.                     } else {
  47.                         moveX = -10;
  48.                     }
  49.                 }
  50.                 // moveY = moveY == 0 ? moveY = -14 : moveY;
  51.                 if(moveY == 0) {
  52.                     moveY = -14;
  53.                 }
  54.  
  55.             });
  56.  
  57.             const mouse_player1 = (e) => {
  58.                 return {
  59.                     x: e.layerX,
  60.                     y: e.layerY,
  61.                 }
  62.             }
  63.  
  64.             const executeTasks = () =>{
  65.                 moveTask();
  66.                 drawTask();
  67.             }
  68.  
  69.             const moveTask = () => {
  70.                 x += moveX;
  71.                 y += moveY;
  72.                 if( x >= canvas.width - radius) {
  73.                     moveX = -moveX;
  74.                 }
  75.                 if( x <= 0 + radius ) {
  76.                     moveX = -moveX;
  77.                 }
  78.                 if(y >= canvas.height - radius){
  79.                     moveY = -moveY;
  80.                 }
  81.                 if(y <= 0 + radius ){
  82.                     moveY = -moveY;
  83.                 }
  84.  
  85.             }
  86.  
  87.             const drawTask = () => {
  88.                 context.clearRect(0, 0, canvas.width, canvas.height);
  89.  
  90.                 context.fillStyle = "green";
  91.                 context.beginPath();
  92.                 context.arc(x, y, radius, 0, Math.PI*2);
  93.                 context.fill();
  94.                 context.closePath();
  95.  
  96.                 context.fillStyle = "white";
  97.                 context.fillRect(playerX, 580, playerWidth, 20);
  98.             }
  99.  
  100.             setInterval(executeTasks, 24);
  101.         });
  102.            
  103.     </script>
  104.     <style>
  105.         #canvasId{
  106.             background:black;
  107.         }
  108.     </style>
  109. </head>
  110. <body>
  111.     <canvas id="canvasId" width="800" height="600"></canvas>
  112. </body>
  113. </html>
RAW Paste Data