setinterval 및 settiomeout을 사용할 때 pong paddles

-1

그래서 나는 테이블을 만들려고 노력하고 있어요. 탁구를 만들려고 노력하고 있어요 .. 캔과 캔을 사용하여 공과 공에 대한 두 가지 기능을 사용하고 있습니다 패 객체와 movment를 에 대한 이벤트 리스너가 흥미로운 문제에 대한 :)setinterval 및 settiomeout을 사용할 때 pong paddles

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Pong</title> 
 
    <script type="text/javascript"> 
 

 
     function canvas() { 
 
      var can = document.getElementById('theCanvas'); 
 
      can.style.backgroundColor = "black"; 
 
      var ctx = can.getContext('2d'); 
 
      var keys = []; 
 
      
 
     var ball = {  
 
      x: (can.width-10)/2, 
 
      y: (can.width-10)/2, 
 
      dx: 8, 
 
      dy: 8 
 
      } 
 
     
 
     var playerOne = { 
 
      x: can.width-50, 
 
      y: (can.width-50)/2, 
 
      H: 100, 
 
      W: 20, 
 
      hitDir: 0 
 
     } 
 
     
 
     var playerTwo = { 
 
      x: 50, 
 
      y: (can.width-50)/2, 
 
      H: 100, 
 
      W: 20, 
 
      hitDir: 0 
 
     } 
 
      ctx.fillStyle ="white"; 
 
      ctx.fillRect(playerOne.x,playerOne.y,playerOne.W,playerOne.H); 
 
      ctx.fillRect(playerTwo.x,playerTwo.y,playerTwo.W,playerTwo.H); 
 
      
 
      function draw() 
 
      { 
 
      ctx.clearRect(0,0, 800,800); 
 
      ctx.beginPath(); 
 
      ctx.fillStyle="#0000ff"; 
 
      ctx.arc(ball.x,ball.y,10,0,Math.PI*2,true); 
 
      ctx.closePath(); 
 
      ctx.fill(); 
 
      if(ball.x<10 || ball.x>790) 
 
      { 
 
      ball.dx=-ball.dx 
 
      } 
 
      
 
      if(ball.y<10 || ball.y>790) { 
 
       ball.dy=-ball.dy 
 
      } 
 
      ball.x+=ball.dx; 
 
      ball.y+=ball.dy; 
 
      
 
      ctx.fillStyle ="white"; 
 
      ctx.fillRect(playerOne.x,playerOne.y,playerOne.W,playerOne.H); 
 
      ctx.fillRect(playerTwo.x,playerTwo.y,playerTwo.W,playerTwo.H); 
 
      
 
      } 
 
      setInterval(draw,10); 
 

 
      function move() { 
 
       ctx.clearRect(0,0,800,800); 
 
       if (keys[38]) { 
 
       playerTwo.y-=10; 
 
      } 
 

 
       if (keys[40]) { 
 
       playerTwo.y+=10; 
 
      
 
      } 
 
      ctx.fillStyle ="white"; 
 
      ctx.fillRect(playerOne.x,playerOne.y,playerOne.W,playerOne.H); 
 
      ctx.fillRect(playerTwo.x,playerTwo.y,playerTwo.W,playerTwo.H); 
 
      ctx.clearRect(0,0, 800,800); 
 
      ctx.beginPath(); 
 
      ctx.fillStyle="#0000ff"; 
 
      ctx.arc(ball.x,ball.y,10,0,Math.PI*2,true); 
 
      ctx.closePath(); 
 
      ctx.fill(); 
 
      setTimeout(move, 1000/60); 
 
      } 
 
      move(); 
 
      document.body.addEventListener("keydown", function (e) { 
 
      keys[e.keyCode] = true; 
 
      }); 
 
      document.body.addEventListener("keyup", function (e) { 
 
      keys[e.keyCode] = false; 
 
      }); 
 
      
 
      } 
 
       
 
    </script> 
 
</head> 
 
<body onload="canvas()"> 
 
    <canvas id="theCanvas" width="800" height="800"></canvas> 
 
</body> 
 
</html>

출처

2016-07-03 Nimrod Naim

감사를 도와주세요 있습니다.

두 개의 setInterval/setTimeout을 단일 렌더링 함수로 결합하면됩니다. 이것은 브라우저가 다음 프레임을 칠할 준비가되었을 때 호출되는 단일 window.requestAnimationFrame 함수에 의해 사용됩니다. 이것은 setTimeout 또는 setInterval보다 우수합니다. 브라우저가 아직 프레임을 렌더링 할 준비가되지 않았을 때 캔버스가 프레임을 페인트하려고하는 것처럼 "똑딱 거리는"이유 일 수 있습니다.

는 또한

1) Set up the canvas and event listeners 
2) Declare the render function 
    2a) Change the position data of the ball & paddles 
    2b) Render the ball & paddles based on its data 
    2c) request another animation frame 
3) request an animation frame with the render function

Here is my jsfiddle

출처

2016-07-04 00:00:25 derp

대답 해 주셔서 감사합니다 다음 의사 코드로 게임을 리팩토링했습니다! –

setinterval 및 settiomeout을 사용할 때 pong paddles

답변

관련 문제