canvas动画:黑客帝国

In of this series we went over the basics of rendering reusable objects to the canvas, using our GUI for more intuitive controls, and creating the illusion of basic movement with our animation loop. In this part we’ll get comfortable with creating collision effects with a simple ball that changes colors as it hits the borders of our canvas.

在本系列的 ，我们介绍了将可重用对象渲染到画布上的基础知识，使用GUI进行更直观的控制，并通过动画循环创建了基本运动的错觉。 在这一部分中，我们将习惯于使用一个简单的球来创建碰撞效果，该球在碰到画布的边界时会改变颜色。

样板 (Boilerplate)

We can just use our project from Part 1 as the starting point for most of our animations.

我们可以只使用Part 1的项目作为大多数动画的起点。

// Get canvas elementconst canvas = document.querySelector('canvas');const c = canvas.getContext('2d');// Make canvas fullscreencanvas.width = innerWidth;canvas.height = innerHeight;addEventListener('resize', () => {  canvas.width = innerWidth;  canvas.height = innerHeight;});// Control Panelconst gui = new dat.GUI();const controls = {  dx: 0,  dy: 0,};gui.add(controls, 'dx', 0, 10);gui.add(controls, 'dy', 0, 10);// New Objectclass Ball {  constructor(x, y, radius, color) {    this.x = x;    this.y = y;    this.radius = radius;    this.color = color;  }}Ball.prototype.draw = function () {  c.beginPath();  c.fillStyle = this.color;  c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);  c.fill();  c.closePath();};Ball.prototype.update = function () {  this.x += controls.dx;  this.y += -controls.dy;  this.draw();};const ball = new Ball(innerWidth / 2, innerHeight / 2, 50, 'red');// Render new instancesconst init = () => ball.draw();// Handle changesconst animate = () => {  requestAnimationFrame(animate);  c.clearRect(0, 0, canvas.width, canvas.height);  ball.update();};init();animate();

弹跳器 (Bouncer)

You can preview the our end result .

您可以在预览我们的最终结果。

To change our behavior on a collision, we just need to add a condition to our update method that will change the ball’s behavior whenever it hits a border, in this case, reversing its direction. Keep in mind that the browser is looking at the center of our object for its position, so we always want to include the radius into the calculation.

要更改碰撞时的行为，我们只需要向update方法中添加一个条件，该条件将在碰到边界时改变球的行为，在这种情况下，将改变其方向。 请记住，浏览器正在查看对象中心的位置，因此我们始终希望将半径包括在计算中。

Ball.prototype.update = function() {  if (this.y + this.radius > canvas.height || this.y - this.radius < 0) {    controls.dy = -controls.dy;  }  this.y -= controls.dy;  if (this.x + this.radius > canvas.width || this.x - this.radius < 0) {    controls.dx = -controls.dx;  }  this.x += controls.dx;  this.draw();};

色彩 (Colors)

Now let’s add some more interesting behavior when we hit something, like changing the ball’s color. First we need an array of colors to choose from and a function to randomly select one for us. Whenever we hit a border we can re-assign our color value to a new random one.

现在，让我们在击球时添加一些更有趣的行为，例如更改球的颜色。 首先，我们需要一个颜色数组供您选择，并需要一个函数为我们随机选择一种颜色。 每当我们碰到边界时，我们都可以将颜色值重新分配给新的随机值。

I recommend checking out to make your own colors palettes.

我建议检查来制作自己的调色板。

// Returns a color between 0 and the length of our color arrayconst randomColor = colors => colors[Math.floor(Math.random() * colors.length)];const colors = [  '#e53935',  '#d81b60',  '#8e24aa',  '#5e35b1',  '#3949ab',  '#1e88e5',  '#039be5',  '#00acc1',  '#00897b',  '#43a047',  '#ffeb3b',  '#ef6c00'];// Re-assign color on contactBall.prototype.update = function () {  if (this.y + this.radius > canvas.height || this.y - this.radius < 0) {    this.color = randomColor(colors);    controls.dy = -controls.dy;  };  this.y -= controls.dy;  if (this.x + this.radius > canvas.width || this.x - this.radius < 0) {    this.color = randomColor(colors);    controls.dx = -controls.dx;  };  this.x += controls.dx;  this.draw();};// Make it start with a random colorconst newBall = new Ball(innerWidth / 2, innerHeight / 2, 50, randomColor(colors));

尾巴 (Tail)

Now that we have the basic functionality in place we can make it a bit more visually interesting by adding a colored tail that trails behind it. We can do this by removing clearRect and filling our whole canvas with a dark RGBA value. This creates a ‘residue’ effect from anything that moves through it and we can control the residue’s intensity with the background’s opacity.

现在我们已经具备了基本的功能，我们可以通过添加尾部后面的彩色尾部使其在视觉上更加有趣。 我们可以通过删除clearRect并为整个画布填充深色RGBA值来实现。 这会通过在其中移动的任何物体产生“残渣”效果，我们可以通过背景的不透明度来控制残渣的强度。

const animate = () => {  requestAnimationFrame(animate);  c.fillStyle = `rgba(33, 33, 33, ${-controls.tail / 10})`; // Lower opacity creates a longer tail  c.fillRect(0, 0, canvas.width, canvas.height);  newBall.update();};// We also need to update our controls with some default valuesconst controls = {  dx: 5,  dy: 5,  tail: -5};gui.add(controls, 'dx', 0, 10);gui.add(controls, 'dy', 0, 10);gui.add(controls, 'tail', -10, 0);

结论 (Conclusion)

Just like that, we now have a very basic collision system with some special effects. In the upcoming Part 3 of this series we’ll be using the concepts covered here to create this dynamic .

就像这样，我们现在有了一个非常基本的碰撞系统，并具有一些特殊效果。 在本系列的第3部分中，我们将使用此处介绍的概念来创建此动态 。

If you had any problems following along, a working example is available on . Feel free to fork it and share what you made.

如果您随后遇到任何问题，可以在上一个工作示例。 随意分叉并分享您的创作。

翻译自:

canvas动画:黑客帝国