js_撞球游戏

最新推荐文章于 2024-07-20 23:54:17 发布

KLeonard

最新推荐文章于 2024-07-20 23:54:17 发布

阅读量1.6k

点赞数

文章标签： dom javascript js html

本文链接：https://blog.csdn.net/gavin_john/article/details/21860871

版权

☛Web前端同时被 2 个专栏收录

38 篇文章 3 订阅

订阅专栏

------ JavaScript

21 篇文章 0 订阅

订阅专栏

小球在你的客户端浏览器不停地运动，碰到边缘后会反弹，基于此可以做出一些很小的网页游戏~

源码：

<html>
<head>
	<title>撞球游戏</title>	
	<script language="javasript" type="text/javascript">
		function $(id){
			return document.getElementById(id);	
		}
		
		//定两个方向
		var directX=1;//横向，初始化为1，表示增加
		var directY=1;//纵向
		var ballX=0;//小球坐标
		var ballY=0;
		var speed=1;//小球速度
		function move(){
			ballX+=speed*directX;
			ballY+=speed*directY;
			
			//修改
			var ball = $("ballDiv");
			ball.style.left=ballX+"px";
			ball.style.top=ballY+"px";
			
			//判断什么时候改变方向
			//offsetWidth可以返回当前这个对象的实际宽度
			if(ball.offsetWidth+ballX>=document.body.clientWidth||ballX<=0){
					directX= (-1) * directX;
			}
			if(ball.offsetHeight+ballY>=document.body.clientHeight||ballY<=0){
					directY = (-1) * directY;
			}
		}
		
		function speedUp(){
			speed++;	
		}
		setInterval("move()",5);
		setInterval("speedUp()",10000);//每隔10秒加速
		
	</script>
</head>	
	<body style="background-image:url('background.jpg');">
		<div id="ballDiv" style="position:absolute;">
			<img src="ball.png"/>
		</div>
	</body>
</html>

KLeonard

关注

0
点赞
踩
2

收藏

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

小球在你的客户端浏览器不停地运动，碰到边缘后会反弹，基于此可以做出一些很小的网页游戏~源码：撞球游戏 function $(id){ return document.getElementById(id); } //定两个方向 var directX=1;//横向，初始化为1，表示增加 var directY=1;//纵向 var ballX
复制链接

扫一扫