Python实现简单的龟兔赛跑小游戏
基于CSS 和 js的基础之上实现:
具体代码如下>>:
HTML代码文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../css/mystyle.css"/>
<script type="text/javascript" src="../js/myjs.js">
</script>
</head>
<body>
<div id="map">
<input type="button" value="开始" οnclick="start()"/>
</div>
<img id="r" src="../img/tz.jpg"/>
<img id="t" src="../img/wg1.jpg"/>
<div id="reslt">
兔子赢了!!
</div>
</body>
</html>
CSS代码文件
#map{
width: 800px;
height: 400px;
position: absolute;
left: 200px;
top: 100px;
border: solid 1px #2E8B57;
text-align: center;
background-image: url(../img/gtbj.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
}
img{
display: none;
position: absolute;
width: 32px;
height: 32px;
}
#reslt{
color: red;
font-size: 30px;
font-family: "微软雅黑";
margin-top: 50px;
margin-left: 550px;
display: none;
}
JS代码文件
var timeobj=-1;
num = 0
imgArray = ['../img/r1.png','../img/r2.png','../img/r3.png','../img/r4.png','../img/r5.png','../img/r6.png']
rIndex = 0
function start(){
if(timeobj!=-1){
clearInterval(timeobj)
}
t = document.getElementById('t')
r = document.getElementById('r')
result = document.getElementById("reslt")
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"
r.src = imgArray[rIndex]
rIndex++
num = 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(rIndex < imgArray.length){
r.src = imgArray[rIndex]
rIndex++
}
else{
rIndex=0
r.src = imgArray[rIndex]
}
if(rleft>=980 | tleft>=980){
clearInterval(num)
}
if(rleft>=980 | tleft>=980){
clearInterval(timeobj)
timeobj = -1
result.style.display = "block"
}
}
window.onbeforeunload = function(){
return "确定关闭当前页面吗??"
}
效果:
要不要你也试试??