网页动画游戏开发-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_41604379/article/details/101193099

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" src="img/111.jpg"/>
			<img id="r" src="img/222.jpg"/>
		</div>
		

		
		
	</body>
</html>

mystyle.css

<!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" src="img/111.jpg"/>
			<img id="r" src="img/222.jpg"/>
		</div>
		

		
		
	</body>
</html>

js文件

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()
		
	}
}
![在这里插入图片描述](https://img-blog.csdnimg.cn/2019092309155739.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjA0Mzc5,size_16,color_FFFFFF,t_70)

在这里插入图片描述