怎么用html5实现迷宫游戏-创新互联

这篇文章主要介绍“怎么用html5实现迷宫游戏”，在日常操作中，相信很多人在怎么用html5实现迷宫游戏问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么用html5实现迷宫游戏”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

游戏效果图
 
通过鼠标拖拽在画布上添加墙壁，通过方向键控制多边形上下左右移动，遇到墙壁则无法前进。

需要解决的问题

鼠标按下，鼠标拖动，鼠标释放事件的检测
多边形的绘制
墙壁的绘制
多边形和墙壁的碰撞检测(实质上是圆和线段的相交判断)

MYCode:

代码如下:

难点

多边形和线段碰撞检测的方法
函数intersect()负责检测多边形和线段是否相交
记线段上一点p(x,y)
线段2个端点是(sx,sy)和(fx,fy)

记

dx=fx-sx

dy=fy-sy

x和y可以表示如下

x=sx+t*dx

y=sy+t*dy

要判断线段和多边形是否相交，转化为判断线段和多边形的外接圆是否相交
为此需要找到线段上离圆心o最近的一点p
如果|op|<圆的半径,则可以判断线段和圆相交。
否则不相交。

怎么找到线段上离圆心距离最近的点呢？

p点到o点的距离可以表示为

distance=sqrt((x-cx)*(x-cx)+(y-cy)*(y-cy));

代入

x=sx+t*dx和y=sy+t*dy

可以得到distance是一个关于t的函数

对此函数求导

求出函数值为0时对应的t值就可以得到距离圆心最近的点

到此，关于“怎么用html5实现迷宫游戏”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！