本章为上一章弹跳球进阶练习版，请先根据要求自行完成代码。

项目简介

我们的弹球 demo 很有趣, 但是现在我们想让它更具有互动性，我们为它添加一个由玩家控制的“恶魔圈”，如果恶魔圈抓到弹球会把它会吃掉。我们还想测验你面向对象的水平，首先创建一个通用 Shape() 对象，然后由它派生出弹球和恶魔圈。最后，我们为 demo 添加一个计分器来记录剩下的球数。

程序最终会像这样：

步骤

以下各节介绍你需要完成的步骤。

创建我们的新对象

首先，改变你现有的构造器 Ball() 使其成为构造器 Shape() 并添加一个新的构造器 Ball() ：

构造器 Shape() 应该像构造器 Ball() 那样的方式定义 x, y, velX, 和 velY 属性，但不包括 color 和 size 。
还应该定义一个叫 exists 的新属性，用来标记球是否存在于程序中（没有被恶魔圈吃掉）。这应该是一个布尔型（(true/false）。
构造器 Ball() 应该从构造器 Shape() 继承 x,y, velX, velY,和 exists 属性。
构造器 Ball() 还应该像最初的构造器 Ball() 那样定义一个 color 和一个 size 属性。
请记得给构造器 Ball() 的 prototype 和 constructor 属性设置适当的值。

draw(), update(), 和 collisionDetect() 方法定义应保持不变。

你还需要为 new Ball() { ... } 构造器添加第五个参数—— exists，且值为 true。

到这里，尝试重新加载代码（运行程序），程序以及重新设计的对象都应该像之前那样工作。

定义恶魔圈EvilCircle()

现在是时候来看看那个坏蛋了——恶魔圈 EvilCircle()! 我们的游戏中只会有一个恶魔圈，但我们仍然要使用继承自 Shape() 的构造器来定义它，这是为让你得到锻炼。之后你可能会想再添加一个由另一个玩家控制的恶魔圈到程序中，或者有几个电脑控制的恶魔圈。你可没法通过一个恶魔圈来掌管程序中的这个世界，但这个评估中就先只这么做吧。

EvilCircle() 构造器应该从 Shape() 继承 x, y, 和 exists ，velX 和 velY 要恒为 20。

可以这样做：Shape.call(this, x, y, 20, 20, exists);

它还应该定义自己的一些属性，如：

color —— 'white'
size —— 10
再次记得给你的 EvilCircle() 构造器的传递的参数中定义你继承的属性，并且给 prototype 和 constructor 属性设置适当的值。

定义 EvilCircle()的方法

EvilCircle() 应该有以下四个方法：

draw()

这个方法和 Ball()'s draw() 方法有着相同的目的：它们把都是对象的实例画在画布上（canvas）。它们实现的方式差不多，所以你可以先复制 Ball.prototype.draw 的定义。然后你需要做下面的修改：

我们不想让恶魔圈是实心的，而是一个圈或者说是环。你可以通过将 fillStyle 和 fill() 修改为 strokeStyle 和 stroke() 而实现这个效果。
我们还想让这个圈更厚一点，从而使你能更好地辨认它。可以在调用 beginPath() 的后面给 lineWidth 赋值实现这个效果。（赋值为 3 就可以了）

checkBounds()

这个方法和 Ball() 的 update() 函数做相同的事情—— 查看恶魔圈是否将要超出屏幕的边界，并且禁止它超出。同样，你可以直接复制 Ball.prototype.update 的定义, 但是你需要做一些修改：

删除最后两行 — 我们不想要在每一帧中自动的更新恶魔圈的位置，因为我们会以下面所述的方式移动它。
在 if() 语句中，如果检测为真（即小恶魔圈超出边界），我们不需要更新 velX/velY；取而代之的是，我们想要修改 x/y 的值，使恶魔圈稍微地弹回屏幕。增加或减去（根据实际判断）恶魔圈 size 的值即可实现。

setControls()

这个方法将会一个 onkeydown 的事件监听器给 window 对象，这样当特定的键盘按键按下的时候，我们就可以移动恶魔圈。下面的代码块应该放在方法的定义里：

window.onkeydown = e => {switch(e.key) {case 'a':this.x -= this.velX;break;case 'd':this.x += this.velX;break;case 'w':this.y -= this.velY;break;case 's':this.y += this.velY;break;}
};

所以当一个按键按下时，事件对象的 key 属性就可以请求到按下的按键值。如果是代码中那四个指定的键值之一，那么恶魔圈将会左右上下的移动。

collisionDetect()

这个方法和 Ball()'s collisionDetect() 方法很相似，所以你可以从它那里复制过来作为新方法的基础。但有一些不同之处：

在外层的 if 语句中，你不需要再检验循环到的小球是否是当前 collisionDetect() 所在的对象 — 因为它不再是一个小球了，它是恶魔圈！而是检查小球是否存在（你可以通过哪个属性实现这个呢？）。如果小球不存在，说明它已经被恶魔圈吃掉了，那么就不需要再检测它是否与恶魔圈碰撞了。
在里层的 if 语句中，你不再需要在碰撞被检测到时去改变对象的颜色 — 而是需要将与恶魔圈发生碰撞的小球设置为不存在（再次提问，你觉得你该怎么实现呢？）。

把恶魔圈带到程序中

现在我们已经定义了恶魔圈，我们需要让它显示到我们的屏幕中。为了做这件事，你需要修改一下 loop() 函数：

首先，创建一个新的恶魔圈的对象实例（指定必需的参数），然后调用它的 setControls() 方法。这两件事你只需要做一次，不需要放在 loop 的循环中。
在你每一次遍历小球并调用 draw(), update(), 和 collisionDetect() 函数的地方进行修改，使这些函数只会在小球存在时被调用。
在每个 loop 的循环中调用恶魔圈实例的方法 draw(), checkBounds(), 和collisionDetect() 。

计算得分

为了计算得分，需按照以下步骤：

在你的HTML文件中添加一个 <p> 元素到 <h1> 元素的下面，其中包含文本 “还剩多少个球”。
在你的CSS文件中，添加下面的代码到底部：

p {position: absolute;margin: 0;top: 35px;right: 5px;color: #aaa;
}

在你的 JavaScript 文件中，做下列的修改：

创建一个变量存储段落的引用。
以同样的方式在屏幕上显示小球的数量。
增加球数并在每次将球添加到屏幕里时显示更新的球数量。
减少球数并在每次恶魔吃球时显示更新的球数（因为被吃掉的球不存在了）

完整代码

// 设置画布const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');const width = canvas.width = window.innerWidth;
const height = canvas.height = window.innerHeight;const para = document.querySelector('p');
// 生成随机数的函数function random(min,max) {const num = Math.floor(Math.random() * (max - min)) + min;return num;
}function randomColor() {return 'rgb(' +random(0, 255) + ', ' +random(0, 255) + ', ' +random(0, 255) + ')';
}function Shape(x, y, velX, velY, exists) {this.x = x;this.y = y; this.velX = velX;this.velY = velY;this.exists = exists;
}function Ball(x, y, velX, velY, exists, color, size) {Shape.call(this, x, y, velX, velY, exists);this.color = color;this.size = size;
}Ball.prototype.draw = function() {ctx.beginPath();ctx.fillStyle = this.color;ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);ctx.fill();
}Ball.prototype.update = function() {if ((this.x + this.size) >= width) {this.velX = -(this.velX);}if ((this.x - this.size) <= 0) {this.velX = -(this.velX);}if ((this.y + this.size) >= height) {this.velY = -(this.velY);}if ((this.y - this.size) <= 0) {this.velY = -(this.velY);}this.x += this.velX;this.y += this.velY;}let balls = [];let balls_count = 25while (balls.length < balls_count) {let size = random(10, 20);let ball = new Ball(// 为避免绘制错误，球至少离画布边缘球本身一倍宽度的距离random(0 + size, width - size),random(0 + size, height - size),random(-7, 7),random(-7, 7),true,randomColor(),size);balls.push(ball);
}Ball.prototype.collisionDetect = function() {for (let j = 0; j < balls.length; j++) {if (this !== balls[j] && balls[j].exists === true) {const dx = this.x - balls[j].x;const dy = this.y - balls[j].y;const distance = Math.sqrt(dx * dx + dy * dy);if (distance < this.size + balls[j].size) {balls[j].color = this.color = randomColor();}}}
}function EvilCircle(x, y, velX, velY, exists, color, size) {Shape.call(this, x, y, velX, velY, exists);this.color = color;this.size = size;
}EvilCircle.prototype.draw = function() {ctx.beginPath();ctx.lineWidth = 3;ctx.strokeStyle = this.color;ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);ctx.stroke();
}EvilCircle.prototype.checkBounds = function() {if ((this.x + this.size) >= width) {this.x -= this.size;}if ((this.x - this.size) <= 0) {this.x += this.size;}if ((this.y + this.size) >= height) {this.y -= this.size;}if ((this.y - this.size) <= 0) {this.y += this.size;}
}EvilCircle.prototype.setControls = function() {window.onkeydown = e => {switch(e.key) {case 'a':this.x -= this.velX;break;case 'd':this.x += this.velX;break;case 'w':this.y -= this.velY;break;case 's':this.y += this.velY;break;}};
}EvilCircle.prototype.collisionDetect = function() {for (let j = 0; j < balls.length; j++) {if (balls[j].exists === true){const dx = this.x - balls[j].x;const dy = this.y - balls[j].y;const distance = Math.sqrt(dx * dx + dy * dy);if (distance < this.size + balls[j].size) {balls[j].exists = false;balls_count --;para.textContent = "还剩" + balls_count + "个球";}}}
}let size = 10;
evilcircle = new EvilCircle( random(0 + size, width - size),
random(0 + size, height - size),
5,
5,
true,
"rgb(255,255,255)",
size
);function loop() {ctx.fillStyle = 'rgba(0, 0, 0, 0.25)';ctx.fillRect(0, 0, width, height);evilcircle.draw();evilcircle.setControls();evilcircle.checkBounds();evilcircle.collisionDetect();for (let i = 0; i < balls.length; i++) {if (balls[i].exists === true) {balls[i].draw();balls[i].update();balls[i].collisionDetect();}}requestAnimationFrame(loop);
}loop();

JavaScript(十二)——弹跳球进阶版相关推荐

最新首途影视视频网站源码/二十二套带后台版全开源无加密源码
源码简介: 最新首途二十二套带后台版全开源无加密源码菜单填写格式:MyTheme主题,/template/mytheme/admin/默认账号:admin默认密码:admin 下载链接网盘源码 ...
互动媒体技术作业——十二个“一”扩展版
将十二个"一"设想为人物角色/事物 --十二个异性追求者之扩展版本开局放个图(懂我意思吧 ) 编号 1 2 3 4 5 6 7 8 9 10 11 12 1 1号异性:(两 ...
十二个球称三次C语言编程,十二个球,有一个不知轻重,现有一个天平,称三次,找出此球!...
平均分成A.B.C三组,每组4个: 第一秤:A.B两组先分别放天平左右: 情况一:平衡.则问题出在C组,A.B组共8个为标准球. 第二秤用3个标准球和C组的3个球对比, 如果第二秤平衡,剩下的一个就是 ...
python基础学习（十二）变量进阶
目录 1. 变量的引用 1.1 引用的概念 1.2 变量引用的实例 1.3 函数的参数和返回值的传递 2. 可变和不可变类型哈希 (hash) 3. 局部变量和全局变量 3.1 局部变量 3.2 ...
第十二：Pytest进阶之配置文件
1.Pytest配置文件能够改变Pytest框架代码的运行规则,比如修改Pytest收集用例的规则,添加命令行参数等等! 2.pytest --help:通过命令pytest --help查看配置文件 ...
Python之基础详解（十二）：进阶，用pyecharts绘制世界地图、玫瑰图、雷达图
我之前发过一篇博文基本讲解了基本绘制地图的方法. 我这里打算直接调用api来创建实时动态地图,并且分析数据绘制了玫瑰图,雷达图. 步骤配套资源下载: 第一步:配置环境第二步:爬取数据第三步:创建 ...
c语言中编程称量十二个小球的质量,c语言题：现有十二个小球，其中一个小球的重量与其... 有12个外观相同的小球，其中11个是标准球，质量完......
导航:网站首页 > c语言题:现有十二个小球,其中一个小球的重量与其... 有12个外观相同的小球,其中11个是标准球,质量完... c语言题:现有十二个小球,其中一个小球的重量与其... 有1 ...
JavaScript 编程精解中文第三版十二、项目：编程语言
十二.项目:编程语言原文:Project: A Programming Language 译者:飞龙协议:CC BY-NC-SA 4.0 自豪地采用谷歌翻译部分参考了<JavaScript ...
项目十二做好计算机维护,电脑组装与维护教学课件项目十二电脑组装和维护进阶.ppt...
<电脑组装与维护教学课件项目十二电脑组装和维护进阶.ppt>由会员分享,可在线阅读,更多相关<电脑组装与维护教学课件项目十二电脑组装和维护进阶.ppt(33页珍藏版)> ...

JavaScript(十二)——弹跳球进阶版