canvas碰撞检测3

来源：互联网发布：nodejs 解析json数据编辑：程序博客网时间：2024/05/10 03:20

<!DOCTYPE html>

<html>

<head>

<metacharset="UTF-8">

<styletype="text/css">

margin:0;

padding:0;

}

</style>

</head>

<body>

<canvasid="canvas" width="500" height="500"></canvas>

<scripttype="text/javascript">

varcanvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

var rect1 = {

x:100,

y:100,

w:50,

h:50,

color:'palegreen'

}

var rect2 = {

x:200,

y:200,

w:100,

h:100,

color:'deeppink'

}

var rects = [rect1,rect2];

functiondrawRect(x,y){

for(var i = 0; i< rects.length; i++) {

ctx.beginPath();

ctx.fillStyle= rects[i].color;

ctx.rect(rects[i].x,rects[i].y,rects[i].w,rects[i].h);

ctx.fill();

if(ctx.isPointInPath(x,y)) {

vara = i;

}

returna;

}

drawRect();

canvas.onmousedown= function(){

vari = drawRect(event.clientX,event.clientY);

vardisx = event.clientX - rects[i].x;

vardisy = event.clientY - rects[i].y;

canvas.onmousemove= function(e){

varev = e || window.event;

rects[i].x= ev.clientX - disx;

rects[i].y= ev.clientY - disy;

ctx.clearRect(0,0,canvas.width,canvas.height);

drawRect(ev.clientX,ev.clientY);

pengZhuang(rect1,rect2);

}

canvas.onmouseup= function(){

canvas.onmousemove= null;

}

functionpengZhuang(obj1,obj2){

vardisX = obj1.w / 2 + obj2.w /2;

vardisY = obj1.h / 2 + obj2.h /2;

varX = Math.abs((obj1.x + obj1.w/ 2) - (obj2.x + obj2.w / 2));

varY = Math.abs((obj1.y + obj1.h/ 2) - (obj2.y + obj2.h / 2));

if(X <= disX && Y <= disY) {

alert("撞上了");

}

</script>

</body>

</html>

0 0