JavaScript(十一)

您所在的位置：网站首页 › maya怎么让球动起来 › JavaScript(十一)

JavaScript(十一)

2024-07-13 08:48| 来源: 网络整理| 查看: 265

这个实例将会利用 Canvas API 来在屏幕上画小球, 还会用到 requestAnimationFrame API 来使整个画面动起来 —— 我们并不要求你事先学习过这些 API 的相关知识，希望你完成这个练习之后会想去探索更多。这个过程中我们会用到一些漂亮的小东西并向你展示一些技巧，比如小球从墙上反弹，检查它们是否撞到了对方（也就是碰撞检测）。

准备工作

首先下载 bouncing-balls-start.zip，其中包含以下三个文件：index.html、style.css 和 main.js。它们分别包含以下内容：

一个非常简单的 HTML 文档，包括一个元素、一个元素来画小球，还有一些元素将 CSS 和 JavaScript 运用到我们的 HTML 中。一些非常简单的样式，主要是元素的样式和定位，另外还能使画面填充整个页面从而摆脱滚动条和边缘的空白（这样看起来非常简洁）一些 JavaScript 用来设置元素，并提供我们要用到的基本函数。

脚本的第一部分是这样的：

const canvas = document.querySelector('canvas'); const ctx = canvas.getContext('2d'); const width = canvas.width = window.innerWidth; const height = canvas.height = window.innerHeight;

这个脚本使用变量代指了元素, 然后对其调用 getContext() 从而我们获得一个开始画画的环境。存储以上操作结果的变量（ctx）是一个对象，直接代指画布上的一块允许我们绘制 2D 图形的区域。

接下来，我们设置 width 和 height 变量，并且让画布元素的宽和高（分别使用 canvas.width 和 canvas.height 表示）等于浏览器的宽和高（也就是网页显示的区域 — 可以从 Window.innerWidth 和 Window.innerHeight 参数获得）。

你会看到我们在这里串联了多个赋值表达式在一起,这样能更快地设置变量——这是完全正确的。

原始脚本最后的部分如下：

function random(min,max) { return Math.floor(Math.random()*(max-min)) + min; } function randomColor() { return 'rgb(' + random(0, 255) + ', ' + random(0, 255) + ', ' + random(0, 255) + ')'; }

第一个函数为我们生成一个 min 至 max 之间的随机整数，第二个函数为我们生成一个随机的颜色值。

为程序中的小球建立模型

我们的项目中会有很多小球在屏幕上跳来跳去。因此这些小球会以相同的方式运作，从而我们可以通过一个对象实例化它们。首先，我们将下面的构造器加入到代码的底部。

function Ball(x, y, velX, velY, color, size) { this.x = x; this.y = y; this.velX = velX; this.velY = velY; this.color = color; this.size = size; }

这个构造器中定义了每个小球需要的参数：

x 和 y 坐标 —— 小球在屏幕上最开始时候的坐标。坐标的范围从 0 （左上角）到浏览器视口的宽和高（右下角）。水平和竖直速度（velX 和 velY）—— 我们会给每个小球一个水平和竖直速度。实际上，当我们让这些球开始运动时候，每过一帧都会给小球的 x 和 y 坐标加一次这些值。color —— 每一个小球会有自己的颜色。size —— 每一个小球会有自己的大小 — 也就是小球的半径，以像素为单位。

这里说明了小球的属性，那么方法呢？别忘了我们要让小球动起来。

画小球

首先给小球的原型加上 draw() 方法：

Ball.prototype.draw = function() { ctx.beginPath(); ctx.fillStyle = this.color; ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI); ctx.fill(); }

通过使用这个函数，通过使用我们之前定义的 ctx 对象的方法，我们就可以让在屏幕上画出小球了。ctx 的内容区域就像是一张纸，现在我们就可以命令我们的笔画一点东西。

首先，我们使用 beginPath() 来声明我们现在要开始在纸上画一个图形了。然后，我们使用 fillStyle 来定义这个图形的颜色 — 这个值正是小球的颜色属性。接下来，我们使用 arc() 方法来在纸上画出一段圆弧。有这些参数： x 和 y 是圆弧的中心的坐标 —— 也就是小球的中心坐标。圆弧的半径 —— 小球的半径。最后两个参数是开始和结束，也就是圆弧对应的夹角，单位以弧度表示。这里我们用的是 0 和 2 * PI，也就是 360 度（如果你设置成 0 和 1 * PI，则只会出现一个半圆，也就是 180 度）最后，我们使用 fill() 方法，也就是声明我们结束了以 beginPath()开始的绘画，并且使用我们之前设置的颜色进行填充。

现在你已经可以测试你的对象了。

保存代码，将 HTML 加载到浏览器中。打开浏览器中的 JavaScript 控制台，刷新页面，从而画布可以根据可视的区域调整自己的大小。通过下面的代码创建一个小球实例。 let testBall = new Ball(50, 100, 4, 4, 'blue', 10); 你可以调用实例的这些属性。 testBall.x testBall.size testBall.color testBall.draw() 当你键入最后一行的时候，你会在你的画布上看到一个小球被画出来了。更新小球的数据

我们可以在一个固定位置画出小球，但是他们不会动，我们需要一个函数来更新一些东西。在 JavaScript 文件底部加上下面的代码，也就是给小球原型加上一个 update() 方法。

Ball.prototype.update = function() { if ((this.x + this.size) >= width) { this.velX = -(this.velX); } if ((this.x - this.size) = height) { this.velY = -(this.velY); } if ((this.y - this.size)

【本文地址】

JavaScript(十一)

JavaScript(十一)

今日新闻

推荐新闻