SHARE
TWEET

Untitled

a guest May 26th, 2019 90 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. console.log("connected");
  2. const canvasWidth = 500;
  3. const canvasHeight = 250;
  4.  
  5.  
  6.  
  7. window.onload = function(){
  8.     var canvas = document.getElementById("myCanvas")
  9.     var context = canvas.getContext("2d");
  10.     var stop = false;
  11.     var ball = {};
  12.     var area = {};
  13.     var plate = {};
  14.     var last_time = 0;
  15.     var toggle = document.getElementById("button");
  16.  
  17.  
  18.     function InitAnimation(){
  19.         console.log("fired");
  20.         var date = new Date();
  21.         last_time = date.getTime() + date.getMilliseconds() / 1000;
  22.         context.fillStyle = "white";
  23.         ball = {x: 20, y:20, r:10, vx: 50, vy: -150};
  24.         area = {x: 0, y:0, width: canvasWidth, height: canvasHeight};
  25.         plate = {x: area.width / 2.0, y: area.height - 20, width: 100, height: 7, fillStyle: "red", strokeStyle: "black", vx: 1}
  26.         // włączenie poruszanie
  27.         document.onkeydown = function (evt){
  28.             if(evt.keyCode === 37){
  29.                 plate.vx = -300;
  30.             }
  31.             if(evt.keyCode === 39){
  32.                 plate.vx = 300;
  33.             }
  34.         }
  35.  
  36.         window.requestAnimationFrame(drawAnimation);
  37.     }
  38.  
  39.    
  40.     function drawAnimation()
  41.     {
  42.         // czyszczenie płótna
  43.         context.clearRect(0,0,canvasWidth,canvasHeight);
  44.         var date = new Date();
  45.         var currentTime = date.getTime();
  46.         var time_interval = currentTime - last_time;
  47.         last_time = currentTime;
  48.         //wyznaczenie kolejnego stanu animacji
  49.         //wektor przesunięcia
  50.         var dx = ball.vx * time_interval / 1000;
  51.         var dy = ball.vy * time_interval / 1000;
  52.         var pdx = plate.vx * time_interval / 1000;
  53.         //console.log("pdx = " + pdx);    
  54.         //obliczenia itp.
  55.         if(ball.x + dx + ball.r >= area.width || ball.x - ball.r + dx <= 0)
  56.         {
  57.             ball.vx = -ball.vx; // kierunek
  58.             dx = ball.vx * time_interval/1000;
  59.         }
  60.         ball.x += dx;
  61.  
  62.         if(ball.y + dy + ball.r >= area.height || ball.y - ball.r + dy <= 0)
  63.         {
  64.             ball.vy = -ball.vy;
  65.             dy = ball.vy * time_interval/1000;
  66.         }
  67.         ball.y += dy;
  68.  
  69.         if(plate.x + pdx >= area.x && plate.x + pdx + plate.width <= area.width){        
  70.             plate.x += pdx;
  71.         }
  72.         else{
  73.             plate.vx = 0;
  74.         }
  75.  
  76.  
  77.  
  78.         //rysowanie stanu
  79.         context.save();
  80.         context.beginPath();
  81.         //kod rysujący elementy w nowych miejscach
  82.         context.fillStyle = "purple";
  83.         context.strokeStyle = "black";
  84.         context.arc(ball.x, ball.y, ball.r, 0, Math.PI * 2);
  85.         context.fillRect(plate.x, plate.y, plate.width, plate.height);
  86.         context.strokeRect(plate.x, plate.y, plate.width, plate.height);
  87.         context.closePath();
  88.         context.stroke();
  89.         context.fill();
  90.         context.beginPath();
  91.         context.fillStyle = plate.fillStyle;
  92.         context.strokeStyle = plate.strokeStyle;
  93.         context.fillRect(plate.x, plate.y, plate.width, plate.height);
  94.         context.strokeRect(plate.x, plate.y, plate.width, plate.height);
  95.         context.closePath();
  96.         context.stroke();
  97.         context.fill();
  98.  
  99.         context.restore();
  100.         if(!stop) window.requestAnimationFrame(drawAnimation);
  101.     }
  102.  
  103.     InitAnimation();
  104.    
  105.     toggle.addEventListener("click", function(){
  106.         if(stop)
  107.             stop = false;
  108.         else
  109.             stop = true;
  110.             window.requestAnimationFrame(drawAnimation);
  111.     });
  112. }
  113.  
  114. /*
  115. boilerplate
  116.  
  117. <html>
  118.     <body>
  119.             <canvas id="myCanvas" width="500" height = "250" style="border:1px solid #000000;"></canvas>
  120.              <button id = "button"> START/STOP </button>
  121.              <script type = text/javascript src="script.js"></script>
  122.     </body>
  123. </html>
  124.  
  125.  
  126.  
  127. */
RAW Paste Data
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!
 
Top