Home>

### javascript - fire the ball at the angle at which the button is pressed

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 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 ();
dx = -dx;
cntBounce ++;
}
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.

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 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 ();
dx = -dx;
cntBounce ++;
}
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>``````

`dx`When,`dy`And`x`When`y`However, 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
The angle variable is set before the button is pressed.`setInterval`It seems that an implementation that keeps updating with is necessary.
(Movement coordinates at that angle,`dx`When`dy`To reassign to)