小球撞击游戏

最新推荐文章于 2017-11-18 17:16:41 发布

yanner_

最新推荐文章于 2017-11-18 17:16:41 发布

阅读量1.4k

点赞数

分类专栏： js小demo 文章标签： dom

本文链接：https://blog.csdn.net/yanner_/article/details/78295539

版权

js小demo 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

说明：小球会在屏幕上自动移动，当碰到边缘时会反弹回去继续移动。

<html>
<head>
<title>小太阳</title>
<script language="javascript" type="text/javascript">
    //全局变量定两个方向
    directX=1;//x轴方向
    directY=1;//y轴方向
    sunX=0;//太阳坐标
    sunY=0;
function sunMove(){
    sunX+=directX;
    sunY+=directY;
    //修改div的left top
    sundiv.style.top=sunY+"px";
    sundiv.style.left=sunX+"px";
    //判断什么时候改变方向
    //x方向(offsetWidth可以返回当前这个对象事件宽度)
    if(sunX+sundiv.offsetWidth>=document.body.clientWidth||sunX<=0){
        directX=-directX;
    }
    if(sunY+sundiv.offsetHeight>=document.body.clientHeight||sunY<=0){
        directY=-directY;
    }
}

setInterval("sunMove()",10);

</script>
</head>
<body style="background-image: url('1.jpg')"> 
<div id="sundiv" style="position:absolute">
<img src="sun.png"/>
</div>
</body>
</html>

yanner_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
小球撞击游戏

说明：小球会在屏幕上自动移动，当碰到边缘时会反弹回去继续移动。<html><head><title>小太阳</title><script language="javascript" type="text/javascript"> //全局变量定两个方向 directX=1;//x轴方向 directY=1;//y轴方向 sunX=0;//太阳坐标 sun
复制链接

扫一扫