个人中心
gpt4 book ai didi

javascript - JavaScript 中的碰撞

转载 作者：行者123 更新时间：2023-11-30 11:16:15 24 4
gpt4 key购买 nike

在我的代码中，我正在检测一个盒子和球之间的碰撞，但是一旦第一次碰撞发生，控制台就会显示以下错误:

"message": "Uncaught TypeError: Cannot read property 'x' of undefined"

我的代码有什么错误？显示的错误是什么意思？

// Creating code for multiple balls as well as record the movement of the player

var canvas, cxt, h, w, n = 10,
    i, mousePos;
var ball = []; // Empty array
var p = {
  x: 0,
  y: 0,
  length: 30,
  breath: 30,
  color: 'black'
}

function init() {
  canvas = document.querySelector('#style');
  cxt = canvas.getContext('2d');
  h = canvas.height;
  w = canvas.width;
  ballType(n);
  // Add a mousemove event listener to the canvas
  canvas.addEventListener('mousemove', mouseMoved);
  main();
}

function mouseMoved(evt) {
  mousePos = getMousePos(canvas, evt);
}

function getMousePos(canvas, evt) {
  // Necessary work in the canvas coordinate system
  var rect = canvas.getBoundingClientRect();
  return {
    x: evt.clientX - rect.left,
    y: evt.clientY - rect.top
  };
}

function movePlayerWithMouse() {
  if (mousePos !== undefined) {
    p.x = mousePos.x;
    p.y = mousePos.y;
  }
}

function ballType(n) {
  var cl = ['red', 'green', 'blue', 'yellow', 'purple', 'orange', 'pink', 'cyan', 'grey', 'pink'];
  for (i = 0; i < n; i++) {
    var e = Math.floor(10 * Math.random());
    f = {
      x: 100,
      y: 100,
      radius: 5 + (30 * Math.random()), // Radius will be between 5 and 35
      a: -5 + (10 * Math.random()), // Value of a will be between -5 and 5
      b: -5 + (10 * Math.random()), //value of b will be between -5 and 5
      color: cl[e]
    }
    ball.push(f);
  }
}

function main() {
  cxt.clearRect(0, 0, w, h);
  player(p);
  for (i = 0; i < n; i++) {
    draw(ball[i]);
  }
  var l = 0
  for (i = 0; i < n; i++) {
    move(ball[i], l);
    l++;
  }
  movePlayerWithMouse();
  count();
  requestAnimationFrame(main);
}

function draw(d) {
  cxt.save();
  cxt.translate(0, 0);
  cxt.fillStyle = d.color;
  cxt.beginPath();
  cxt.arc(d.x, d.y, d.radius, 0, 2 * Math.PI);
  cxt.fill();
  cxt.restore();
}

function move(m, index) {
  m.x += m.a;
  m.y += m.b;
  check(m);
  testCollision(m, index);
}

function check(m) {
  if ((m.x + m.radius) > w) { // Collision with the right wall
    m.a = -m.a;
    m.x = w - m.radius;
  } else if ((m.x - m.radius) < 0) { // Collision with the left wall
    m.a = -m.a;
    m.x = m.radius;
  }
  if ((m.y + m.radius) > h) { // Collision with the top wall
    m.b = -m.b;
    m.y = h - m.radius;
  } else if ((m.y - m.radius) < 0) { // Collision with the bottom surface
    m.b = -m.b;
    m.y = m.radius;
  }
}

function player(p) {
  cxt.save();
  cxt.translate(0, 0);
  cxt.fillStyle = p.color;
  cxt.fillRect(p.x, p.y, p.length, p.breath);
  cxt.restore();
}

// For testing the collision

function test(rx, ry, rw, rh, cx, cy, cr) {
  var x0 = cx;
  var y0 = cy;
  if (x0 < rx) {
    x0 = rx;
  }
  if (x0 > (rx + rw)) {
    x0 = rx + rw;
  }
  if (y0 < ry) {
    y0 = ry;
  }
  if (y0 > (ry + rh)) {
    y0 = ry + rh;
  }
  return (((cx - x0) * (cx - x0) + (cy - y0) * (cy - y0)) < (cr * cr));
}

function testCollision(v, index) {
  if (test(p.x, p.y, p.breath, p.length, v.x, v.y, v.radius)) {
    ball.splice(index, 1); // Splice starts deleting the elements of array from the index given in the first parameter
    // and the second parameter accepts the number of array elements to be deleted
  }
}

function count() {
  cxt.save();
  if (ball.length == 0) {
    cxt.fillText("You win", 20, 20);
  } else {
    cxt.fillText(ball.length, 20, 20);
  }
  cxt.restore();
}
#style {
  border: 2px dotted black;
}
<body onload='init();'>
  <div>
    <canvas id='style' height='400' width='400'>
      Your browser does not support canvas...
    </canvas>
  </div>
</body>

最佳答案

当您从 array 中删除对象时，您的代码中存在错误，但没有减少 n，因此只需更新以下内容:

function testCollision(v, index) {
  if (test(p.x, p.y, p.breath, p.length, v.x, v.y, v.radius)) {
    ball.splice(index, 1);
    n--;
    // Splice starts deleting the elements of array from the index given in the first parameter
    // and the second parameter accepts the no. of array elements to be deleted
  }
}

关于javascript - JavaScript 中的碰撞，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51419155/

24 4 0
文章推荐： javascript - 通过鼠标悬停突出显示具有重复名称的圆圈
文章推荐： java - 设置 JFrame 的不透明度时使用 float 和 BigDecimal 缺乏精度
文章推荐： java - ListCellRenderer 和区分下拉列表中的显示和内联显示
文章推荐： swift - 横幅广告仅在应用程序第一次启动时显示
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com