Animate CC Html Canvas Array

Question

У меня есть проект, над которым я работаю. Я новичок, но я пытаюсь обновить этот код, чтобы упростить добавление новых видеоклипов в будущем. Прямо сейчас у меня это настроено на 2 мувиклипа. Это приложение для рисования линий, где вы перетаскиваете одну точку, и она создает линию, и вы помещаете ее в правильное место. Мне нужно поместить все в массивы, но я не знаю, с чего начать. Любая помощь будет оценена. Спасибо.

Вот код. Он работает вне массивов, но для создания другого объекта на сцене мне нужно было бы скопировать столько строк кода и изменить конечный номер.

this.stop;

var self = this;

var lines;

//Arrays I am assuming I need
line = ["0", "1", "2"];//
answer = ["0", "1", "2"];//
statement = ["0", "1", "2"];//
lineT = ["0", "1", "2"];//
CircleIn = ["0", "1", "2"];//
CircleOut = ["0", "1", "2"];//


var answer1 = "1";
var statement1 = "a";
var line1;
var lineT1 = true;


var answer2 = "2";
var statement2 = "b";
var line2;
var lineT2 = true;



xPos = [136, 264];

function shuffle(array) {

counter = array.length;

while (counter > 0) {

    index = Math.floor(Math.random() * counter);

    counter--;

    temp = array[counter];
    array[counter] = array[index];
    array[index] = temp;
}
return array;
}

function positionAnswers() {
shuffle(xPos);

self.CircleIn1.y = xPos[0];
self.CircleIn2.y = xPos[1];

}

var a = 0;
var b = 0;
var numTotal = 2; 
var numAns = 0;
var attempts = 0;
var correct = true;


function setup(){
positionAnswers();

self.CircleIn1.ans.text = answer1;
self.CircleOut1.statement.text = statement1;

self.CircleIn2.ans.text = answer2;
self.CircleOut2.statement.text = statement2;

}

setup();

var inX = 0; //= this.CircleIn1.x;
var inY = 0;//= this.CircleIn1.y;
var newX = 0;
var newY = 0;
var outX = 0;//= this.CircleOut1.x;
var outY = 0;//= this.CircleOut1.y;

function resetCor(){
 inX = 0;
 inY = 0;
 newX = 0;
 newY = 0;
 outX = 0;
 outY = 0;
}


function resetLin(){

self.removeChild(lines);

self.removeChild(line1);
lineT1 = true;

self.removeChild(line2);
lineT2 = true;

correct = true;
}

this.rstBtn.on("click", function(evt){
resetLin();
self.rstBtn.visible = false;
a = 0;
b = 0;
numAns = 0;
self.Feedback.text = "";
})


function checkAns(){
if (a!=b){
    correct = false;
    if (a == 1){
        lineT1 = false;
    }
    if (a == 2){
        lineT2 = false;
    }

}
numAns++;
a = 0;
b = 0;
Feedback();
}   

function Feedback(){
if (numTotal == numAns){
    if (correct == false){
        self.Feedback.text = "Incorrect. ";
                }
    if (attempts == 1) {
        self.Feedback.text = "That is also Incorrect.";
        self.rstBtn.visible = false;
        showAns();
        }
    attempts++;
    if (correct == true){
        self.Feedback.text = "Correct.";
        self.rstBtn.visible = false;
        showAns();
    }

}
}

function showAns(){
if (lineT1 == true){
    self.removeChild(line1);
    var stroke_color = "#00ff00";
    var shape =  new createjs.Shape(new createjs.Graphics().beginStroke(stroke_color).moveTo(self.CircleIn1.x, self.CircleIn1.y).lineTo(self.CircleOut1.x, self.CircleOut1.y).endStroke());
    self.addChild(shape);
}
if (lineT1 == false){
    self.removeChild(line1);
    var stroke_color = "#ff0000";
    var shape =  new createjs.Shape(new createjs.Graphics().beginStroke(stroke_color).moveTo(self.CircleIn1.x, self.CircleIn1.y).lineTo(self.CircleOut1.x, self.CircleOut1.y).endStroke());
    self.addChild(shape);
}

if (lineT2 == true){
    self.removeChild(line2);
    var stroke_color = "#00ff00";
    var shape =  new createjs.Shape(new createjs.Graphics().beginStroke(stroke_color).moveTo(self.CircleIn2.x, self.CircleIn2.y).lineTo(self.CircleOut2.x, self.CircleOut2.y).endStroke());
    self.addChild(shape);
}
if (lineT2 == false){
    self.removeChild(line2);
    var stroke_color = "#ff0000";
    var shape =  new createjs.Shape(new createjs.Graphics().beginStroke(stroke_color).moveTo(self.CircleIn2.x, self.CircleIn2.y).lineTo(self.CircleOut2.x, self.CircleOut2.y).endStroke());
    self.addChild(shape);
}   

}

this.CircleIn1.on("pressmove", function(evt) {
self.removeChild(lines);
self.removeChild(line1);
inX = self.CircleIn1.x
inY = self.CircleIn1.y
newX = evt.rawX;
newY = evt.rawY;
var stroke_color = "#0000ff";
var shape =  new createjs.Shape(new createjs.Graphics().beginStroke(stroke_color).moveTo(inX, inY).lineTo(newX, newY).endStroke());
self.addChild(shape);
lines = shape;
});
this.CircleIn2.on("pressmove", function(evt) {
self.removeChild(lines);
self.removeChild(line2);
inX = self.CircleIn2.x
inY = self.CircleIn2.y
newX = evt.rawX;
newY = evt.rawY;
var stroke_color = "#0000ff";
var shape =  new createjs.Shape(new createjs.Graphics().beginStroke(stroke_color).moveTo(inX, inY).lineTo(newX, newY).endStroke());
self.addChild(shape);
lines = shape;
});



this.CircleIn1.on("pressup", function(evt) {
self.removeChild(lines);
if (outX!=0){
var stroke_color = "#0000ff";
var shape =  new createjs.Shape(new createjs.Graphics().beginStroke(stroke_color).moveTo(inX, inY).lineTo(outX, outY).endStroke());
self.addChild(shape);
line1 = shape;
self.rstBtn.visible = true;
a = 1;
checkAns();
}
resetCor();
console.log("up"); })
this.CircleIn2.on("pressup", function(evt) {
self.removeChild(lines);
if (outX!=0){
var stroke_color = "#0000ff";
var shape =  new createjs.Shape(new createjs.Graphics().beginStroke(stroke_color).moveTo(inX, inY).lineTo(outX, outY).endStroke());
self.addChild(shape);
line2 = shape;
self.rstBtn.visible = true;
a = 2;
checkAns();
}
resetCor();
console.log("up"); })


frequency = 3;
stage.enableMouseOver(frequency);

this.CircleOut1.on("mouseover", function(evt) {
    outX = self.CircleOut1.x
    outY = self.CircleOut1.y
    b = 1;
})
this.CircleOut2.on("mouseover", function(evt) {
    outX = self.CircleOut2.x
    outY = self.CircleOut2.y
    b = 2;
})


this.CircleOut1.on("mouseout", function(evt) {
    outX = 0;
    outY = 0;
    b = 0;
})
this.CircleOut2.on("mouseout", function(evt) {
    outX = 0;
    outY = 0;
    b = 0;
})