Question

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

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

问题在于，当用户调整显示器大小时，颜色数组没有足够的颜色来绘制所有圆圈，这是因为代码会删除使用过的颜色，因此没有重复。但是，我尝试通过声明一个名为 origColours 的颜色的常量数组并将colors数组设置为等于origColours数组来解决此问题。

以下是我编写的代码。我无法看到 origColours 数组是如何或为何被操纵的，希望你可以提供帮助

：）

//########//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();

Answer 1

注意：所以我有点太仓促，并没有彻底阅读你的问题。真正的解决方案是由Hey24sheep和pooyan发布的 - 我将离开这里来解释问题的不同方面。

将变量声明为const表示您无法更改其值。如果有问题的变量持有对象（例如数组）的引用，则意味着您无法使变量引用其他对象。

例如，如果你试过这个：

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

这会失败，因为您正在尝试更改colors引用的内容。但是，数组本身是与变量分开的实体，其属性仍然可以自由操作。

在这种情况下，您需要的是Object.freeze()：

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

现在您将发现无法添加，删除或更改阵列的任何元素。而且，由于您使用const进行了验证，因此您无法重新分配变量colors。

更多信息：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const

Answer 2

在JavaScript中，对象通过引用传递和分配（更准确地说是引用的值），因此colors是对同一对象的引用。

因为您在设置功能中执行此操作。

colours = origColours

如果您需要修改副本而不是另一个副本，则需要创建副本。基本上，slice()操作克隆数组并返回对新数组的引用

colours = origColours.slice();

Answer 3

你应该克隆你的数组而不是colours = origColours。克隆数组的一种方法是colours = origColours.slice(0);，否则当您更改colours数组时，您的origColours也会受到影响。

Answer 4

你可以制作一个数组的副本，这样就可以保留原始数组，只需几种方法就可以复制数组

colours = origColours.slice();

或者如果你正在使用es7 polyfills

colours = [...origColours]

const表示您无法更改作业，但可以更改作业者的内部

＆＃13;

//you can do this
const a = [1, 2]; // [1]
a.pop()
console.log(a)

// but you cant do this
const i = 5;
i = 4; // erro

＆＃13;

声明为常量的数组仍然在javascript

4 个答案: