Question

我已经编码了一个要在画布上弹跳的球，但是，该球仅从中心弹跳，而不是从边缘弹跳。

我已经尝试过将半径而不是x和y放置了，但这一点都没有帮助，因为现在我已经没有想法了。

我希望球从自身边缘而不是中心反弹

<!DOCTYPE>
<html>

<head>
<title>Ball Bounce</title>

<style>


canvas {
border-width: 5px;
border-style: ridge;
border-color: #FF0000;
}

</style>

</head>


<body>

<canvas id="testCanvas" width="700" height="400"></canvas>

<script>

var canvas = document.getElementById("testCanvas");
var ctx = canvas.getContext("2d");


var x = 300;
var y = 300;
var radius = 50;
var circleColour = "green";

var canvasWidth = canvas.width; 
var canvasHeight = canvas.height;
var dx = 2;
var dy = -2;




function circle(x, y, r, c) {
ctx.beginPath();
ctx.arc(x, y, r, 0, 2 * Math.PI, false);
ctx.fillStyle = c;
ctx.fill()
ctx.closePath();
}

function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
circle(x, y, radius, circleColour)
if (y<0 || y > canvasHeight){
dy = -dy;
}

if (x>canvasWidth || x<0){
dx = -dx;
}



 x = x + dx;
 y = y + dy;
}

setInterval(draw, 5.5);

</script>



</body>

</html>

Answer 1

我已经尝试过使用半径而不是x和y，但这根本没有帮助...

您需要将半径与x和y（或画布边缘）结合起来，以确保球在所有四个边界处都改变方向。

if (y - radius < 0 || y + radius > canvasHeight) {
    dy = -dy;
}

if (x + radius > canvasWidth || x - radius < 0) {
    dx = -dx;
}

球从中心弹跳而不是边缘弹跳

1 个答案: