Home>

I want to achieve
The ball is fired at the angle at which the button is pressed in the range of 0 ° to 180 °.

conditions

  • The angle increases by 1 ° from 0 ° to 180 °, and when it reaches 180 °, the angle decreases by 1 ° to 0 ° (repeatedly).
  • Same speed at any angle

Current code

let canvas = document.getElementById ("myCanvas");
let ctx = canvas.getContext ("2d");
let ballRadius = 15;
let x = canvas.width/2;
let y = canvas.height --15;
let dx = 2;
let dy = -2;
let cntBounce = 0;
function drawBall () {
  ctx.beginPath ();
  ctx.arc (x, y, ballRadius, 0, Math.PI * 2);
  ctx.fillStyle = "# 0095DD";
  ctx.fill ();
  ctx.closePath ();
}
function draw () {
  ctx.clearRect (0, 0, canvas.width, canvas.height);
  drawBall ();
  if (x + dx>canvas.width --ballRadius || x + dx<ballRadius) {
    dx = -dx;
    cntBounce ++;
  }
  if (y + dy>canvas.height --ballRadius || y + dy<ballRadius) {
    dy = -dy;
    cntBounce ++;
  }
  x + = dx;
  y + = dy;
  if (cntBounce>= 2) {
    dx = 0;
    dy = 0;
  }
}
draw ();
document.getElementById ("button"). onclick = function () {
  setInterval (draw, 10);
};


↓ Result

* The red arrow is painted on the image.

Currently, when you press the "button"

let dx = 2;
let dy = -2;


I will fly in the direction of.

The red arrow cannot be implemented in the above code, but as an image, I want to move the red arrow in a circle in the range of 0 ° to 180 ° and shoot the ball in the direction of the arrow when the button is pressed. We believe.
* This time, you don't have to consider the implementation of the arrow.

We apologize for the inconvenience, but we would appreciate it if you could teach us.

  • Answer # 1

    I think there is too much to learn at once.
    I don't think you can understand the contents of the function immediately, but just grasp the whole flow.
    Normally, do not use global variables as much as possible.

    <! DOCTYPE html>
    <meta charset = "UTF-8">
    <title></title>
    <style>
    canvas {border: 1px red solid;display: block;}
    </style>
    <body>
    <canvas width = "768" height = "512" id = "myCanvas"></canvas>
    <input id = "K">
    <input type = "button" value = "test" onclick = "fire ()">
    <script>
    let canvas = myCanvas;
    let ctx = canvas.getContext ("2d");
    let ballRadius = 15;
    let x, y, dx, dy, cntBounce, f;
    let k = 0;
    const {PI, sin, cos, abs} = Math, D = PI/180;
    function drawBall () {
      ctx.beginPath ();
      ctx.arc (x, y, ballRadius, 0, Math.PI * 2);
      ctx.fillStyle = "# 0095DD";
      ctx.fill ();
      ctx.closePath ();
      if (x + dx>canvas.width --ballRadius || x + dx<ballRadius) {
        dx = -dx;
        cntBounce ++;
      }
      if (y + dy>canvas.height --ballRadius || y + dy<ballRadius) {
        dy = -dy;
        cntBounce ++;
      }
      x + = dx;
      y + = dy;
      if (1<cntBounce) ballReset ();
    }
    function dispK () {
      K.value = ((++ k/180 | 0)&1? K% 180: 180-k% 180) +'°';
    }
    function fire () {
      f ++ || (dx = cos (k * D) * 2, dy = -abs (sin (k * D)) * 2);
    }
    function ballReset () {
      x = canvas.width/2;
      y = canvas.height --15;
      dx = dy = f = cntBounce = 0;
    };
    ballReset ();
    ! function draw () {
      ctx.clearRect (0, 0, canvas.width, canvas.height);
      drawBall ();
      dispK ();
      requestAnimationFrame (draw);
    } ();
    </script>

  • Answer # 2

    dxWhen,dyAndxWhenyHowever, it has not been updated until the button is pressed.

    Current status,draw ()Since the coordinates to go to are not updated until you execute
    buttonOnly when you press will the drawing be updated.
    So, have the angle to go to the outer variable,
    The angle variable is set before the button is pressed.setIntervalIt seems that an implementation that keeps updating with is necessary.
    (Movement coordinates at that angle,dxWhendyTo reassign to)

Related articles