eminate 2022-11-08 13:51 采纳率: 100%
浏览 33
已结题

js编写弹球弹珠问题

这个代码不能产生预期效果,请问出现了什么问题,谢谢!!:

img

<!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();
  • 写回答

2条回答 默认 最新

  • 崽崽的谷雨 2022-11-08 14:13
    关注

    balls[i].update();
    loop 里写错 了 写成updata了

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 11月16日
  • 已采纳回答 11月8日
  • 创建了问题 11月8日

悬赏问题

  • ¥15 2020长安杯与连接网探
  • ¥15 关于#matlab#的问题:在模糊控制器中选出线路信息,在simulink中根据线路信息生成速度时间目标曲线(初速度为20m/s,15秒后减为0的速度时间图像)我想问线路信息是什么
  • ¥15 banner广告展示设置多少时间不怎么会消耗用户价值
  • ¥16 mybatis的代理对象无法通过@Autowired装填
  • ¥15 可见光定位matlab仿真
  • ¥15 arduino 四自由度机械臂
  • ¥15 wordpress 产品图片 GIF 没法显示
  • ¥15 求三国群英传pl国战时间的修改方法
  • ¥15 matlab代码代写,需写出详细代码,代价私
  • ¥15 ROS系统搭建请教(跨境电商用途)