声明为常量的数组仍在javascript中操作

因此，我在javascript和HTML5画布中构建了一个圆形随机颜色选择器实用程序，所有组件都是动态的，对象的大小根据屏幕大小调整，间距也根据屏幕大小调整。此外，如果用户调整显示的大小，该实用程序也会动态调整大小

我使用一个数组来存储圆圈的颜色。生成圆时，它们使用数组中的第一种颜色，从数组中删除该颜色，然后洗牌数组

问题是，当用户调整显示器的大小时，颜色数组没有足够的颜色来绘制所有的圆圈，这是因为代码删除了使用过的颜色，因此没有重复的颜色。然而，我试图通过声明一个名为origColours的恒定颜色数组并将颜色数组设置为origColours数组来解决这个问题

下面是我写的代码。我看不出原色数组是如何被操作的，或者为什么被操作的，希望你能帮忙

：）

///设置
var canvas=document.getElementById（“myCanvas”）；
var c=canvas.getContext（“2d”）；
canvas.height=内部高度；
canvas.width=内部宽度；
document.documentElement.style.overflow='hidden'；//火狐浏览器
document.body.scroll=“否”//只是
//########//颜色
常量原色=[“#1c2133”、“#2b6ea8”、“#5d99bf”、“#333968”、“#000000”、“#b000b0”、“#0000aa”、“#ff0000”、“#00aaaa”、“#7CFC00”、“#00FF7F”、“#8B0000”、“#F08C”]；
var colors=[“#1c2133”、“#2b6ea8”、“#5d99bf”、“#333968”、“#000000”、“#b000b0”、“#0000aa”、“#ff0000”、“#00AAA”、“#7CFC000”、“#00FF7F”、“#80000”、“F08C”]；
//########//变数
var背景色=0；
变量鼠标={
x:未定义，
y:未定义，
}; 
变量键={
键代码：未定义，
}
var-mainRadius=0；
var-smallRadius=0；
var指针圆；
var循环=[]；
//########//事件
addEventListener（“mousemove”，函数（事件）{
mouse.x=event.x；
mouse.y=event.y；
})
window.addEventListener（“按键”，函数（事件）{
key.keyCode=event.keyCode；
如果（key.keyCode==32）{
开关bg（）；
}
})
window.addEventListener（'resize'，函数（事件）{
canvas.width=内部宽度
canvas.height=内部高度
设置（）；
})
//########//物体
功能圆（x、y、半径、颜色）{
这个.x=x；
这个。y=y；
这个半径=半径；
//this.n=Math.floor（Math.random（）*colors.length）；
如果（颜色==未定义）{
//this.fill=颜色[this.n]；
this.fill=颜色[0]；
this.orignalFill=this.fill；
颜色。移位（）；
颜色=洗牌耳环（颜色）；
}否则{
这个填充=颜色；
this.orignalFill=this.fill；
} 
this.draw=函数（）{
c、 fillStyle=this.fill；
c、 strokeStyle=此颜色；
c、 beginPath（）；
c、 弧（这个.x，这个.y，这个.radius，0，Math.PI*2）；
c、 填充（）；
}
this.update=函数（）{
//从边缘反弹
//如果（this.x+this.radius>innerWidth | | this.x-this.radius<0）{
//this.dx=-this.dx；
//        }
//if（this.y+this.radius>innerHeight | | this.y-this.radius<0）{
//this.dy=-this.dy；
//        }
//转圈
//this.x+=this.dx；
//this.y+=this.dy；
//在完成所有计算后绘制圆
这个.draw（）；
}
}
//########//效用函数
功能随机播放（arr）{
变量j，x，i；
对于（i=arr.length-1；i>0；i--）{
j=数学地板（数学随机（）*（i+1））；
x=arr[i]；
arr[i]=arr[j]；
arr[j]=x；
}
返回arr；
}
函数检查冲突（obj1、objs）{
对于（var i=0；i=内部宽度）{
主半径=内宽/6；
}否则{
主半径=内部高度/6；
}
小半径=主半径/2；
c、 clearRect（0,0，innerWidth，innerHeight）；
圆圈=[]；
颜色=原色
指针圆=新圆（0,0,1，“rgba（0,0,0,0）”；
圆。推（新圆（内宽/2，内高/2，主半径，“白色”）；
圆。推（新圆（（内宽/2）-主半径*2，内高/2，小半径））；
圆。推（新圆（（内宽/2）+主半径*2，内高/2，小半径））；
圆。推（新圆（（内宽/2），（内高/2）-主半径*2，小半径））；
圆。推（新圆（（内宽/2），（内高/2）+主半径*2，小半径））；
var angCoE=主半径/2*3；
圆。推（新圆（（内宽/2）+ang
//########//SETUP
var canvas = document.getElementById("myCanvas");
var c = canvas.getContext("2d");

canvas.height = innerHeight;
canvas.width = innerWidth;

document.documentElement.style.overflow = 'hidden';  // firefox, chrome
document.body.scroll = "no"; // ie only


//########//COLORS
const origColours = ["#1c2133", "#2b6ea8", "#5d99bf", "#333968", "#000000", "#b000b0", "#0000aa", "#ff0000", "#00aaaa", "#7CFC00", "#00FF7F", "#8B0000", "#F0E68C"];
var colours = ["#1c2133", "#2b6ea8", "#5d99bf", "#333968", "#000000", "#b000b0", "#0000aa", "#ff0000", "#00aaaa", "#7CFC00", "#00FF7F", "#8B0000", "#F0E68C"];



//########//VARIABLES
var backgroundColour = 0;

var mouse = {
    x: undefined,
    y: undefined,
}; 

var key = {
    keyCode: undefined,
}

var mainRadius = 0;
var smallRadius = 0;

var pointerCircle;
var circles = [];



//########//EVENTS
window.addEventListener("mousemove", function(event) {
    mouse.x = event.x;
    mouse.y = event.y;
})

window.addEventListener("keypress", function(event) {
    key.keyCode = event.keyCode;
    if (key.keyCode == 32) {
        switchBg();
    }
})

window.addEventListener('resize', function(event) {
    canvas.width = innerWidth
    canvas.height = innerHeight

    setup();
})



//########//OBJECTS
function Circle(x, y, radius, colour) {
    this.x = x;
    this.y = y;
    this.radius = radius;
    //this.n = Math.floor(Math.random()*colours.length);

    if (colour == undefined) {
        //this.fill = colours[this.n];
        this.fill = colours[0];
        this.orignalFill = this.fill;
        colours.shift();
        colours = shuffleArray(colours);
    } else {
        this.fill = colour;
        this.orignalFill = this.fill;
    } 


    this.draw = function() {
        c.fillStyle = this.fill;
        c.strokeStyle = this.colour;
        c.beginPath();
        c.arc(this.x,this.y,this.radius,0,Math.PI*2);
        c.fill();
    }

    this.update = function() {

        //Bounce off the edges
//        if (this.x + this.radius > innerWidth || this.x - this.radius < 0) {
//            this.dx = -this.dx;
//        }
//        if (this.y + this.radius > innerHeight || this.y - this.radius < 0) {
//            this.dy = -this.dy;
//        }

        //Move circle
//        this.x += this.dx;
//        this.y += this.dy;



        //Draw the circle after all calculations have been made
        this.draw();

    }
}



//########//UTILITY FUNCTIONS
function shuffleArray(arr) {
    var j, x, i;
    for (i = arr.length - 1; i > 0; i--) {
        j = Math.floor(Math.random() * (i + 1));
        x = arr[i];
        arr[i] = arr[j];
        arr[j] = x;
    }
    return arr;
}

function checkCollisions(obj1, objs) {
    for (var i = 0; i < objs.length; i++) {
        if (checkCollision(obj1, objs[i])) {
            return objs[i]
        }
    }

}
function renderCircles(arr) {
    for (var i = 0; i < arr.length; i++) {
        arr[i].update();
    }
}

function checkCollision(object1, object2) {
    var obj_s = getDistance(object1.x, object1.y, object2.x, object2.y);

    if (obj_s < object1.radius + object2.radius) {
        return true;
    } else {
        return false;
    }
}

function getDistance(x1, y1, x2, y2) {
    xs = x2 - x1;
    ys = y2 - y1;

    return Math.sqrt(Math.pow(xs, 2) + Math.pow(ys, 2));
}

function switchBg() {
    if (backgroundColour == 0) {
        document.body.style.backgroundColor = "black"
        backgroundColour = 1
    } else if (backgroundColour == 1) {
        document.body.style.backgroundColor = "white"
        backgroundColour = 0
    }
}



//########//ANIMATION
function animate() {
    requestAnimationFrame(animate);
    c.clearRect(0,0,innerWidth,innerHeight);

    pointerCircle.x = mouse.x;
    pointerCircle.y = mouse.y;

    var result = checkCollisions(pointerCircle, circles);

    if (result != undefined) {
        circles[0].fill = result.fill;
    } else {
        circles[0].fill = circles[0].orignalFill;
    }

    pointerCircle.update();
    renderCircles(circles);

}

//########//RUNNING CODE


function setup() {
    if (innerHeight >= innerWidth) {
        mainRadius = innerWidth/6;
    } else {
        mainRadius = innerHeight/6;
    }

    smallRadius = mainRadius/2;

    c.clearRect(0,0,innerWidth,innerHeight);

    circles = [];
    colours = origColours

    pointerCircle = new Circle(0,0,1, "rgba(0,0,0,0)");
    circles.push(new Circle(innerWidth/2, innerHeight/2, mainRadius, "white"));

    circles.push(new Circle((innerWidth/2)-mainRadius*2, innerHeight/2, smallRadius));
    circles.push(new Circle((innerWidth/2)+mainRadius*2, innerHeight/2, smallRadius));
    circles.push(new Circle((innerWidth/2), (innerHeight/2)-mainRadius*2, smallRadius));
    circles.push(new Circle((innerWidth/2), (innerHeight/2)+mainRadius*2, smallRadius));

    var angCoE = mainRadius / 2 * 3;

    circles.push(new Circle((innerWidth/2)+angCoE, (innerHeight/2)-angCoE, smallRadius));
    circles.push(new Circle((innerWidth/2)+angCoE, (innerHeight/2)+angCoE, smallRadius));
    circles.push(new Circle((innerWidth/2)-angCoE, (innerHeight/2)-angCoE, smallRadius));
    circles.push(new Circle((innerWidth/2)-angCoE, (innerHeight/2)+angCoE, smallRadius));

}

setup();
animate();

colours = origColours

colours = origColours.slice();

const colors = [ 'red', 'green', 'blue' ];
colors = [ 'yellow', 'cyan', 'magenta' ];

const colors = Object.freeze([ 'red', 'green', 'blue' ]);