如何在for循环中获得一个单独的数组？

Question

我有一个简单的比赛但是当红球在运动中击中蓝色球时SPLICING desen't工作我从运动脚本得到错误。我认为这个问题的最佳解决方案是当只有红球击中蓝球时注册一个碰撞。能有人帮我这个吗？

要获得演示clik链接DEMO按R重新启动

代码：

var canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
var tileldig = Math.floor((Math.random() * 300) + 1);
var tekst = document.getElementById("tekst")
var log = document.getElementById("log")
var highlog = document.getElementById("highlog")

var kuler = [{
  r: 10,
  x: canvas.width / 2,
  y: canvas.height - 100,
  f: "red",
  dy: 0
}, ];

var fiender = [{
  r: 20,
  x: tileldig,
  y: -20,
  vx: 0,
  vy: 1,
}, ];

//var snd = new Audio("Skudd.m4a");

var poeng = 0;
var highscore = 0;
var høyre = 0;
var venstre = 0;
var opp = 0;
var ned = 0;
var restart = 0;
var død = 0;


document.onkeydown = function tast(e) {
  if (e.keyCode == 39) { // høyre
    høyre = 1;
  }
  if (e.keyCode == 37) { // venstre
    venstre = 1;
  }
  if (e.keyCode == 38) { // opp 
    opp = 1;
  }
  if (e.keyCode == 40) { // ned
    ned = 1;
  }
  if (e.keyCode == 32) {
    newskudd();
    // snd.play();
    console.log("hit space")
  }

  if (e.keyCode == 82) {
    init();
    log.innerHTML += ("Poeng: " + poeng)
    poeng = 0;
  }
}
document.onkeyup = function tast2(e) {
  if (e.keyCode == 39) { // høyre
    høyre = 0;
  }
  if (e.keyCode == 37) { // venstre
    venstre = 0;
  }
  if (e.keyCode == 38) { // opp 
    opp = 0;
  }
  if (e.keyCode == 40) { // ned
    ned = 0;
  }
}

function spill() {

  ctx.clearRect(0, 0, canvas.width, canvas.height);

  for (var i = 0; i < kuler.length; i++) {
    kuler[i].x += 0;
    kuler[i].y += kuler[i].dy;


    ctx.fillStyle = kuler[i].f;
    ctx.beginPath();
    ctx.arc(kuler[i].x, kuler[i].y, kuler[i].r, 2 * Math.PI, 0);
    ctx.closePath();
    ctx.fill();

    if (kuler[0].x >= canvas.width - kuler[0].r) {
      kuler[0].x = canvas.width - kuler[0].r
    };
    if (kuler[0].x <= 0 + kuler[0].r) {
      kuler[0].x = 0 + kuler[0].r
    };
    if (kuler[0].y >= canvas.height - kuler[0].r) {
      kuler[0].y = canvas.height - kuler[0].r
    };
    if (kuler[0].y <= 0 + kuler[0].r) {
      kuler[0].y = 0 + kuler[0].r
    };

    for (var j = 0; j < fiender.length; j++) {
      ctx.fillStyle = "blue";
      ctx.beginPath();
      ctx.arc(fiender[j].x, fiender[j].y, fiender[j].r, 2 * Math.PI, 0);
      ctx.closePath();
      ctx.fill();


      if (fiender[j].x >= canvas.width - fiender[j].r) {
        fiender[j].x = canvas.width - fiender[j].r;
      };
      if (fiender[j].x <= 0 + fiender[j].r) {
        fiender[j].x = 0 + fiender[j].r;
      };
      if (fiender[j].vy >= 2) {
        fiender[j].vy = 2;
      };

      var distanceFromCenters = Math.sqrt(Math.pow(Math.abs(fiender[j].x - kuler[i].x), 2) + Math.pow(Math.abs(fiender[j].y - kuler[i].y), 2)); // you have a collision
      if (distanceFromCenters <= (fiender[j].r + kuler[i].r)) {
        fiender.splice(j, 1);
        kuler.splice(i, 1);
        poeng += 1;
        restart = 1;        
      } else if (fiender[j].y > canvas.height) {
        fiender.splice(j, 1)
      } 

      if (j > 1) {
        fiender.splice(j, 1)
      }

      log.innerHTML = ("<br>" + "Score denne runden: " + poeng + "</br>" + "<br>" + "Highscore: " + highscore + "</br>")
      if (poeng >= highscore) {
        log.innerHTML += ("<br>" + "Ny Highscore: " + highscore + "</br>")
        highscore = poeng;
      }
    }
  }

  for (var j = 0; j < fiender.length; j++) {
    fiender[j].y += fiender[j].vy;
  }

  if (venstre == 1) {
    kuler[0].x -= 4;
  }
  if (høyre == 1) {
    kuler[0].x += 4;;
  }
  if (opp == 1) {
    kuler[0].y -= 4;
  }
  if (ned == 1) {
    kuler[0].y += 4;
  }

  requestAnimationFrame(spill);
  return;
}


document.onload = spill();

function newskudd() {
  var nyttskudd = {
    x: kuler[0].x,
    y: kuler[0].y,
    r: 5,
    dy: -5,
    f: "white"
  };
  kuler.push(nyttskudd);
};

setInterval(function() {
  fiender.push({
    r: 20,
    x: Math.floor((Math.random() * 300) + 1),
    y: -20,
    vx: 0,
    vy: 1,
    f: "green"
  });
}, 1000);

function init() {
  kuler = [{
    r: 10,
    x: canvas.width / 2,
    y: canvas.height - 100,
    f: "red",
    dy: 0
  }, ];

  fiender = [{
    r: 20,
    x: tileldig,
    y: -20,
    vx: 0,
    vy: 1,
  }, ];
}