javascript 小游戏:可爱的草莓

来源：互联网发布：java对本岗位的理解编辑：程序博客网时间：2024/04/20 19:59

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=GB18030">
        <title>Insert title here</title>
  <script type="text/javascript">
   /*
    * 小游戏:可爱的草莓 ,点击下载图片
    */
   onload = function(){
    setTimeout(fun, 100);  // 页面加载后延迟100毫秒再执行, 避免因为无法获取宽度高度而造成的图片抖动
   }

   function fun(){
    var ad = document.getElementById("ad");
    var width = document.documentElement.clientWidth;  // 浏览器窗口宽度
    var height = document.documentElement.clientHeight;  // 浏览器窗口高度

    var id = setInterval(move, 20);  // 每隔20毫秒移动一次

    var x = 0;  // 图片的x轴坐标
    var y = 0;  // 图片的y轴坐标
    var xStep = 3; // x轴每次移动的距离
    var yStep = 3; // y轴每次移动的距离

    function move(){
     x += xStep;
     y += yStep;

     if(y + ad.height > height || y < 0)  // 如果超出边界, 向反方向移动
      yStep *= -1;
     if(x + ad.width > width || x < 0)
      xStep *= -1;

     ad.style.left = x + "px";  // 改变图片的x轴位置
     ad.style.top = y + "px";  // 改变图片的y轴位置
    }

    ad.onmouseover = function(){
     clearInterval(id);
    }
    ad.onmouseout = function(){
     id = setInterval(move, 20);
    }
    ad.onclick = function(){   // 鼠标点击广告时删除, 并且打开新页面
     ad.parentNode.removeChild(ad);
     open("img.html", "_blank", "height=336,width=336,status=no,toolbar=no,menubar=no,location=no,left=300,top=100");
    }
   }
  </script>
    </head>
    <body>
    <img id="ad" src="../img/mei.gif" style="position:absolute; left:0px; top:0px; cursor:pointer;">
    </body>
</html>