Javascript中的冲突

Question

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

  

“消息”：“未捕获的TypeError：无法读取未定义的属性'x'”

我不明白我的代码中的错误是什么或显示的错误的含义是什么。拜托，有人可以帮我吗？

{
  "statistic-[...]": {
    "mappings": {
      "statistic": {
        "properties": {

// creating a 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 no. 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;
}

Answer 1

从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
  }
}