Удаление элемента при условии ООП js

function getRandomInt(min, max) { 
  var rand = min - 0.5 + Math.random() * (max - min + 1) 
  rand = Math.round(rand); 
  return rand; 
} 
 
 
var userRadius = 80; 
var RADIUSRESTRICTION = 70; 
var radius; 
var canvas, ctx, balls, idTimer; 
var stopUpdating = false; 
TBall = new Class({ 
  initialize: function(pX, pY) { 
    this.posX = pX; //позиция шарика по X 
    this.posY = pY; //позиция шарика по Y 
    //цвет шарика, формируется случайным образом 
    this.colBall = 'rgb(' + Math.floor(Math.random() * 256) + ',' + 
      Math.floor(Math.random() * 256) + ',' + Math.floor(Math.random() * 256) + ')'; 
    // радиус шарика, случайное число от 5  
    this.rBall = 5 + Math.random() * userRadius; 
    // radius = this.rBall; //неясно зачем это тут 
    console.log(this.rBall); 
    // Если шар не соответсвует нужному радиусу - помечаем его как неверный 
    // (хотя по правильному было бы вернуть null вместо объекта) 
    if (this.rBall >= RADIUSRESTRICTION) { 
      this.isCorrect = false; 
    } 
  }, 
  posX: 0, 
  posY: 0, 
  // переменная которая следит за "правильностью" шара. 
  isCorrect: true, 
  colBall: "rgb(0,0,0)", 
  rBall: 0, 
  colorBall: function(ctx) { 
    // формируем градиентную заливку для шарика 
    with(this) { 
      var gradient = ctx.createRadialGradient(posX + rBall / 4, 
        posY - rBall / 6, rBall / 8, posX, posY, rBall); 
      gradient.addColorStop(0, '#fff'); 
      gradient.addColorStop(0.85, colBall); 
      return gradient; 
    } 
  }, 
  draw: function() { 
    // рисуем шарик на canvas если он корректный 
    with(this) { 
      ctx.fillStyle = colorBall(ctx); 
      ctx.beginPath(); 
      ctx.arc(posX, posY, rBall, 0, 2 * Math.PI, false); 
      ctx.closePath(); 
      ctx.fill(); 
    } 
  } 
}); 
 
function drawBack(ctx, col1, col2, w, h) { 
  // закрашиваем канвас градиентным фоном 
  ctx.save(); 
  var g = ctx.createLinearGradient(0, 0, 0, h); 
  g.addColorStop(1, col1); 
  g.addColorStop(0, col2); 
  ctx.fillStyle = g; 
  ctx.fillRect(0, 0, w, h); 
  ctx.restore(); 
} 
// инициализация работы 
function init() { 
  balls = []; 
  canvas = document.getElementById('canvas'); 
  //создаем 10 шариков, заноси их в массив  
  for (var i = 1; i <= 10; i++) { 
    var item = new TBall(10 + Math.random() * (canvas.width - 30), 
      10 + Math.random() * (canvas.height - 30)); 
    // тут мы увеличиваем счетчик если шар нам не "подошел"  
    // по радиусу, чтобы всегда рисовалость 10 шаров. 
    balls.push(item); 
  } 
  updateScene(canvas); 
  // Ставим бесконечный таймер ( с условием выхода) каждые 2 секунды он обновляет состояние (для тестирования поведения - можно поставить и меньше) 
  var timerId = setInterval(function() { 
    updateScene(canvas) 
    if (stopUpdating) { 
      clearInterval(timerId); 
    } 
  }, 2000); 
} 
 
function updateScene(canvas) { 
  if (canvas.getContext) { 
    ctx = canvas.getContext('2d'); 
    // Store the current transformation matrix 
    ctx.save(); 
 
    // Use the identity matrix while clearing the canvas 
    ctx.setTransform(1, 0, 0, 1, 0, 0); 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
 
    // Restore the transform 
    ctx.restore(); 
    //рисуем фон 
    drawBack(ctx, '#202020', '#aaa', canvas.width, canvas.height); 
 
 
    for (var i = 0; i < balls.length; i++) { 
      balls[i].draw(); 
    } 
    balls = balls.filter((item) => item.isCorrect); 
    console.log(balls.length); 
  } 
} 
 
// создаем новый шарик по щелчку мыши, добавляем его в массив шариков и рисуем его 
function goInput(event) { 
  var x = event.clientX; 
  var y = event.clientY; 
  var item = new TBall(x, y); 
  balls.push(item); 
  item.draw(); // на самом деле это неправильно, но добавлено для наглядности 
} 
 
var number; 
 
function move(userNumber) { 
  number = parseInt(userNumber); 
  console.log(number); 
  idTimer = setInterval('moveBall();', 50); 
} 
 
function moveBall() { 
 
  //Переменные, которые помогают менять направление 
  var a, b, c, d; 
 
  //реализация движения шариков, находящихся в массиве balls 
  drawBack(ctx, '#202020', '#aaa', canvas.width, canvas.height); 
  var rand1 = Math.random() * 4 - 2; 
  var rand2 = Math.random() * 2 - 4; 
 
  if (number == 4) { 
    number = getRandomInt(0, 3); 
  } 
 
  switch (number) { 
 
    case 0: //up 
      a = rand1; 
      d = a; 
      b = rand2; 
      c = b; 
      break; 
 
    case 1: //down 
      a = -rand1; 
      d = a; 
      b = -rand2; 
      c = b; 
      break; 
 
    case 2: //right 
      a = -rand2; 
      d = a; 
      b = rand1; 
      c = b; 
      break; 
 
    case 3: //left 
      a = rand2; 
      d = a; 
      b = rand1; 
      c = b; 
      break; 
 
    case 5: 
      b = rand1; 
      a = rand2; 
      d = -a; 
      c = -b; 
  } 
 
  for (var i = 0; i < balls.length; i) { 
    balls[i].posX = balls[i].posX + a || d; 
    balls[i].posY = balls[i].posY + b || c; 
    balls[i].draw(ctx); 
    if ((balls[i].posX > canvas.width) || (balls[i].posX < 0) || (balls[i].posY < 0)) 
      balls.splice(i, 1); 
    else 
      i++; 
  } 
 
 
}

<html> 
 
<head> 
  <title>Canvas & Mootools</title> 
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mootools/1.6.0/mootools-core.js"></script> 
  <style type="text/css"> 
    canvas { 
      border: 1px solid blue; 
    } 
  </style> 
</head> 
 
<body onload="init();"> 
  <canvas id="canvas" width="600" height="400" onclick="goInput(event);"> 
    	</canvas> 
  <form> 
    <input type="button" value="Up" onclick="move(0);"> 
    <input type="button" value="Down" onclick="move(1);"> 
    <input type="button" value="Right" onclick="move(2);"> 
    <input type="button" value="Left" onclick="move(3);"> 
    <input type="button" value="Random" onclick="move(4);"> 
    <input type="button" value="Chaos" onclick="move(5);"> 
    <input type="button" value="Стоп" onclick="clearInterval(idTimer);"> 
  </form> 
</body> 
 
</html>