js实现简单的龟兔赛跑

最新推荐文章于 2020-08-14 08:54:56 发布

wyza

最新推荐文章于 2020-08-14 08:54:56 发布

阅读量882

点赞数 3

分类专栏： html 文章标签： js

本文链接：https://blog.csdn.net/qq_41604379/article/details/101193099

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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)

在这里插入图片描述

wyza

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现简单的龟兔赛跑

guitu.html<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/mystyle.css" /> <script type="app...
复制链接

扫一扫

专栏目录