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