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

更新时间:2023-04-06 17:10:22 阅读：评论：0

游戏效果图

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

需要解决的问题

鼠标按下，鼠标拖动，鼠标释放事件的检测

多边形的绘制

墙壁的绘制

多边形和墙壁的碰撞检测(实质上是圆和线段的相交判断)

mycode:

复制代码代码如下:

<html>

<head>

<title>迷宫</title>

<script>

var canvas_width = 900;

var canvas_height = 350;

var ctx;

var canvas;

var everything = [];

var cur_wall;

var wall_width;

var wall_style = “rgb(200,0,200)”;

var walls = [];

var in_motion = fal;

var unit = 10;

function token(sx, sy, rad, style_string, n)

{

this.sx = sx;

this.sy = sy;

this.rad = rad;

this.draw = draw_token;

this.n = n;

this.angle = (2 * math.pi) / n;

this.move = move_token;

this.fill_style = style_string;

}

function draw_token()//绘制正n边形

{

ctx.fill_style = this.fill_style;

ctx.beginpath();

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.angle));

for (i = 1; i < this.n; i++)

ctx.lineto(this.sx + rad * math.cos((i – 0.5) * this.angle), this.sy + rad * math.sin((i – 0.5) * this.angle));

ctx.fill();

}

function move_token(dx, dy)

{

this.sx += dx;

this.sy += dy;

var i;

var wall;

for (i = 0; i < walls.length; i++)

{

wall = walls[i];

if (interct(wall.sx, 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, stylestring)
人教版高中数学教材
{

this.sx = sx;

this.sy = sy;

this.fx = fx;

this.fy = fy;

this.width = width;

this.draw = draw_line;

this.strokestyle = stylestring;

}

function draw_line()

{

ctx.linewidth = this.width;

ctx.strokestye = this.strokestyle;

ctx.beginpath();

ctx.moveto(this.sx, this.sy);

ctx.lineto(this.fx, this.fy);

ctx.stroke();

}

//note

var mypent = new token(100, 100, 20, “rgb(0,0,250)”, 5);

everything.push(mypent);

function init()

{

canvas = document.getelementbyid(“canvas”);

ctx = canvas.getcontext(‘2d’);

//note

canvas.addeventlistener(‘moudown’, start_wall, fal);

canvas.addeventlistener(‘moumove’, stretch_wall, fal);

canvas.addeventlistener(‘mouup’, finish_wall, fal);

window.addeventlistener(‘keydown’, getkey_and_move, fal);

draw_all();

}

function start_wall(ev)

{

var mx;

var my;

if (ev.layerx || ev.layerx == 0)

{

mx = ev.layerx;

my = ev.layery;

}

el if (ev.offtx || ev.offtx == 0)

{

mx = ev.offtx;

my = ev.offty;

}

cur_wall = new wall(mx, my, mx + 1, my +次北固山下次的意思 1, wall_width, wall_style);

in_motion = true;

everything.push(cur_wall);

draw_all();

}

function stretc今已亭亭如盖矣h_wall(ev)

{

if (in_motion)

{

var mx;

var my;

if (ev.layerx || ev.layerx == 0)

{

mx = ev.layerx;

my = ev.layery;

好二本大学}

el if (ev.offtx || ev.offtx == 0)

{

mx = ev.offtx;

my = ev.offty;

}

cur_wall.fx = mx;

cur_wall.fy = my;

draw_all();

}

}

function finish_wall(ev)

{

in_motion = fal;

walls.push(cur_wall);

}

function draw_all()

{

ctx.clearrect(0, 0, canvas_width, canvas_height);

var i;

for (i = 0; i < everything.length; i++)

{

everything[i].draw();

}

}

function getkey_and_move(event)

{

var keycode;

if (event == null)

{

keycode = window.event.keycode;

window.event.preventdefault();

}

el

{

keycode = event.keycode;

event.preventdefault();

}

switch (keycode)

{

ca 37://left arrow

mypent.move(-unit, 0);

break;

ca 38://up arrow

mypent.move(0, -unit);

break;

ca 39://right arrow

mypent.move(unit, 0);

break;

ca 40:

mypent.move(0, unit);

break;

default:

//window.removeeventlistener(‘keydown’, getkey_and_move, fal);

}

draw_all();

}

function interct(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 < 0.0)

{

t = 0.0;

}

el if (t > 1.0)

t = 1.0;

var dx1 = (sx + t * dx) – cx;

var dy1 = (sy + t * dy) – cy;

var rt = dx1 * dx1 + dy1 * dy1;

if (rt < rad * rad)

return true;

el

return fal;

}

</script>

<body onload=”init();”>

<canvas id=”canvas” width=”900″ height=”350″></canvas>

</body>

</html>