龟兔赛跑（网页版单机小游戏）

最新推荐文章于 2022-05-13 10:08:14 发布

老手er

最新推荐文章于 2022-05-13 10:08:14 发布

阅读量562

点赞数

分类专栏：游戏文章标签：基于js的事件处理网页版单机小游戏

本文链接：https://blog.csdn.net/qq_43608549/article/details/101098277

版权

游戏专栏收录该内容

4 篇文章 1 订阅

订阅专栏

简易的龟兔赛跑

基于js的事件监听处理，符合常理的文件结构，具体代码如下：

首先是index.html代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/mystyle.css" />
		<script type="text/javascript" src="js/myjs.js" ></script>
	</head>
	<body> 
	
		<div id="map">
			<input type="button" value="开始" onclick="start()"/>    
		</div>
		
		<img id="t" src="img/gui.gif" />
		<img id="r" src="img/tus.gif"/>
		
		<div id="result">
			兔子赢了
		</div>
		
	</body>
</html>

mystyle.css样式文件代码如下：

#map{
	width: 800px;
	height: 400px;
	position: absolute;
	/*background-image: url(../img/timg.jpg);*/
	left: 200px;
	top: 100px;
	border: solid 1px #90EE90;
	text-align: center;
	
}

img{
	display: none;
	position: absolute;
	width: 42px;
	height: 42px;
}

#result{
	font-size: 20px;
	font-family: "微软雅黑";
	
	margin-top: 50px;
	margin-left: 550px;
	display: none;
}

myjs.js事件处理响应代码如下：

var timeobj=-1;
function start(){
	if(timeobj!=-1){
		
		clearInterval(timeobj)
	}
	
	
	t = document.getElementById("t")
	r = document.getElementById("r")
	result = document.getElementById("result")

	
	t.style.left = '200px';
	t.style.top = '200px';
	
	
	
	r.style.left = '200px';
	r.style.top = '300px';
	
	t.style.display = 'block'
	r.style.display = 'block'
	result.style.display = "none"
	
	timeobj=setInterval(move,100)
	
}
function move(){
	t = document.getElementById("t")
	r = document.getElementById("r")

	
	rleft = r.style.left
	tleft = t.style.left
	
	rleft = Number.parseInt(rleft.split('px')[0])
	tleft = Number.parseInt(tleft.split('px')[0])
	
	rleft +=10
	tleft +=5
	
	t.style.left = tleft+'px';
	
	r.style.left = rleft+'px';
	
	if(rleft>=960 | tleft>=960){
		clearInterval(timeobj)
		timeobj = -1
		result.style.display = "block"		
	}
}

找两张你喜欢的图片去尝试一下吧！！！

老手er

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
龟兔赛跑（网页版单机小游戏）

简易的龟兔赛跑基于js的事件监听处理，符合常理的文件结构，具体代码如下：首先是index.html代码：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href=...
复制链接

扫一扫