HTML5的canvas画布碰撞检测
 <!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+"&nbsp;&nbsp;y="+rects[i].y+"&nbsp;&nbsp;direct="+rects[i].direct+"&nbsp;&nbsp;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>

1个回答

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问