Js实现简单的小球运动特效

时间：2023-12-08

关于“Js实现简单的小球运动特效”，我可以为您提供以下攻略：

1. 准备工作

在实现小球运动特效之前，我们需要准备好一个 HTML 文档和一个 JavaScript 文件。其中，HTML 文档中需要包含用于显示小球的 <canvas> 元素，JavaScript 文件中则要编写与小球运动相关的代码。

示例代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>小球运动特效</title>
  </head>
  <body>
    <canvas id="canvas" width="500" height="500"></canvas>
    <script src="index.js"></script>
  </body>
</html>

// index.js

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var ball = {
  x: 50,
  y: 50,
  radius: 20,
  vx: 5,
  vy: 2,
  color: 'blue'
};
function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI*2, true);
  ctx.closePath();
  ctx.fillStyle = ball.color;
  ctx.fill();
  ball.x += ball.vx;
  ball.y += ball.vy;
  if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
    ball.vy = -ball.vy;
  }
  if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
    ball.vx = -ball.vx;
  }
}
setInterval(draw, 10);

2. 实现思路

实现小球运动特效的思路可以概括为以下几个步骤：

2.1 准备画布和小球

在 HTML 文档中添加一个 <canvas> 元素用于显示小球。用 JavaScript 获取该元素的上下文对象，并定义一个对象用于存储小球的位置、速度、半径和颜色等信息。

2.2 实现画球的函数

编写一个函数 draw()，将清空画布、绘制小球、更新小球的位置信息等功能组合在一起。

2.3 调用动画函数

使用 setInterval 函数来定时调用 draw() 函数，从而使小球在画布中运动。

2.4 处理小球碰撞

在小球触碰到画布边缘时，通过改变小球的速度方向来实现碰撞效果。

3. 示例说明

下面介绍两个用 JavaScript 实现小球运动特效的示例：

3.1 示例一

这是一个简单的小球自由落体的示例，小球会在画布中自由运动，同时受重力的影响，逐渐加速下落，直到触碰到画布底部反弹。

// 自由落体

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var ball = {
  x: 50,
  y: 50,
  radius: 20,
  vx: 0,
  vy: 0,
  ay: 0.1,
  color: 'blue'
};
function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI*2, true);
  ctx.closePath();
  ctx.fillStyle = ball.color;
  ctx.fill();
  ball.vx += 0;
  ball.vy += ball.ay;
  ball.x += ball.vx;
  ball.y += ball.vy;
  if (ball.y + ball.vy > canvas.height - ball.radius) {
    ball.vy = -ball.vy * 0.8;
  }
}
setInterval(draw, 10);

3.2 示例二

这是一个小球在画布中自由反弹的示例，小球会在画布中自由运动，同时当触碰到画布边缘时反弹。

// 小球反弹

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var ball = {
  x: 50,
  y: 50,
  radius: 20,
  vx: 5,
  vy: 2,
  color: 'blue'
};
function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI*2, true);
  ctx.closePath();
  ctx.fillStyle = ball.color;
  ctx.fill();
  ball.x += ball.vx;
  ball.y += ball.vy;
  if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
    ball.vy = -ball.vy;
  }
  if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
    ball.vx = -ball.vx;
  }
}
setInterval(draw, 10);

两个示例的核心代码大致相同，只是运动规律不同，您可以根据自己的需求进行修改和扩展。

上一篇：JavaScript基本类型值-Number类型 下一篇：JavaScript淡入淡出渐变简单实例