极客观点
项目管理
HarmonyOS
最好是JAVASCRIPT写出来的
我详细描述一下
图片中2D物体处于同一画布上，他们中矩形有宽和高，X和Y，圆形有半径和x,y；他们能移动能旋转，能发生碰撞。
请问怎么高效的判断他们是否碰撞？
----今早9/13 我花费30分钟写了简单的小例子。希望大神能帮我加个高效算法。晚辈也可以从学习
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<canvas width="400" height="400" id="can" style="border:1px #000 solid;"></canvas>黑色矩形是我，这也可以看成简单的的小游戏，希望想开发游戏晚辈有所启发
</body>
<script type="text/javascript">
function $(ele){
return document.getElementById(ele);
}
var canvas = $('can');
var ctx = canvas.getContext('2d');
var diren = [
{"type":"circle","x":100,"y":100,"radius":60},
{"type":"rect","x":230,"y":30,"w":40,"h":40,"angle":0},
{"type":"rect","x":130,"y":200,"w":40,"h":80,"angle":90}
];
var me = {"type":"rect","x":130,"y":200,"w":80,"h":50,"angle":70};
//以上是敌人和我的数据，有圆有方
//下面是画出来敌人
function draw_diren(){
for(var i=0,len=diren.length;i<len;i++){
switch (diren[i].type){
case "circle":
ctx.fillStyle="#538";
ctx.beginPath();
ctx.arc(diren[i].x,diren[i].y,diren[i].radius,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
break;
case "rect":
ctx.fillStyle="#ac1111";
ctx.save();
ctx.translate(diren[i].x+diren[i].w/2,diren[i].y+diren[i].h/2);//根据图形中心点旋转
ctx.rotate(diren[i].angle*Math.PI/180);
ctx.translate(-diren[i].x+diren[i].w/2,-diren[i].y+diren[i].h/2);
ctx.fillRect(diren[i].x,diren[i].y,diren[i].w,diren[i].h);
ctx.restore();
break;
}
}
}
draw_diren();
//接着画出自己
function draw_me(){
ctx.save();
ctx.fillStyle="#000000";
ctx.translate(me.x+me.w/2,me.y+me.h/2);//根据图形中心点旋转
ctx.rotate(me.angle*Math.PI/180);
ctx.translate(-me.x+me.w/2,-me.y+me.h/2);
ctx.fillRect(me.x,me.y,me.w,me.h);
ctx.restore();
}
draw_me();
//下面是简单的移动，没加碰撞检测，发生碰撞则不能向该方向移动
document.onkeydown = function(e){
switch (e.keyCode){
case 65:
me.x-=1;
ctx.clearRect(0,0,400,400);
draw_me();
draw_diren();
break;
case 68:
me.x+=1;
ctx.clearRect(0,0,400,400);
draw_me();
draw_diren();
break;
case 87:
me.y-=1;
ctx.clearRect(0,0,400,400);
draw_me();
draw_diren();
break;
case 83:
me.y+=1;
ctx.clearRect(0,0,400,400);
draw_me();
draw_diren();
break;
}
}
</script>
</html>
java
html5