龟兔赛跑网页初级版本

最新推荐文章于 2021-03-07 20:39:04 发布

tuboshuShaoBaTu

最新推荐文章于 2021-03-07 20:39:04 发布

阅读量262

点赞数

文章标签：赛跑网页 js

本文链接：https://blog.csdn.net/tuboshuShaoBaTu/article/details/101192600

版权

guitu.html:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="../css/mystyle.css" />
		<script type="application/javascript" src="../js/my.js"></script>
	</head>
	<body>
		<div id="map">
			
			<input type="button" value="start" onclick="start()"/>
			<img id="w"/>
			<img id="r"/>
		</div>
		
		<!--<img id="w" src="../img/w1.png" />
		<img id="r" src="../img/r1.png" />-->
		
		
		
	</body>
</html>

mystyle.css

#map{
	
	width: 900px;
	height: 600px;
	position: absolute;
	left: 200px;
	top: 100px;
	border: solid 1px #90EE90;
	text-align: center;
}


#w{
	display: none;
	position: absolute;
	overflow:hidden;
	
	width: 91px;
	
}
#r{
	display: none;
	position: absolute;
	overflow:hidden;
	width: 80px;
}

#wf{
	width: 91px;
}
#rf{
	width: 80px;
}

my.cs

currentCountR = 1
currentCountW = 1
border = 900
widthW = 91
widthR = 80
id = null
console.log(widthW)
console.log(widthR)
function start(){
	
	g = document.getElementById('w')
	r = document.getElementById('r')
	g.style.left = '200px';
	g.style.top = '200px';
	r.style.left = '200px';
	r.style.top = '450px';
	g.style.display = 'block'
	r.style.display = 'block'
	id = setInterval(move, 100)
}

function move(){
	
	g = document.getElementById('w')
	r = document.getElementById('r')
	g.src = "../img/w"+parseInt(currentCountW) +".png"
	currentCountW++
	if(parseInt(currentCountW) == 7)
		currentCountW=1
	r.src = "../img/r"+parseInt(currentCountR) +".png"
	currentCountR++
	if(parseInt(currentCountR) == 7)
		currentCountR=1
	rleft = r.style.left
	gleft = g.style.left
	
	rleft = Number.parseInt(rleft.split('px')[0])
	gleft = Number.parseInt(gleft.split('px')[0])
	rleft +=10
	gleft +=5
	g.style.left = gleft+'px'
	r.style.left = rleft+'px'
	
	if((rleft+widthR)>border){
		alert('r win')
		document.getElementById('map').style.display = 'none'
		clearInterval(id)
		}
		
	else if((gleft+widthW)>border){
		alert('w win')
		document.getElementById('map').style.display = 'none'
		clearInterval(id)
		}
		
	
}


window.onbeforeunload = function (){
	
	if(window.confirm('querentuichuma')){
		window.quit()
		
	}
}

运行截图：
在这里插入图片描述