这个代码不能产生预期效果,请问出现了什么问题,谢谢!!:
<!DOCTYPE html>
<html lang="en">
<head>
<title>弹球游戏</title>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<link rel="stylesheet" type="text/css" href="../css/弹球游戏.css"/>
</head>
<body>
<h1>弹球游戏</h1>
<canvas></canvas>
<script type="text/javascript" src="../js/弹球游戏.js">
</script>
</body>
</html>
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const width = canvas.width = window.innerWidth;
const height = canvas.height = window.innerHeight;
function random(min,max) {
const num = Math.floor(Math.random()*(max-min))+min;
return num;
}
function randomColor() {
const color = "rgb("+ random(0,255) + "," + random(0,255) + "," + random(0,255)+ ")";
return color;
}
class Ball {
constructor(x,y,Vx,Vy,color,size) {
this.x = x;
this.y = y;
this.Vx = Vx;
this.Vy = Vy;
this.color = color;
this.size = size;
}
draw() {
ctx.beginPath();
ctx.fillStyle = this.color;
ctx.arc(this.x,this.y,this.size,0,2*Math.PI);
ctx.fill();
}
update() {
if ((this.x + this.size) >= width) {
this.velX = -(this.velX);
}
if ((this.x - this.size) <= 0) {
this.velX = -(this.velX);
}
if ((this.y + this.size) >= height) {
this.velY = -(this.velY);
}
if ((this.y - this.size) <= 0) {
this.velY = -(this.velY);
}
this.x += this.velX;
this.y += this.velY;
}
collisionDetect() {
for(let j = 0; j < balls.length; j++) {
if(this !== balls[j]) {
const dx = this.x - balls[j].x;
const dy = this.y - balls[j].y;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance < this.size + balls[j].size) {
balls[j].color = this.color = randomColor();
}
}
}
}
}
let balls = new Array;
while(balls.length<25) {
const size = random(10,20);
let ball = new Ball(
random(0 + size, width - size),
random(0 + size, height - size),
random(-7, 7),
random(-7, 7),
randomColor(),
size
);
balls.push(ball);
};
function loop() {
ctx.fillStyle = 'rgba(0,0,0,0.25)';
ctx.fillRect(0,0,width,height);
for(let i = 0; i < balls.length; i++) {
balls[i].draw();
balls[i].updata();
balls[i].collisionDetect();
}
requestAnimationFrame(loop);
}
loop();