找徐峥游戏

最新推荐文章于 2020-12-17 16:11:57 发布

原创最新推荐文章于 2020-12-17 16:11:57 发布 · 548 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端练习 #小游戏 #找徐峥案例 #点击事件的嵌套 #JS逻辑练习

前端练习专栏收录该内容

6 篇文章

订阅专栏

这是一个简单的网页游戏，玩家需要在限定时间内从多个相似的图片中找出特定的目标人物——徐峥。每成功找到一次徐峥，玩家将获得一分，并生成新的图片进行下一轮挑战。

<!DOCTYPE html>

<html>

<head>

<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>

</div>

</body>

var timeObj = document.getElementById("time"); //获取时间元素

var scoreObj = document.getElementById("score"); //获取分数元素

var startBtn = document.getElementById("start"); //获取开始元素

var restart = document.getElementById("restart"); //获取重新开始元素

var imgs = document.getElementById("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 = document.createElement("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("我被调了");

imgs.removeChild(arrX[m]);

}

arrX = [];

creatImg();

}

//开始游戏

startBtn.onclick = 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++) {

imgs.removeChild(arrX[m]);

}

arrX=[];

count=10;

timeObj.innerHTML="剩余时间:"+0;

scoreObj.innerHTML = "分数:" + 0;

restart.style.display = "block";

}

count--;

},1000);

//添加第一张图片

var img = document.createElement("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(); //调用点击事件的函数

}

//重新开始游戏

restart.onclick = 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++) {

imgs.removeChild(arrX[m]);

}

arrX=[];

timeObj.innerHTML="剩余时间:"+0;

scoreObj.innerHTML = "分数:" + 0;

start.style.display = "block";

}

count--;

},1000);

//添加第一张图片

var img = document.createElement("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>