提示:1:先把两个图片放到重命名并放到相应的路径内. 2:本小游戏只为闲事练手,如有小bug自行解决,解决不了的可以留言,我看到后解决.
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#wrap{
margin:0 auto;
border : 1px solid red;
width:400px;
height:500px;
background: #ccc;
}
#title{
height:20px;
}
#time{float:left}
#score{float:right}
#begin{display:block;margin:20px auto;width:100px;height:30px;border-radius: 5px;border:1px solid #ccc;background:blue;color:white;font-size:18px;}
#main{
width:300px;
margin:40px auto;
}
#main img{
width:100%;
margin:5px;
}
</style>
</head>
<body>
<div id="wrap">
<div id="title">
<span id="time">剩余时间：60秒</span>
<span id="score">分数：0</span>
</div>
<div id="center"><button id="begin">开始</button></div>
<div id="main">
<img src="img/2.png" alt="" />
</div>
</div>
</body>
<script type="text/javascript">
var main = document.getElementById("main");
//开始按钮
var btn = document.getElementById("begin");
//分数
var score = document.getElementById("score");
//剩余时间
var time = document.getElementById("time");
var step = 2;
//开始按钮点击
btn.onclick = function(){
createImg();
score.innerHTML = "分数：0";
var initTime = 60;
btn.disabled = "disabled";
btn.style.background = "gray";
btn.innerHTML = "游戏中..."
//添加定时器
var inter = setInterval(function(){
initTime-=0.1;
initTime = initTime.toFixed(2);
if(initTime<=0){
alert("时间到啦");
clearInterval(inter);
btn.removeAttriute("disabled");
btn.style.background = "blue";
btn.innerHTML = "开始";
step = 2;
}
time.innerHTML = "剩余时间："+initTime+"秒";
},100)
};
//生成随机数
function rand(min,max){
return Math.floor(Math.random()*(max-min));
}
//创建图片
function createImg(){
//先移除图片
remove();
var count = Math.pow(step,2);
var imgWidth = (main.offsetWidth-step*10)/step + "px";
for(var i=0;i<count;i++){
var img = document.createElement("img");
img.src="img/1.png";
img.style.width = imgWidth;
main.appendChild(img);
}
step++;
if(step>20){
alert("神啊，你已经不用再玩了")
}
var FIndex = rand(0,count);
var FImg = main.children[FIndex];
FImg.src="img/2.png";
FImg.onclick = function(){
score.innerHTML = "分数："+(step-2);
createImg();
}
}
//每次生成新图片时把现在的图片清空
function remove(){
main.innerHTML = "";
}
</script>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
