Question

我仍然习惯于对象，但是无论我做什么，我都无法使对象反转它们的x或y。甚至没有记录他们中的任何人撞上了画布墙，他们只是离开了屏幕。这是我的代码：

"use strict";
	//variables
	var canvas = document.getElementById("myCanvas");
	var ctx = canvas.getContext("2d");
	var randomX = 0; //in for loop use Math.random()
	var randomY = 0; //in for loop use Math.random()
	var ballRadius = 10;
	var ballX = canvas.width/2;
	var ballY = canvas.height-30;
	var ballMove = [];
	var ballObject = [];

    //declares the objects x and y's
	for(var i = 0; i < 10; i++){
		ballObject[i] = { x: 0, y: 0 };
		ballMove[i] = { x:1, y:-1 };
		randomX = (Math.random() * (canvas.width-ballRadius)) +1;
		randomY = (Math.random() * (canvas.height-ballRadius)) +1;
		ballObject[i].x = randomX;
		ballObject[i].y = randomY;
	}


	function draw()
	{
		ctx.clearRect(0,0,canvas.width, canvas.height);
        //didn't actually need this for loop but was experimenting
		for(var i = 0; i<10; i++){
			drawBall(i);
		}
			moveBall();
        //this method should check the x and y of the balls.
			bounceBall();
	}
    // basic ball drawing function
	function drawBall(i)
	{
		ctx.beginPath();
		ctx.arc(ballObject[i].x, ballObject[i].y, ballRadius, 0, Math.PI*2);
		ctx.fillStyle = "blue";
		ctx.fill();
		ctx.closePath();
	}
    //extremely basic move function (just adds to x and y)
	function moveBall()
	{
		for(var i = 0; i < 10; i++){
		ballObject[i].x += ballMove[i].x;
		ballObject[i].y += ballMove[i].y;
		}
			
	}
    //WHY IT NO WORK 
    //for whatever reason this function doesn't reverse the x and y
	function bounceBall()
	{
		for(var i = 0; i < 10; i++)
		{
			if (ballObject[i].x == canvas.width-ballRadius || ballObject[i].x == 0+ballRadius){
				alert("i've hit a wall");
				ballMove[i].x = -ballMove[i].x;
			}
			if (ballObject[i].y == canvas.height-ballRadius || ballObject[i].y == 0+ballRadius){
				alert("i've hit a wall");
				ballMove[i].y = -ballMove[i].y;
			}
		}
	}

	setInterval(draw, 10);

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Gamedev Canvas Workshop</title>
    <style>
    	* { padding: 0; margin: 15; }
    	canvas { background: #eee; display: block; margin: 0 auto; }
    </style>
</head>
<body>

<canvas id="myCanvas" width="480" height="320"></canvas>

  <script src="ballPop.js">

  </script>

</body>
</html>

我有点弄乱了我的代码，试图使用对象并使它们反弹。在网上进行了一些练习之后，我制作了一个破砖游戏，弹跳效果很好-但是，相同的概念似乎不适用于物体。

Answer 1

这可能与您的球坐标是浮点值有关。例如：

> (Math.random() * (200 - 3)) + 1
179.1025927176495

在bounceBall中进行检查时，通过检查球是否会超出边界可能会得到更好的结果

function bounceBall()
{
    for(var i = 0; i < 10; i++)
    {
        if (ballObject[i].x >= canvas.width-ballRadius || ballObject[i].x <= 0+ballRadius) {
            alert("i've hit a wall");
            ballMove[i].x = -ballMove[i].x;
        }
        if (ballObject[i].y >= canvas.height-ballRadius || ballObject[i].y <= 0+ballRadius){
            alert("i've hit a wall");
            ballMove[i].y = -ballMove[i].y;
        }
    }
}

注意： ==更改为> =和<=

我无法使多个2d对象从画布x和y反弹

1 个答案: