一、效果

//游戏效果动图

该游戏模拟了自治智能体的群体运动和物体间的引力。玩家可通过鼠标操控小球群运动，鼠标移动越快，球体之间的距离越大，反之粒子会趋向于聚集到一起。游戏过程中会随机出现大小位置不同的吸引子，对群体粒子产生引力，小球一旦被吸引子吸入则消失。游戏通过操控群体粒子到达目标点来计分，所有粒子被吸引子吸入则游戏结束。

二、实现

1、粒子群的实现

单个粒子

小球会跟着鼠标的移动转换运动方向，当小球离鼠标距离很近时，小球受到鼠标位置的影响会变小。小球下一帧速度的方向是由小球当前速度方向的向量与小球位置与鼠标位置之间的向量相减产生的，为了防止小球移动的速度过大，设定了一个maxspeed，限制了小球运动的最大速度，另外minspeed规定了小球与鼠标距离很近时的速度大小。
代码如下：

this.move=function()//移动位置计算
{           this.targetchange();op=this.valocity.sub(target);      op=op.normalize();if(target.mag()<50)op=op.mult(this.minspeed);elseop=op.mult(this.maxspeed);this.pos=this.pos.add(op);
}

targetchange()是为了让小球运动的更像一个生命体，每帧小球运动的目的地并不是完全指向鼠标的，而是在以鼠标为圆心的一定半径的圆内随机选择一个点。

//半径选择大一些的情况

群体粒子

当粒子数量从一变成几十时，如果只是简单的直接增加粒子数，而不增加别的力，粒子的运动会趋向于一条直线。

//一坨粒子的移动

这显然不是我们想要的效果，在现实生活中真的生物体的群体运动是会在一定程度上避免相互之间的碰撞的。
代码如下：

this.separate=function()//防止粒子间过于靠近
{    sum=createVector(0,0);      for(item in particles){        d=particles[item].pos.dist(this.pos);        other=createVector(particles[item].pos.x,particles[item].pos.y);        self=createVector(this.pos.x,this.pos.y);        maxd=map(this.force*this.force,25,400,0,0);        if(d<maxd&&d>0){          diff=self.sub(other);          diff=diff.normalize();          diff.div(d);          sum=sum.add(diff);      }}     return sum.normalize();  }

将粒子间的斥力和粒子向目的地运动的驱动力加权相加就可以接近我们想要的效果了：

  op=op.mult(0.6).add(sum.mult(0.4));

2、吸引子的实现

在游戏过程中，canvas上会随机出现大小不一的空心圆，粒子靠近它时会被其产生的引力影响，引力大小与半径有关，一旦玩家操控的所有的粒子都被吸引子吸入则游戏结束。
引力的大小与距离的平方成反比，代码如下：

  this.addforce=function(newc)//增加引力  {    dir=createVector(newc.pos.x,newc.pos.y);   self=createVector(this.pos.x,this.pos.y);    dir=dir.sub(self);    lens=dir.mag();    dir=dir.normalize();    m=(k*this.weight)/(lens*lens);    f=dir.mult(m).div(this.weight);    this.pos=this.pos.add(f);  }

另外在吸引子消失的时候增加了另一种粒子，粒子从里到外半径逐渐变小，制造消散的效果。

再为吸引子增加出现和旋转的动效

3、其他

在index.html页面增添网页上方说明文字和开始按钮响应，增添游戏开始前的倒计时提示和失败后的提示。

三、参考资料

《代码本色》ch1、ch2、ch4、ch6

基于p5.js的物理学模拟小游戏相关推荐

php 设计五子棋游戏,基于js+canvas实现五子棋小游戏
本文实例为大家分享了js+canvas实现五子棋小游戏的具体代码,供大家参考,具体内容如下效果展示: 源码展示: 五子棋 * { margin: 0; padding: 0; } body { ma ...
基于C语言的信息管理系统和小游戏
基于C语言的信息管理系统和小游戏一.课设题本次课程设计有以两类题可以选择: 信息管理系统: 即实现个基于控制台的信息管理系统,例如选课系统.图书馆系统.公司财务系统等等 ,除满增删查改等基本功能, ...
用代码来过端午节---基于HTML的端午节划龙舟小游戏
一.端午节习俗赛龙舟是中国端午节的习俗之一,也是端午节最重要的节日民俗活动之一. 关于赛龙舟的起源,有多种说法,有祭曹娥,祭屈原,祭水神或龙神等祭祀活动,其起源可追溯至战国时代. 赛龙舟先后传入邻国 ...
使用Pixi.js编写JavaScript网页小游戏
Pixi.js中文网https://pixijs.huashengweilai.com/PixiJSOfficial site for PixiJS, The HTML Creation Engine ...
Three.js初探之微信小游戏---第一篇
最近在捣鼓 Three.js 相关知识,同时觉得微信小游戏是个不错的试错场呢.不错,本项目就是为了试错而存在. 先来一张场景图, 这个格局是不是很眼熟,就是网页游戏2048的变版呢.乍一看,2D的呀 ...
一个基于p5.js的绘画系统
一个基于p5.js的绘画系统一.实现效果本系统基于p5.js完成,具有一般绘画系统的特点,作画者可以通过选择不同的笔刷完成自己的作品.作画者可以根据自己的需要选择静态或动态效果,在动态效果下可以看 ...
python弹球小游戏程序_Python基于Tkinter模块实现的弹球小游戏
本文实例讲述了Python基于Tkinter模块实现的弹球小游戏.分享给大家供大家参考,具体如下: #!usr/bin/python #-*- coding:utf-8 -*- from Tkinte ...
利用js写的见缝插针小游戏
利用js写的见缝插针小游戏今天给大家带来的就是一款叫做<见缝插针>的游戏.有空你就往里插,直到你无处可插!看你能过多少关! 游戏截图失败时代码如下 js代码 index.js 测试游 ...
JS实现简单农场小游戏
JS实现简单农场小游戏简介效果展示代码实现在线预览简介最近抽空写了一个简单的农场小游戏,比较简陋,目的只是为了练习js开发能力. 游戏界面顶部包含昵称.经验值.等级和金币信息展示.经验的获 ...

基于p5.js的物理学模拟小游戏