Question

我对编码很陌生，到目前为止，我设法创建的程序是我被要求做的一半。任务是：在画布周围放置一个弹跳球，并在画布中心添加第二个固定球。让弹跳球反弹。

我的代码是：

<html>
	<head>
		<title>Javascript Game</title>
	</head>
	<body>
		
		
		<canvas 
			style="border:1px solid #000000;" 
			id = "mycanvas" 
			width = "500" 
			height = "500">
			
			Your browser does not support canvas
		</canvas>

		<script>
		
		window.addEventListener("load", myApp, false);


		function myApp() {
			var canvas;
			var context;
			var textToShow;
		
			function getCanvas() {
				var tmp;
				
				tmp = document.getElementById ("mycanvas");
				
				if (tmp == null) {
					alert ("no canvas");
				}
				
				return tmp;
					
			}

			function animateMe() {
			
				context.clearRect (0, 0, canvas.width, canvas.height);
				context.beginPath();
				context.arc(x,y,radius,0,2*Math.PI);
				context.stroke();
	
				x = x + xdir;
				//xdir = xdir +0.1;
				if (x + xdir == x2 -10){
				xdir *= -1;
				}else if (x + xdir>495) {
				xdir *=-1;
				}
				
				if (x+xdir <0){
				xdir *= -1;
				}
							
				y = y + ydir;
				if (y+ydir == y2- 10) {
				ydir += -1;
				}
				else if(y+ydir>=480){
				ydir *= -1;
				}
			
				if (y + ydir <0){
				ydir *= -1;
				}
				
				context.beginPath();
				context.arc(x2,y2,radius,0,2*Math.PI);
				context.stroke();

				requestAnimationFrame (animateMe);
			}

			canvas = getCanvas();	
			context = canvas.getContext ("2d");
			
			init();
			
			function init() {
				x= 20;
				y=20;
				x2=250;
				y2=250;
				xdir= 5;
				ydir = 5;
				radius=10;
							
				animateMe();
			}			

		}
				
		</script>
		
	</body>
		
</html>

事情是球从屏幕的一半反弹，我不知道如何让它通过那个点，但同时从另一个球反弹。

Answer 1

 myApp();


function myApp() {
  // No need for an init call at the moment.
  // init all stuff at start of this function
  var textToShow;
  const ctx = canvas.getContext("2d");
  const w = canvas.width;
  const h = canvas.height;
  const  w2 = w / 2;
  const  h2 = h / 2;
  const  radius = 10;
  var  x = 20;
  var  y = 40;
  var  xdir = 5;
  var  ydir = 5;


       
  // use this to start rather than direct call.
  requestAnimationFrame(animateMe);


  function animateMe() {
    ctx.clearRect(0, 0, w, h);
    
    // the best way to do the calulations is first move then draw
 
 

    x += xdir;
    y += ydir;

    const right = w - radius;
    const bottom = h - radius;
    
    // Test if the ball has gone to far and correct position and dir
    // As each frame is a descrete time step you need to acount for
    // the balls motion during the frame.
    
    // If the ball is past the edge then some time between the last 
    // this frame it hit the wall and started moving away from the wall
    // The distance moved away from the wall is the same as the distance 
    // we found the ball to far into the wall
    
    // If you do xdir *= -1; 
    // you dont know if the ball was  pushed there by something
    // (assuming you will have some form  of interaction) and was
    // unable to escape the wall the previouse frame. This can result in 
    // the ball sticking to the wall.
    // Always set the vector to the correct sign.
    
    
    if (x  > right) {
      x = right - (x - right);
      xdir = -Math.abs(xdir);
    } else if (x < radius) {
      x = radius + (radius - x);
      xdir = Math.abs(xdir);
    }
    if (y  > bottom) {
      y = bottom - (y - bottom);
      ydir = -Math.abs(ydir);
    } else if (y < radius) {
      y = radius + (radius - y);
      ydir = Math.abs(ydir);
    }

    ctx.beginPath();
    ctx.arc(x, y, radius, 0, 2 * Math.PI);
    ctx.stroke();

    ctx.beginPath();
    ctx.arc(w2, w2, radius, 0, 2 * Math.PI);
    ctx.stroke();

    requestAnimationFrame(animateMe);
  }

}

  <canvas style="border:1px solid #000000;" id="canvas" width="250" height="250">It's 2017 anyone that sees this message does not need to be told that nothing works.
		</canvas>

弹跳球从另一个bal弹跳下来

1 个答案: