Javascript随机颜色“球”不能正常工作

我有这个项目，我正在努力，需要有这个“球”是一个随机的颜色从启动。我可以生成随机颜色，但是球在整个画面中不断产生新的颜色。我只需要每一个球是一个随机的颜色。帮帮我？！我只是一名介绍性学生，所以我还不太了解！这是目前我的代码：Javascript随机颜色“球”不能正常工作

var context; 
var x = Math.floor(450 * Math.random() + 1); 
var y = 0; 
var dx = 0; 
var dy = 2; 
var xx = 200; 

function startGame() { 
    context = myCanvas.getContext('2d'); 
    setInterval('drawEverything()', 50); 
} 

function drawEverything() { 
    drawCircle(); 
    drawRectangle(); 
} 

function drawCircle() { 
    context.clearRect(0, 0, 450, 300); 
    context.beginPath(); 
    context.arc(x, y, 10, 0, Math.PI * 2); 
    context.closePath(); 
    context.fillStyle = getRandomColor(); 
    context.fill(); 

    x += dx; 
    y += dy; 

} 

function getRandomColor() { 
    var letters = 'ABCDEF'; 
    var color = '#'; 
    for (var i = 0; i < 6; i++) { 
     color += letters[Math.floor(Math.random() * 16)]; 
    } 
    return color; 
}

来源

2017-05-08 Amber

您是否尝试将颜色存储在函数外定义的变量中，您使用'x'和'y'的方式？然后在'startGame（）'函数内设置一次颜色。 – nnnnnn

@nnnnnn是正确的。因为您的“drawEverything（）”每隔50次执行一次，所以每次都会以新颜色*渲染球，因为“drawEverything（）”会以新颜色生成新球。将颜色存储在函数外部的变量中，然后它将保持不变。 –

var myRanColor = getRandomColor(); 
function drawCircle() 
{ 
context.clearRect(0,0,450,300); 
context.beginPath(); 
context.arc(x,y,10,0,Math.PI*2); 
context.closePath(); 
context.fillStyle=myRanColor; 
context.fill(); 

x+=dx; 
y+=dy; 

}

来源

2017-05-08 02:44:45 Paddy

要做到这一点，最好的办法是让一个圆的对象。当你第一次创建它时，你设置对象的颜色，并且永远不会改变。每次绘制时都更新圆的位置。这样你可以有多个圆形物体，每个物体都有不同的随机颜色。这是我的两个圈子的尝试（未经测试，所以谨慎处理！）。

var circle1; 
var circle2; 

function getRandomColor() { 
    var letters = 'ABCDEF'; 
    var color = '#'; 
    for (var i = 0; i < 6; i++) { 
     color += letters[Math.floor(Math.random() * 16)]; 
    } 
    return color; 
} 

function Circle() { 
    this.context = myCanvas.getContext('2d'); 
    this.color = getRandomColor(); 
    this.x = Math.floor(450 * Math.random() + 1); 
    this.y = 0; 
    this.dx = 0; 
    this.dy = 2; 
    this.xx = 200; 
} 

function Circle.prototype.draw() { 
    this.context.clearRect(0, 0, 450, 300); 
    this.context.beginPath(); 
    this.context.arc(this.x, this.y, 10, 0, Math.PI*2); 
    this.context.closePath(); 
    this.context.fillStyle = this.color; 
    this.context.fill(); 

    this.x += this.dx; 
    this.y += this.dy; 
} 

function drawEverything() 
{ 
    circle1.draw(); 
    circle2.draw(); 
} 

function startGame() 
{ 
    circle1 = new Circle(); 
    circle2 = new Circle(); 
    setInterval(drawEverything,50); 
}

这里new Circle()创建一个新的圈子对象，并且只为每个圆圈调用一次，在startGame功能。每个圆都使用其draw方法绘制，该方法在drawEverything函数中为两个圆圈连续调用。绘制方法定义中的prototype意味着我们可以共享不同圆圈的代码，但圆圈本身可以具有不同的值（Circle函数中的this，draw方法引用当前的圆圈对象）。有关JavaScript中面向对象的介绍，请参阅the MDN docs。

来源

2017-05-08 03:14:22

Javascript随机颜色“球”不能正常工作

回答

相关问题