怎么用html5实现迷宫游戏

　　介绍

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

　　游戏效果图
怎么用html5实现迷宫游戏”>,<br/>通过鼠标拖拽在画布上添加墙壁,通过方向键控制多边形上下左右移动,遇到墙壁则无法前进。<br/> <br/> <强>需要解决的问题</强> <br/> <br/>鼠标按下,鼠标拖动,鼠标释放事件的检测<br/>多边形的绘制<br/>墙壁的绘制<br/>多边形和墙壁的碰撞检测(实质上是圆和线段的相交判断)<br/> <br/> <强> MYCode: <br/> </强> <br/> </p> <p>代码如下:</p> <p> <br/> & lt; html><br/> & lt; head><br/> & lt; title>迷宫& lt;/title><br/> & lt; script><br/> var canvas_width=900;<br/> var canvas_height=350;<br/> var ctx;<br/> var帆布;<br/> var一切=[];<br/> var cur_wall;<br/> var wall_width;<br/> var wall_style=皉gb (200、0200)“;;<br/> var墙壁=[];<br/> var in_motion=false;<br/> var=10单位;<br/>函数标记(sx, sy, rad style_string, n) <br/> {<br/>。sx=sx;<br/>。sy=sy;<br/>。rad=rad;<br/>。画=draw_token;<br/>。n=n;<br/>。角=(2 * Math.PI)/n;<br/>。=move_token移动;<br/>。fill_style=style_string;<br/>} <br/>函数draw_token()//绘制正n边形<br/> {<br/> ctx。fill_style=this.fill_style;<br/> ctx.beginPath ();<br/> var我;<br/> var rad=this.rad;<br/> ctx.moveTo(这一点。sx + rad * Math.cos (-0.5 * this.angle)。sy + rad * sin (-0.5 * this.angle));<br/> (i=1;我& lt;this.n;我+ +)<br/> ctx.lineTo(这一点。sx + rad *数学。因为((i - 0.5) * this.angle),这一点。sy + rad *数学。罪((i - 0.5) * this.angle));<br/> ctx.fill ();<br/>} <br/>函数move_token (dx, dy) <br/> {<br/>。sx +=dx;<br/>。sy +=dy;<br/> var我;<br/> var墙;<br/> (i=0;我& lt;walls.length;我+ +)<br/> {<br/>=墙墙[我];如果墙(相交(<br/>。sx,墙。sy,墙。外汇,墙。财政年度,这。sx,这。sy, this.rad)) <br/> {<br/>。sx -=dx;<br/>。sy -=dy;<br/>打破;<br/>} <br/>} <br/>} <br/>功能墙(sx, sy、外汇、财政年度,宽度,styleString) <br/> {<br/>。sx=sx;<br/>。sy=sy;<br/>。fx=外汇;<br/>。财政年度=年度;<br/>。宽度=宽度;<br/>。画=draw_line;<br/>。strokeStyle=styleString;<br/>} <br/>函数draw_line () <br/> {<br/> ctx。线宽=上;<br/> ctx。strokeStye=this.strokeStyle;<br/> ctx.beginPath ();<br/> ctx.moveTo(这一点。sx, this.sy);<br/> ctx.lineTo(这一点。外汇,this.fy);<br/> ctx.stroke ();<br/>} <br/>//<br/> var mypent=新令牌(100年,100年,20岁的“rgb (0, 0250)“, 5);<br/> everything.push (mypent);<br/> init()函数<br/> {<br/>帆布=. getelementbyid (“canvas");<br/> ctx=canvas.getContext (& # 39; 2 d # 39;);<br/>//注意<br/> canvas.addEventListener (& # 39; mousedown& # 39;, start_wall,假);<br/> canvas.addEventListener (& # 39; mousemove& # 39;, stretch_wall,假);<br/> canvas.addEventListener (& # 39; mouseup # 39;, finish_wall,假);<br/> window.addEventListener (& # 39; keydown # 39;, getkey_and_move,假);<br/> draw_all ();<br/>} <br/>函数start_wall (ev) <br/> {<br/> var mx;<br/> var我;如果(ev <br/>。layerX | |电动汽车。layerx==0) <br/> {<br/> mx=ev.layerX;<br/>我=ev.layerY;<br/>} <br/> else if (ev。offsetX | |电动汽车。offsetX==0) <br/> {<br/> mx=ev.offsetX;<br/>我=ev.offsetY;<br/>} <br/> cur_wall=new墙(mx, mx + 1 + 1, wall_width, wall_style);<br/> in_motion=true;<br/> everything.push (cur_wall);<br/> draw_all ();<br/>} <br/>函数stretch_wall (ev) <br/> {<br/>如果(in_motion) <br/> {<br/> var mx;<br/> var我;如果(ev <br/>。layerX | |电动汽车。layerX==0) <br/> {<br/> mx=ev.layerX;<br/>我=ev.layerY;<br/>} <br/> else if (ev。offsetX | |电动汽车。offsetX==0) <br/> {<br/> mx=ev.offsetX;<br/>我=ev.offsetY;<br/>} <br/> cur_wall。fx=mx;<br/> cur_wall。财政年度=我;<br/> draw_all ();<br/>} <br/>} <br/>函数finish_wall (ev) <br/> {<br/> in_motion=false;<br/> walls.push (cur_wall);<br/>} <br/>函数draw_all () <br/> {<br/> ctx。clearRect (0, 0, canvas_width canvas_height);<br/> var我;<br/> (i=0;我& lt;everything.length;我+ +)<br/> {<br/>[我]的一切却是();<br/>} <br/>} <br/>函数getkey_and_move(事件)<br/> {<br/> var键码;<br/>如果(事件==null) <br/> {<br/>键码=window.event.keyCode;<br/> window.event.preventDefault ();其他<br/>} <br/> <br/> {<br/>键码=event.keyCode;<br/> event.preventDefault ();<br/>} <br/>开关(键码)<br/> {<br/>案例37://<br/> mypent左箭头。移动(单位,0);<br/>打破;<br/> 38例://<br/> mypent箭。移动(0,单位);<br/>打破;<br/>案例39://右箭头<br/> mypent。(单位,0);<br/>打破;<br/>案例40:<br/> mypent。移动(0,单位);<br/>打破;<br/>默认值:<br/>//window.removeEventListener (& # 39; keydown # 39;, getkey_and_move,假);<h2 class=怎么用html5实现迷宫游戏