<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>找徐峥</title>
<style>
#wrap {
width: 600px;
border: 1px solid red;
}
#imgs {
width: 600px;
height: 600px;
position: relative;
border: 1px solid black;
}
#start,
#restart {
width: 150px;
height: 80px;
font-size: 35px;
line-height: 80px;
text-align: center;
color: white;
position: absolute;
left: 50%;
top: 50%;
margin-left: -75px;
margin-top: -40px;
border-radius: 10%;
background-color: red;
}
#restart {
display: none;
}
#top {
overflow: hidden;
padding: 5px 10px 15px 10px;
}
#time {
font-size: 30px;
float: left;
}
#score {
font-size: 30px;
float: right;
}
</style>
</head>
<body>
<div id="wrap">
<div id="top">
<div id="time">剩余时间:0</div>
<div id="score">分数:0</div>
</div>
<div id="imgs">
<!--<img src="img1/1.jpg" alt="" />-->
<div id="start">开始游戏</div>
<div id="restart">重新开始</div>
</div>
</div>
</body>
<script type="text/javascript">
var timeObj = ElementById("time"); //获取时间元素
var scoreObj = ElementById("score"); //获取分数元素
var startBtn = ElementById("start"); //获取开始元素
var restart = ElementById("restart"); //获取重新开始元素
var imgs = ElementById("imgs"); //获取imgs对象
var arrX = []; //存储创建的节点
var index = 1; //记录图片个数
var score = 0; //记录分数
var xuzheng; //产生随机下标
var count=10; //设定游戏时间
//创建随机函数
function randomNum(m, n) {
return Math.floor(Math.random() * (n - m) + m);
}
//创建图片节点，添加图片节点
function creatImg() {
xuzheng = randomNum(0, index * index - 1);
for (var i = 0; i < index * index; i++) {
var img1 = ateElement("img");
img1.style.width = 100 / index + "%";
img1.style.height = 100 / index + "%";
imgs.appendChild(img1);
arrX.push(img1);
for (var j = 0; j < arrX.length; j++) {
if (j == xuzheng) {
img1.src = "img1/1.jpg";
} else {
img1.src = "img1/2.jpg";
}
}
createClick();
}
}
//创建点击事件
function createClick() {
for (var j = 0; j < arrX.length; j++) {
arrX[j].index = j;
arrX[j].onclick = function() {
if (this.index == xuzheng) {
index++;
score += 1;
scoreObj.innerHTML = "分数:" + score;
//删除节点
for (var m = 0; m < arrX.length; m++) {
console.log("我被调了");
veChild(arrX[m]);
}
arrX = [];
creatImg();
}
}
}
}
//开始游戏
lick = function() {
index=1; //避免和第一次的累加
var timer=setInterval(function(){
timeObj.innerHTML="剩余时间:"+count;
startBtn.style.display = "none";
if(count==0){
clearInterval(timer);
//清除最后一次没找到徐峥所产生的图片
for (var m = 0; m < arrX.length; m++) {
veChild(arrX[m]);
}
arrX=[];
count=10;
timeObj.innerHTML="剩余时间:"+0;
scoreObj.innerHTML = "分数:" + 0;
restart.style.display = "block";
}
count--;
},1000);
//添加第一张图片
var img = ateElement("img");
img.style.width = "100%";
img.style.height = "100%";
imgs.appendChild(img);
arrX.push(img);
xuzheng = 0;
for (var i = 0; i < arrX.length; i++) {
if (i == xuzheng) {
img.src = "img1/1.jpg";
} else {
img.src = "img1/2.jpg";
}
}
createClick(); //调用点击事件的函数
}
//重新开始游戏
lick = function() {
index=1; //避免和第一次的累加
var timer=setInterval(function(){
timeObj.innerHTML="剩余时间:"+count;
restart.style.display = "none";
if(count==0){
clearInterval(timer);
count=10;
//清除最后一次没找到徐峥所产生的图片
for (var m = 0; m < arrX.length; m++) {
veChild(arrX[m]);
}
arrX=[];
timeObj.innerHTML="剩余时间:"+0;
scoreObj.innerHTML = "分数:" + 0;
start.style.display = "block";
}
count--;
},1000);
//添加第一张图片
var img = ateElement("img");
img.style.width = "100%";
img.style.height = "100%";
imgs.appendChild(img);
arrX.push(img);
xuzheng = 0;
console.log(arrX.length);
for (var i = 0; i < arrX.length; i++) {
if (i == xuzheng) {
img.src = "img1/1.jpg";
} else {
img.src = "img1/2.jpg";
}
}
createClick(); //调用点击事件的函数
}
</script>
</html>
本文发布于:2024-03-16 03:31:47，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/1717133097272989.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
