37-JavaScript-DOM-小游戏-小球碰撞后折返

本文主要是介绍37-JavaScript-DOM-小游戏-小球碰撞后折返，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

参考: Cascading Style Sheet 2.0 中文手册_.chm

1. 背景图片

1) 语法

background-image : none | url (url)

2) 图片平铺,去重复

background-repeat : repeat | no-repeat | repeat-x | repeat-y

2. offsetWidth / offsetHeight

获取当前对象的实际width/height

3. body.clientWidth / body.clientHeigth

<body><div id="sunDiv"><img src="http://pic3.nipic.com/20090528/2739211_173235081_2.jpg" /></div></body>

<style type="text/css">body {/*背景图 501 * 500 pixels*/background-image: url(http://photo.enterdesk.com/2009-11-1/enterdesk.com-1A2153AC6853FFE52D9C0142F24AF424.jpg);/*背景图不够大时, 不重复*/background-repeat : no-repeat;
}#sunDiv {position: absolute;background-color: gray;
}#sunDiv img {width: 40px;height: 40px;
}</style>

<script type="text/javascript">// 两个方向var directX = 1; // x轴方向var directY = 1; // y轴方向// 太阳的坐标var sunX = 0;var sunY = 0;// 速度var interval = 10;var sunDiv; // divwindow.onload = function() {sunDiv = document.getElementById("sunDiv");window.setInterval(move, interval);}        function move() {// 改变坐标sunX += directX;sunY += directY;// 改变位置sunDiv.style.top = sunY + "px";sunDiv.style.left = sunX + "px";// 转变方向,if ( sunX + sunDiv.offsetWidth >= 520 || sunX < 0 ) {directX = - directX;}if ( sunY + sunDiv.offsetHeight >= 500 || sunY < 0 ) {directY = - directY;}        }</script>

这篇关于37-JavaScript-DOM-小游戏-小球碰撞后折返的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！