js去掉前后空格的函数_用p5.js来制作一个小恐龙游戏-CSDN博客

如果你用的是谷歌浏览器，一定对这只小恐龙很熟悉了。没有网络的时候，它就会出现。根据游戏设计者的说法，在今天这个互联网的时代，如果断网了，就如同是回到了原始的恐龙时代。

谷歌浏览器无网络时的恐龙游戏

接下来，我们就用p5.js来制作一个类似的恐龙小游戏。这里会继续使用面向对象的编程方法，也会用到类的概念。

第一步：添加文件

我们会发现这个游戏主要由三个部分组成。一个是我们可以控制的小恐龙，另一个是不断随机出现的障碍物，还有一个是不住移动的背景。背景可以最后再添加，我们先处理小恐龙和障碍物的部分。

在这里先添加两个JavaScript文件，一个是恐龙的dinosaur.js文件，另一个是障碍物仙人掌的cactus.js文件。具体操作是点击Sketch(草图)，再点击Add File(添加文件),输入文件名，再点击Add File 按钮。

然后，我们就会在左侧的草图文件管理器(Sketch Files)中看到这两个js文件。

然后需要把这两个js文件引用到html文件中，只有这样，在程序开始时它们才能够一起运行。打开html文件，我们会发现在body部分中已经有了引用sketch.js的语句，我们在这条语句下面再添加两条语句，如下：

第二步：编写恐龙部分的代码

打开dinosaur.js文件。新建一个恐龙Dinosaur的类，并定义它的属性和方法。代码如下：

class

这里是通过构造函数设置它的属性。恐龙类的属性有它的长，宽，横坐标，纵坐标，竖直方向的速度和重力参数。恐龙类的方法有跳跃，移动和显示。

这里的恐龙与之前做的乒乓球游戏中的乒乓球很相似，它们的垂直速度都会受到重力的影响。

接着编写主程序的代码，打开sketch.js文件。定义一些需要用到的变量，定义一个恐龙类的对象，调用恐龙类的方法来绘制出恐龙，并且通过键盘来控制它。以下是代码：

function

此时，如果按下空格键，恐龙就会跳起来，然后因为重力的作用，它会再落下来。如下图：

第三步：编写仙人掌部分的代码

打开cactus.js文件。新建一个仙人掌Cactus的类，并定义它的属性和方法。代码如下：

class

仙人掌类的属性有它的长，宽，横坐标，纵坐标。仙人掌类的方法有移动和显示。这里的仙人掌与之前做的乒乓球游戏中的板子很相似。它们都会一直朝着一个方向匀速的移动，给人产生一种错觉，觉的是乒乓球和恐龙在移动。

接着在sketch.js文件中，添加仙人掌的代码。定义一个存储仙人掌类的数组，定义一个仙人掌类的对象，隔一段时间在数组中添加一个仙人掌的对象。在绘制部分，调用仙人掌类的方法来让仙人掌移动和显示。以下是代码：

var

这时运行程序后，结果如下：

第四步：添加碰撞检测

我们可以看到现在恐龙和仙人掌相遇后只是路过，并没有碰撞。要想让它们发生碰撞，可以使用p5.js的一个名为p5.collide2D的附加函数库(library)，在这个函数库中有一系列用来检测2维几何形状碰撞的函数。我们只需要引入这个函数库，然后调用里面的函数就可以检测出两个图形是否发生了碰撞，而不必自己重写这些函数。

打开p5.js的官网，点击菜单栏中的程式库。可以在附加程式库中找到p5.collide2D。

打开这个函数库，我们会发现里面有很多种检测图形碰撞的函数。在这个恐龙小游戏中，可以把恐龙和仙人掌看作是两个矩形，因此我们选择其中用来检测两个矩形碰撞的 collideRectRect()这个函数。它有八个参数，分别是两个矩形的横坐标、纵坐标、宽和高。如果两个矩形发生了碰撞，这个函数的逻辑值为真，否则为假。

下面我们就要把p5.collide2D这个函数库引用到我们的代码中。一种方法是把这个函数库下载后，添加到代码中。另一种是把这个函数库的链接引入代码中。这里我们用第二种方法。首先要生成函数库的链接。通过jsDelivr这个免费的函数库托管网站，我们可以把这个在GitHub上的函数库存储在jsDelivr的服务器上。具体操作是先打开 p5.collide2d.min.js

这个函数库文件，我们在文件的开头会看到这些介绍的信息。

/*
Repo: https://github.com/bmoren/p5.collide2D/
Created by http://benmoren.com
Some functions and code modified version from http://www.jeffreythompson.org/collision-detection
Version 0.6 | Nov 28th, 2018
CC BY-NC-SA 4.0
*/

我们重点关注其中的两个信息：Rope和Version。根据jsdelivr网站对GitHub中的函数库的书写规则，我们可以写出这个文件的网络地址：

https://cdn.jsdelivr.net/gh/bmoren/p5.collide2D@0.6/p5.collide2d.min.js

然后把这个链接引入到html文件的head标签中：

接下来要给恐龙类添加一个碰撞检测的方法。通过它来判断两者是否发生碰撞。

class

接着在sketch.js文件中，添加碰撞检测的代码。我们需要检测恐龙与出现的每一个仙人掌对象是否发生了碰撞，一旦与其中的一个发生碰撞，就结束游戏。因此要对仙人掌类数组中的每个对象都进行判断，只需要在for循环语句中添加以下代码：

for

这时，再次运行程序，就会看到这样的结果：

当两个矩形相遇后，会发生碰撞，并且游戏结束。

第五步：添加恐龙和仙人掌的图片

首先准备几张恐龙的图片

然后把恐龙的图片添加到程序的文件管理器中。为了便于管理文件，我们可以先添加一个文件夹，具体操作是点击Sketch(草图)，再点击Add Folder(添加文件夹),输入文件夹名称，再点击Add Folder按钮。

把这五张图片添加到这个文件夹中。接着在sketch.js文件中，新建一个图片的数组，把这些图片加载到数组中。再新建一个用来记录是否发生碰撞的变量，一旦发生碰撞就显示第五张图片。最后调用恐龙类的方法，使恐龙在画布上显示出来。

//...

然后修改恐龙类的代码，添加一个图片的属性，把恐龙的宽和高设置为图片的宽和高。添加一个恐龙类的更新的方法，使恐龙的图片能够变化，产生动画的效果。最后修改恐龙类的显示方法，不再显示矩形，而是把图片显示出来。

class

运行代码后，可以看到恐龙动起来了，并且在跳跃和碰撞时，会显示不同的图片。

这里的恐龙和之前制作的赛马动画的马很像，使用的显示方法也相同，都是通过多张图片连续播放，实现动画效果，并且在不同的条件下，显示不同的图片。

接着添加仙人掌的图片

在主程序sketch.js文件中，新建一个图片的数组，并把这些图片加载到数组中。

var

然后修改仙人掌类的代码，添加一个图片的属性，把仙人掌的宽和高设置为图片的宽和高。最后修改仙人掌类的显示方法，不再显示矩形，而是把仙人掌数组中的每个仙人掌都依次在画布上显示出来。

class

这时运行代码后，可以看到有不同的仙人掌不断随机出现。

现在控制恐龙跳跃的是空格键，为了方便在手机上运行，我们需要再增加一个鼠标点击事件，来模拟手指点击屏幕的事件。在sketch.js文件中，添加下面几条语句。

function

第六步：添加翼龙的部分

1. 添加翼龙的图片

翼龙和仙人掌都属于障碍物，代码也比较相似。区别主要是翼龙有动画的效果，而仙人掌是静止的。在主程序sketch.js文件中，新建一个翼龙图片的数组，并把这些图片加载到数组中。

var

2. 添加翼龙的js文件，定义翼龙的类

在Sketch Files中添加一个翼龙的的bird.js文件,并把这个文件引用到index.html文件中。然后在bird.js文件中，新建一个名为bird的类，定义它的属性和方法。代码如下：

class

3.在主程序中添加翼龙的代码

定义一个存储翼龙类的数组，再定义一个翼龙类的对象，每隔一段时间在翼龙数组中添加一个翼龙的对象或者在仙人掌数组中添加一个仙人掌对象。为了增加代码的可读性，可以新建一个添加障碍物的函数，来控制添加仙人掌对象和翼龙对象。在绘制部分，调用翼龙类的方法来让翼龙移动和显示。并且添加碰撞检测，如果恐龙和翼龙发生碰撞，则游戏结束。以下是代码：

//...

运行代码后，可以看到会一直随机出现仙人掌和翼龙这样的障碍物。

第七步：添加背景图片

云彩图片

山的图片

地面图片

这三张图片作为游戏的背景图片。在游戏开始后，他们都会从右向左移动，给人一种恐龙向右跑的错觉。为了使背景图片可以无限循环地从右向左移动，这里用到一个小技巧。就是把原来的图片复制一份，然后拼接起来作为背景图片。这样背景图片的左半部分和右半部分是相同的，它的宽度是画布宽度的两倍。程序开始时，最初画布上是背景图片的左半部分，然后图片向左移动，直到它的左半部分完全移出画布，此时画布上是背景图片的右半部分，接着就让背景图片再次回到原来的位置，因为左右两部分完全相同，这样就可以无缝的衔接，实现背景图片一直从右向左移动的效果。

在主程序sketch.js文件中，新建云彩，山，地面图片的变量，并把这些图片加载到相应的变量中。还要新建这些图片位置的横坐标的变量，再新建一个背景图片的函数，通过控制图片的横坐标变量来控制图片的移动。最后在draw函数中添加这个背景图片的函数。

//...

此时运行代码，就可以看到背景图片会一直从右向左移动，给人一种恐龙在向右奔跑的错觉。

第八步：添加游戏得分

给游戏设置得分，恐龙每次通过一个障碍物，就得一分。可以通过给恐龙类添加一个得分的方法来实现。还需要给仙人掌类和翼龙类添加一个分数的属性。

class

class

class

然后在主程序中，定义一个得分的变量。并在draw函数中，调用恐龙类的得分方法。同时定义一个打印分数的函数，将当前的得分在画布上显示。

var

运行程序后，就可以看到在右上角有实时显示的分数

第九步：添加游戏界面

给游戏设置界面，包括游戏开始界面，游戏中的界面，游戏结束界面。在之前的乒乓球游戏中已经用到了这三个游戏界面，在此可以借鉴那些代码。

1.游戏开始界面

function

2.游戏结束界面

function

3.游戏中的界面

function

接下来需要定义一个表示界面的变量，还要再定义几个函数: 游戏开始的函数、结束的函数、重新开始的函数，通过它们来控制游戏的界面。使用鼠标的点击事件来开始游戏，控制恐龙跳跃以及重新开始游戏。最后使用draw函数来将这些界面显示出来。（将原来显示game over文字的地方，替换为显示游戏结束的界面。定义一个游戏最高分的变量，在游戏结束时，显示出最高分。）