对于类(class)，我们正在做一个简单的 Javascript 弹跳球程序。然而，对于作业的最后一部分，我们必须包括一个机制，比如改变它撞到 Canvas 墙时的速度、改变它的颜色、大小等。我决定尝试改变颜色，因为它看起来差不多我认为最简单的一个，而且我不太懂代码。但是，我已尽一切努力让球在撞到墙上时变为随机颜色，并且它似乎在碰撞时重新绘制，但在刷新页面之前保持相同的颜色。谁能告诉我我错过了什么？
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="Jay Aguiar">
<title>Week 1 Animation</title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
</head>
<body>
<canvas id="canvas" width = "1024" height ="800" >
Your browser is outdated and does not support HTML5. Please
update to the latest version.
</canvas>
</body>
<!-- Do not change this-->
<script type="text/javascript" src="js/Ball.js"></script>
<!--
Change the src of the following script tag to the file you want
to view.
Your options are:
js/week1_basic_movement.js
js/week1_boundary_detection_loop.js
js/week1_boundary_detection_bounce.js
-->
<script type="text/javascript" src="js/week1_basic_movement.js">
</script>
</html>
球的 JavaScript
function Ball()
{
this.x = canvas.width/2;
this.y = canvas.height/2;
this.width = 100;
this.height = 100;
this.vx = 0;
this.vy = 0;
this.force = 1;
this.color = getRandomColor();
this.draw = function()
{
context.save();
context.fillStyle = this.color;
context.translate(this.x, this.y);
context.beginPath();
context.arc(0, 0, this.width/2, 0, 360 * Math.PI);
context.closePath();
context.fill();
context.restore();
}
function getRandomColor() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
//This changes the player's position
this.move = function()
{
this.x += this.vx;
this.y += this.vy;
}
}
用于移动和颜色变化的 Javascript
var canvas;
var context;
var timer;
var interval = 1000/60;
var ball;
canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
ball = new Ball();
ball.vx = 3;
ball.vy = 3;
timer = setInterval(animate, interval);
function animate()
{
context.clearRect(0,0,canvas.width, canvas.height);
ball.move();
if(ball.x > canvas.width - ball.width/2)
{
ball.vx = -ball.vx;
context.fillStyle = getRandomColor();
}
else if(ball.x < ball.width/2)
{
ball.vx = -ball.vx;
context.fillStyle = getRandomColor();
}
if(ball.y > canvas.height - ball.height/2)
{
ball.vy = -ball.vy;
context.fillStyle = getRandomColor();
}
else if(ball.y < ball.height/2)
{
ball.vy = -ball.vy;
context.fillStyle = getRandomColor();
}
ball.draw();
}
最佳答案
每次调用 ball.draw() 时，您都将 context.fillStyle 重置为 Ball 属性中保存的值颜色。删除该逻辑，它就像一个魅力(尽管代码肯定可以使用一些清理/重新格式化)。
运行代码片段看看!
function getRandomColor() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
function Ball()
{
this.x = canvas.width/2;
this.y = canvas.height/2;
this.width = 100;
this.height = 100;
this.vx = 0;
this.vy = 0;
this.force = 1;
this.draw = function()
{
context.save();
context.translate(this.x, this.y);
context.beginPath();
context.arc(0, 0, this.width/2, 0, 360 * Math.PI);
context.closePath();
context.fill();
context.restore();
}
//This changes the player's position
this.move = function()
{
this.x += this.vx;
this.y += this.vy;
}
}
var canvas;
var context;
var timer;
var interval = 1000/60;
var ball;
canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
ball = new Ball();
ball.vx = 3;
ball.vy = 3;
timer = setInterval(animate, interval);
function animate()
{
context.clearRect(0,0,canvas.width, canvas.height);
ball.move();
if(ball.x > canvas.width - ball.width/2)
{
ball.vx = -ball.vx;
context.fillStyle = getRandomColor();
}
else if(ball.x < ball.width/2)
{
ball.vx = -ball.vx;
context.fillStyle = getRandomColor();
}
if(ball.y > canvas.height - ball.height/2)
{
ball.vy = -ball.vy;
context.fillStyle = getRandomColor();
}
else if(ball.y < ball.height/2)
{
ball.vy = -ball.vy;
context.fillStyle = getRandomColor();
}
ball.draw();
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="Jay Aguiar">
<title>Week 1 Animation</title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
</head>
<body>
<canvas id="canvas" width = "300" height ="190" >
Your browser is outdated and does not support HTML5. Please
update to the latest version.
</canvas>
</body>
</html>关于javascript - 如何随机化弹跳球程序的颜色？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55502591/