Question

对于课堂，我们正在做一个简单的Java弹跳球程序。但是，对于作业的最后部分，我们必须包括一种机制，例如改变其撞击画布壁时的速度，改变其颜色，尺寸等。我决定尝试进行颜色更改，因为它的作用非常明显我认为最简单的一种，我不太懂代码。但是，我已尽我所能使球碰到墙壁时变为随机颜色，并且看起来在碰撞时已重绘，但在刷新页面之前仍保持相同的颜色。谁能告诉我我在想什么？

<!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>

球的Java脚本

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();
}

Answer 1

您将在每次调用context.fillStyle时将ball.draw()重置为Ball属性color中保存的值。删除该逻辑，它就像一个魅力（尽管代码肯定可以使用一些清理/重新格式化）。

运行摘要以查看！

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>

如何随机设置弹跳球程序的颜色？

1 个答案: