<!DOCTYPE html>
<html>
<head>
<title>防止重叠</title>
<meta charset="utf-8"/>
<style>
#canvas1{
background-color:black;}
#div1{
float:left;}
#div2{
width:350px;
height:150px;
background-color:#999999;
margin-left:10px;
padding-left:5px;
padding-top:5px;
float:left;}
</style>
</head>
<body>
<div id="div1">
<canvas id="canvas1" width="300px" height="200px"></canvas>
</div>
<div id="div2">
</div>
<script>
var oCan=document.getElementById('canvas1');
var cxt=oCan.getContext('2d');
var rects=new Array(4);
var colors=new Array("#CBD2F1","#544FE8","#F0F0CC","#C9F2DA");
for(var i=0;i<rects.length;i++){
rects[i]=new oRect(i*90,0,2,colors[i]);
}
flashMap();
function flashMap(){
cxt.clearRect(0,0,300,200);
for(var i=0;i<rects.length;i++){
drawerRect(rects[i]);
}
game();
}
function oRect(x,y,direct,color){
this.x=x;
this.y=y;
this.direct=direct;
this.color=color;
this.cout=5;
this.speed=2;
this.iTouch=function()
{
switch(this.direct)
{
case 0:
for(i=0;i<rects.length;i++)
{
var et=rects[i];
if(et!=this)
{
if(et.direct==0||et.direct==2)
{
if(this.x>et.x+20||this.x+20<et.x||this.y-this.speed>et.y+30||this.y+30<et.y)
{
return true;
}
}
if(et.direct==3||et.direct==1)
{
if(this.x>et.x+30||this.x+20<et.x||this.y-this.speed>et.y+20||this.y+30<et.y)
{
return true;
}
}
}
}
break;
case 1:
for(i=0;i<rects.length;i++)
{
var et=rects[i];
if(et!=this)
{
if(et.direct==0||et.direct==2)
{
if(this.x>et.x+20||this.x+30+this.speed<et.x||this.y>et.y+30||this.y+20<et.y)
{
return true;
}
}
if(et.direct==3||et.direct==1)
{
if(this.x>et.x+30||this.x+30+this.speed<et.x||this.y>et.y+20||this.y+20<et.y)
{
return true;
}
}
}
}
break;
case 2:
for(i=0;i<rects.length;i++)
{
var et=rects[i];
if(et!=this)
{
if(et.direct==0||et.direct==2)
{
if(this.x>et.x+20||this.x+20<et.x||this.y>et.y+30||this.y+30+this.speed<et.y)
{
return true;
}
}
if(et.direct==3||et.direct==1)
{
if(this.x>et.x+30||this.x+20<et.x||this.y>et.y+20||this.y+30+this.speed<et.y)
{
return true;
}
}
}
}
break;
case 3:
for(i=0;i<rects.length;i++)
{
var et=rects[i];
if(et!=this)
{
if(et.direct==0||et.direct==2)
{
if(this.x-this.speed>et.x+20||this.x+30<et.x||this.y>et.y+30||this.y+20<et.y)
{
return true;
}
}
if(et.direct==3||et.direct==1)
{
if(this.x-this.speed>et.x+30||this.x+30<et.x||this.y>et.y+20||this.y+20<et.y)
{
return true;
}
}
}
}
break;
}
}
this.run=function()
{
switch(this.direct)
{
case 0://向上
if(this.y>0&&this.iTouch())
{
this.y-=this.speed;
}
break;
case 1://向右
if(this.x<280&&this.iTouch())
{
this.x+=this.speed;
}
break;
case 2://向下
if(this.y<180&&this.iTouch())
{
this.y+=this.speed;
}
break;
case 3://向左
if(this.x>0&&this.iTouch())
{
this.x-=this.speed;
}
break;
}
if(this.cout<=0){
this.cout=Math.round(Math.random()*10);
this.direct=Math.floor(Math.random()*3.9999999);
}
this.cout--;
}
}
function game(){
var str="矩形坐标为：<br/>";
for(var i=0;i<rects.length;i++){
str=str+"矩形"+(i+1)+"： x="+rects[i].x+" y="+rects[i].y+" direct="+rects[i].direct+" cout="+rects[i].cout+"<br/>";
}
document.getElementById('div2').innerHTML=str;
}
function drawerRect(iRect){
cxt.fillStyle=iRect.color;
switch(iRect.direct){
case 0:
case 2:
cxt.fillRect(iRect.x,iRect.y,20,30);
cxt.fill();
break;
case 1:
case 3:
cxt.fillRect(iRect.x,iRect.y,30,20);
cxt.fill();
break;
}
}
window.setInterval("flashMap()",100);
for(var i=0;i<rects.length;i++){
window.setInterval("rects["+i+"].run()",100);
}
</script>
</body>
</html>
分享
