JAVAScript简单动画~移动方块~setInterval()~碰到边缘弹回

来源：互联网发布：多核优化软件编辑：程序博客网时间：2024/05/16 06:48

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>移动方块</title>
   <section>
   <canvas id="canvas" width="600" height="600"></canvas></section>
   </head>
   <body>
       <script type="text/javascript">
           function draw (id){
           //获取画布id
           var canvas =document.getElementById(id);
           if(canvas==null)
           return false;
           //获取上下文
           var cxt =canvas.getContext("2d");
           var interval=setInterval(function(){move(cxt);},10);
           }
           var x=100;//矩形的x坐标
           var y=100;//矩形的y坐标
           var mx=0;//值为0向右，值为0向左
           var my=0;//值为0向下，值为0向上
           var ml=10;//移动的长度
           var w=20;//矩形的宽
           var h=20;//矩形的高
           var cw=600;//画布的宽
           var ch=600;//画布的高

           function move(cxt){
              cxt.clearRect(0,0,600,600);//在给定的矩形内清除所有的像素为透明
              cxt.fillStyle="#EEEEFF";//把填充颜色设置为指定的颜色
              cxt.fillRect(0,0,600,600);//是用当前的填充风格填充指定的区域
              cxt.fillStyle="red";//把矩形设置为红色
              cxt.fillRect(x,y,w,h);//绘制矩形
           //判断是否到达边缘
           if(mx==0){
                  x=x+ml;//x坐标加上移动长度
                  if(x>cw-w){
                      mx=1;
                  }
              }else{
                  x=x-ml;
                  if(x<=0){
                      mx=0;
                  }
              }
                 if(my==0){
                  y=y+ml;
                  if(y>ch-h){
                      my=1;
                  }
              }else{
                  y=y-ml;
                  if(y<=0){
                      my=0;
                  }
              }
           }
           window.addEventListener("load",draw("canvas"),true);
       </script>
   </body>
</html>

0 0