Fehler beim Lesen 'Eigenschaft' x 'von' undefined 'kann nicht in HTML5 gelesen werden Canvas-Code

Question

Ich habe ein Problem mit meinem JavaScript-Code. Da ich es so gemacht habe, dass Sie Formen aus der Leinwand löschen können, erscheint ein Fehler, wenn ich versuche, der Leinwand zusätzliche Formen hinzuzufügen. Der Fehler lautet: 'Eigenschaft' x 'von undefined kann nicht gelesen werden. Wenn der Fehler auftritt, wird die Zeile 116 des Codes zitiert, die lautet: 'var dx = tmpRingB.x - tmpRing.x;'. Ich muss es so machen, dass dieser Fehler nicht erscheint. Der Code ist wie folgt.

var shapeObj = function (counter, context, canvas, settingsBox) { 
    //Where sound info goes (freq, vol, amp, adsr etc) 
    this.id = "shape"+counter; 
    this.ctx = context; 
    this.canvas = canvas; 
    this.sBox = settingsBox; 

    this.audioProperties = { 
     duration: Math.random()*1-0.1, 
     frequency: Math.random()*44000-220 
    } 

    this.x = Math.random()*this.ctx.canvas.width; 
    this.y = Math.random()*this.ctx.canvas.height; 
    this.radius = 40; 
    this.vx = Math.random()*6-3; 
    this.vy = Math.random()*6-3; 

    this.draw = function() { 
     this.ctx.beginPath(); 
     this.ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, false); 
     this.ctx.closePath(); 
     this.ctx.stroke(); 
    } 

    this.clickTest = function (e) { 
     var canvasOffset = this.canvas.offset(); 
     var canvasX = Math.floor(e.pageX-canvasOffset.left); 
     var canvasY = Math.floor(e.pageY-canvasOffset.top);   
     var dX = this.x-canvasX; 
     var dY = this.y-canvasY; 
     var distance = Math.sqrt((dX*dX)+(dY*dY)); 
     if (distance <= this.radius) { 
      this.manageClick(); 
     } 
    }; 

    this.manageClick = function(){ 
     alert('this is ' + this.id); 
     this.sBox.populate(this.audioProperties, this); 
     this.radius -= 10; 
    } 

    this.update = function(newProps){ 
     // repopulate the shapes with new settings 
    } 
} 

var settingsBox = function(){ 
    this.populate = function(props, obj){ 
     for (a in props){ 
      alert(props[a]);  
     } 
    } 
} 

$(document).ready(function() { 
    var canvas = $('#myCanvas'); 
    var ctx = canvas.get(0).getContext("2d"); 

    var canvasWidth = canvas.width(); 
    var canvasHeight = canvas.height(); 

    $(window).resize(resizeCanvas); 

    function resizeCanvas() { 
     canvas.attr("width", $(window).get(0).innerWidth - 2); 
     canvas.attr("height", $(window).get(0).innerHeight - 124); 
     canvasWidth = canvas.width(); 
     canvasHeight = canvas.height(); 
    }; 

    resizeCanvas(); 

    canvas.onselectstart = function() { return false; } 

    ctx.strokeStyle = "rgb(255, 255, 255)"; 
    ctx.lineWidth = 5; 

    var playAnimation = true; 

    $(canvas).click(function(e) { 
     for (i = 0; i < objects.length; i++) { 
      objects[i].clickTest(e); 
     } 
    }); 

    objects = []; 

    sBox = new settingsBox(); 

    for (var i = 0; i < 4; i++) { 
     var ring = new shapeObj(i, ctx, canvas, sBox); 
     objects[i] = ring; 
     objects[i].draw(); 
    } 

    $("#button4").click(function() { 
     var ring = new shapeObj(i, ctx, canvas, sBox); 
     objects[i] = ring; 
     objects[i++].draw(); 
     playSoundA(); 
    }); 

    function animate() { 
     ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); 

     deadObjects = []; 

     for (var i = 0; i < objects.length; i++) { 
      var tmpRing = objects[i]; 

      for (var j = i+1; j < objects.length; j++) { 
       var tmpRingB = objects[j]; 

       var dx = tmpRingB.x - tmpRing.x; 
       var dy = tmpRingB.y - tmpRing.y; 

       var dist = Math.sqrt((dx * dx) + (dy * dy)); 

       if(dist < tmpRing.radius + tmpRingB.radius) { 
        playSound(); 

        //Put collision animations here!!! 

        var angle = Math.atan2(dy, dx); 
        var sine = Math.sin(angle); 
        var cosine = Math.cos(angle); 

        var x = 0; 
        var y = 0; 

        var xb = dx * cosine + dy * sine; 
        var yb = dy * cosine - dx * sine; 

        var vx = tmpRing.vx * cosine + tmpRing.vy * sine; 
        var vy = tmpRing.vy * cosine - tmpRing.vx * sine; 

        var vxb = tmpRingB.vx * cosine + tmpRingB.vy * sine; 
        var vyb = tmpRingB.vy * cosine - tmpRingB.vx * sine; 

        vx *= -1; 
        vxb *= -1; 

        xb = x + (tmpRing.radius + tmpRingB.radius); 

        tmpRing.x = tmpRing.x + (x * cosine - y * sine); 
        tmpRing.y = tmpRing.y + (y * cosine + x * sine); 

        tmpRingB.x = tmpRing.x + (xb * cosine - yb * sine); 
        tmpRingB.y = tmpRing.y + (yb * cosine + xb * sine); 

        tmpRing.vx = vx * cosine - vy * sine; 
        tmpRing.vy = vy * cosine + vx * sine; 

        tmpRingB.vx = vxb * cosine - vyb * sine; 
        tmpRingB.vy = vyb * cosine + vxb * sine; 

        tmpRing.loop = true; 
       }; 
      }; 

      tmpRing.x += tmpRing.vx; 
      tmpRing.y += tmpRing.vy; 

      if (tmpRing.x - tmpRing.radius < 0) { 
       playSound(); 
       tmpRing.x = tmpRing.radius; 
       tmpRing.vx *= -1; 
      } else if (tmpRing.x + tmpRing.radius > ctx.canvas.width) { 
       playSound(); 
       tmpRing.x = ctx.canvas.width - tmpRing.radius; 
       tmpRing.vx *= -1; 
      }; 

      if (tmpRing.y - tmpRing.radius < 0) { 
       playSound(); 
       tmpRing.y = tmpRing.radius; 
       tmpRing.vy *= -1; 
      } else if (tmpRing.y + tmpRing.radius > ctx.canvas.height) { 
       playSound(); 
       tmpRing.y = ctx.canvas.height - tmpRing.radius; 
       tmpRing.vy *= -1; 
      }; 

      if(tmpRing.radius <= 0) { 
       deadObjects.push(tmpRing); 
      } 

      objects[i].draw(); 
     }; 

     if (deadObjects.length > 0) { 
      for (var d = 0; d < deadObjects.length; d++) { 
       var tmpDeadObject = deadObjects[d]; 
       objects.splice(objects.indexOf(tmpDeadObject), 1); 
      } 
     } 

     if(playAnimation) { 
      setTimeout(animate, 33);  
     }; 
    }; 

    animate();  
});  

Irgendwelche Ideen?

Danke für die Hilfe.

Answer 1

Ihr Objekt ist nicht definiert, weil Sie es gelöscht haben. Eine einfache Lösung besteht darin, zu überprüfen, ob das Objekt noch definiert ist.

Fügen Sie die folgende Zeile kurz vor der Zeile mit dem Fehler ein. if (! (TmpRingB & & tmpRing)) fortfahren;

eine bessere Lösung ist, Haus auf Ihrem Array zu säubern, wenn Sie es löschen.