html5迷宫游戏(碰撞检测)实例一

1、通过鼠标拖拽在画布上添加墙壁，通过方向键控制多边形上下左右移动，遇到墙壁则无法前进，下面为大家介绍下需要解决的问题及具体的实现代码，感兴趣的朋友可以学习下需要解决的问题鼠标按下，鼠标拖动，鼠标释放事件的检测多边形的绘制墙壁的绘制 多边形和墙壁的碰撞检测(实质上是圆和线段的相交判断)MYCode:代码如下：& lt;html >& lt;head ><title>迷宫&t;/title>& t;script>var can vas_width = 900;var can vas_h

2、eight = 350;var ctx;var canvas;var everyth ing =;var cur_wall;var wall_width;var wall_style = "rgb(200,0,200)"var walls =;var in_motio n = false;var unit = 10;function Toke n( sx, sy, rad, style_stri ng, n)this.sx = sx;this.sy = sy;this.rad = rad;this.draw = draw_toke n;this. n = n;this.a

3、ngle = (2 * Math.PI) / n;this.move = move_toke n;this.fill_style = style_stri ng;function draw_token() 绘制正 n 边形ctx.fill_style = this.fill_style;ctx.begi nPath();var i;var rad = this.rad;ctx.moveTo(this.sx + rad * Math.cos(-0.5 * this.angle), this.sy + rad * Math.sin(-0.5 *this.a ngle);for (i = 1; i

4、& It; this. n; i+)ctx.li neTo(this.sx + rad * Math.cos(i - 0.5) * this.a ngle), this.sy + rad * Math.s in (i - 0.5) * this.a ngle);ctx.fill();fun ctio n move_toke n( dx, dy)this.sx += dx;this.sy += dy;var i;var wall;for (i = 0; i & It; walls.le ngth; i+)wall = wallsi;if (in tersect(wall.sx,

5、wall.sy, wall.fx, wall.fy, this.sx, this.sy, this.rad)this.sx -= dx;this.sy -= dy;break;function Wall(sx, sy, fx, fy, width, styleStri ng)this.sx = sx;this.sy = sy;this.fx = fx;this.fy = fy;this.width = width;this.draw = draw_li ne;this.strokeStyle = styleStri ng;fun ctio n draw_li ne()ctx.li neWidt

6、h = this.width;ctx.strokeStye = this.strokeStyle;ctx.begi nPath();ctx.moveTo(this.sx, this.sy);ctx.lin eTo(this.fx, this.fy);ctx.stroke();/notevar mype nt = new Toke n(100, 100, 20, "rgb(0,0,250)", 5);everythi ng.push(mype nt);fun ctio n in it()can vas = docume nt.getEleme ntByld("ca

7、nvas");ctx = can vas.getC on text('2d');/notecan vas.addEve ntListe ner('mousedow n', start_wall, false);can vas.addEve ntListe ner('mousemove', stretch_wall, false);can vas.addEve ntListe ner('mouseup', fini sh_wall, false);win dow.addEve ntListe ner('keydow

8、 n', getkey_a nd_move, false); draw_all();function start_wall(ev)var mx;var my;if (evayerX | evayerx = 0)mx = evayerX;my = evayerY;else if (ev.offsetX | ev.offsetX = 0)mx = ev.offsetX;my = ev.offsetY;cur_wall = new Wall(mx, my, mx + 1, my + 1, wall_width, wall_style); in_motio n = true;everythi

9、ng.push(cur_wall);draw_all();fun ctio n stretch_wall(ev)if (in _motio n)var mx;var my;if (ev.layerX | ev.layerX = 0)mx = evayerX;my = evayerY;else if (ev.offsetX | ev.offsetX = 0)mx = ev.offsetX;my = ev.offsetY;cur_wall.fx = mx;cur_wall.fy = my;draw_all();fun ctio n fini sh_wall(ev)in_motio n = fals

10、e;walls.push(cur_wall);fun ctio n draw_all()ctx.clearRect(O, 0, can vas_width, can vas_height);var i;for (i = 0; i < everyth ing.len gth; i+)everythi ngi.draw();fun ctio n getkey_a nd_move(eve nt)var keyCode;if (eve nt = n ull)keyCode = win dow.eve nt.keyCode;wi ndow.eve nt.preve ntDefault();

11、elsekeyCode = eve nt.keyCode;eve nt.preve ntDefault();switch (keyCode)case 37:/left arrowmype nt.move (-un it, 0);break;case 38:/up arrowmype nt.move (0, -un it);break;case 39:/right arrowmype nt.move (un it, 0);break;case 40:mype nt.move(0, un it);break;default:/wi ndow.removeEve ntListe ner('k

12、eydow n', getkey_a nd_move, false); draw_all();function in tersect(sx, sy, fx, fy, cx, cy, rad)var dx;var dy;var t;var rt;dx = fx - sx;dy = fy - sy;t = 0.0 - (sx - cx) * dx + (sy - cy) * dy) / (dx * dx + dy * dy);if (t & It; 0.0)t = 0.0;else if (t & gt; 1.0)t = 1.0;var dx1 = (sx + t * dx

13、) - cx;var dy1 = (sy + t * dy) - cy;var rt = dx1 * dx1 + dy1 * dy1;if (rt & It; rad * rad)return true;elsereturn false;& lt;/script >& t;body on Load="i nit();">& lt;ca nvas id="ca nvas" width="900" height="350"></ca nvas></body >& lt;/html>难点多边形和线段碰撞检测的方法函数intersect()负责检测多边形和线段是否相交记线段上一点 p(x,y)线段2个端点是(sx,sy)和(fx,fy)记dx=fx-sxdy=fy-syx和y可以表示如下x=sx+t*dxy=sy+t*dy要判断线段和多边形是否相交，转化为判断线段和多边形的