Javascript 设置精灵动画，将过多图像添加到舞台

我已经设置了一个脚本，可以在画布元素上为图像设置动画。 我试图做的是跟踪图像的x，当它到达某个点时，它会生成另一个图像来设置动画，它似乎创建了太多的图像，导致浏览器崩溃。有什么帮助吗？ 守则的主要部分如下：

 function tick() {
     pauseTweens();

     for (var i = 0; i < linesArray.length; i++) {
         if (linesArray[i] >= 200 && linesArray[i] <= 210) {
             spawnSprite();
             linesArray = [];
         }
     }

     for (var i = items.length - 1; i >= 0; i--) {
         var item = items[i];
         console.log(item.x)
         if (item.x > stage.canvas.width) {
             stage.removeChild(item);
             items.splice(i, 1);
         }
     }

     stage.update();
 }

---

请用HTML发布一个完整的例子。嗨，a.L谢谢你的时间，我的问题已经改变了，所以我发布了一个新的问题，用小提琴-，希望你能帮忙

function animate(asset, prop, val, duration) {
    var start = new Date().getTime();
    var end = start + duration;
    var current = asset[prop];
    var distance = val - current;
    var step = function () {
        var timestamp = new Date().getTime();
        var progress = Math.min((duration - (end - timestamp)) / duration, 1);
        asset[prop] = current + (distance * progress);
        var a = Math.round(asset.x);
        linesArray.push(a)

        if (progress < 1) requestAnimationFrame(step);
    };

    return step();
};

 function spawnSprite() {
     linesArray = [];
     console.log("spawnSprite");
     spawnNow = false;
     var asset = buildSprite(sprite);
     animate(asset, 'x', -40, p.duration);
     animate(asset, 'y', 20, p.duration);
     animate(asset, 'alpha', 0, p.duration);
     animate(asset, 'scaleY', .2, p.duration);
     animate(asset, 'scaleX', .2, p.duration);
     items.push(asset)
 }