定个小目标：一月一万行代码3

前言：这是一个图片消消消的小游戏，简单练习。

游戏开始时，显示12个图像的背面，用鼠标点击其中任意一张，即可显示图像的正面，如果点击了两张，则显示出两张图像的正面。如果点击过的两张图像是相同的图像，则将图像从界面中移除，如果不同，则将两张图像重新显示其背面。直到所有的图像都消除掉。

效果：

思路如下：

在一个div内部用12个img标签来显示12个图像，开始时，12个img都显示相同的图像，而真实的图像则存储在一个数组中。点击时，img标签的id对应数组的下标，即得到其正面的图像。如果打开了两张图像时，则判断两个img标签的id对应的数组中的值是否相同，如果相同，则表示是两张相同的图像。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>图片消消消</title><style>* {margin: 0;padding: 0;}#current {margin: 50px auto;width: 800px;height: 300px;text-align: center;padding: 20px;}#current>img {width: 124px;height: 140px;margin: 2px;}</style>
</head><body><div id="current"></div>
</body>
<script>var clickCount = 0; //记录点击次数var firstCard = 0; //记录点击的第一张图片var secondCard = 0; //记录点击的第二张图像var imgs = ["img/a.jpg", "img/b.jpg", "img/c.jpg", "img/d.jpg", "img/e.jpg", "img/f.jpg","img/a.jpg", "img/b.jpg", "img/c.jpg", "img/d.jpg", "img/e.jpg", "img/f.jpg"];var cardBg = "img/bg.jpg";var img = [];var box = document.getElementById("current");//打乱数组图片的顺序function shuffle(arr) {for (var i = 0; i < imgs.length; i++) {var index = parseInt(Math.random() * 12);//不借助第三个变量，交换变量[imgs[i], imgs[index]] = [imgs[index], imgs[i]];}return arr;};//判断游戏是否结束function checkResult() {var boxChild = box.childElementCount;return boxChild;}//实现翻牌function changeCard(e) {console.log("clickCount=" + clickCount);var id = e.getAttribute("id");if (clickCount === 0) {firstCard = id;// console.log("firstCard=" + firstCard);img[firstCard].setAttribute("src", imgs[firstCard]);}if (clickCount === 1) {secondCard = id;// console.log("secondCard=" + secondCard);if (firstCard === secondCard) {alert("不能多次点击图片");img[firstCard].setAttribute("src", cardBg);firstCard = 0;secondCard = 0;clickCount = -1;} else {img[secondCard].setAttribute("src", imgs[secondCard]);setTimeout(() => {if (imgs[firstCard] === imgs[secondCard]) {img[firstCard].onClick = "";img[secondCard].onClick = "";box.removeChild(img[firstCard]);box.removeChild(img[secondCard]);if (checkResult() <= 0) {alert("游戏结束");}} else {img[firstCard].setAttribute("src", cardBg);img[secondCard].setAttribute("src", cardBg);}firstCard = 0;secondCard = 0;clickCount = 0;}, 500);}}clickCount++;}//创建12个图像元素for (var i = 0; i < imgs.length; i++) {img[i] = document.createElement("img");img[i].src = cardBg;img[i].setAttribute("id", i);img[i].onclick = function () {changeCard(this);}box.appendChild(img[i]);}shuffle(imgs);
</script></html>

定个小目标：一月一万行代码3相关推荐

定个小目标，开始更新博客，再唠嗑一下现在的一些心路
定个小目标,然后决定开始更新博客,再唠嗑一下现在的一些心路先说小目标,硕士毕业前拿到阿里的正式offer. 先说说为什么决定开始更新博客吧这个CSDN的账号其实我早就注册了,但是一直没有更 ...
科技圈晒开工福利！2019一起定个小目标！
阅读本文大概需要 3 分钟. 首先,祝大家开工大吉,不知道你收到的开工福利是什么!!! 作为昨天就已经在工位上奋斗的人,我相信今天大部分公司都已经开工了,许多企业都为员工们了奉上开年红包,我们也来盘点 ...
2017年给自己定个小目标！
16年的今天,正在参加深圳磨房百公里自虐,转眼间一年过去了. 回想2016年,给自己只定了个看书的小目标,勉强算是完成了.这个完成也只是数量上的完成.平时比较喜欢科幻,所以去年的书单大多是科幻为主. ...
2020年给自己定个小目标吧
在离职后进入本科院校学习后,基本上很少再去写博客了,我本身是java方向的,所以又重新开始对java的学习,这次的学习是从IO开始学的,从开学到学期末现在已经学到mybatis了,其实一直以来都是有写 ...
定一个小目标，明年存款破10万
前言不可否认,我真的爱钱,和万千的普通人一样.我喜欢一点一点存钱,然后达到一个数值,特别享受那种成就感. 说个搞笑的,我一有空就拿着计算器,噼里啪啦地算我存了多少钱,银行卡有多少.余额宝有多少.公积 ...
三好先生--2021年定个小目标
三好先生 2021年定个小目标转眼又是一年,2020年蹒跚而过,2021年又希翼而来.最近几天毫无心情做事,似乎遇到瓶颈.万事不破不立,想要发展,总要有个仪式,那就让这篇文章作为仪式,踏上2021年 ...
2020 给自己定个小目标
时间好快,还没来得及给自己定个小目标,2019年还剩短短6,7个小时,这一年发生了很多事............暂不描述说说我自己吧!2019年也没有给自己定个目标,体重倒是重了不少,比之前中了25 ...
Nicetools：定一个小目标，先做它个1000个工具
http://www.nicetool.net/ ▲ 写的时候是879个工具,成稿的时候是886个,看来小目标不远了测评工具虽迟但到.今天这个网站算是一个小集合,宣传语为用完即走,触手可及,意在说明 ...
程序猿小哥用12万行代码堆出来个「蔡徐坤」！编译竟然还能通过
点击上方"Github中文社区",关注看遍Github好玩的项目量子位大家好,我是hub哥! 有个程序猿,用12万行代码堆出来个「蔡徐坤」,编译还能通过?! 它是这样的: 不 ...
为大数据定个小目标：从改变惯例开始
大数据决策要真正在企业中落地生根并非易事,它必须能推动企业的自我批判意识,能够不断反思自身的惯例,推动变革. 人的行为受到习惯的约束.但我们很多的日常习惯,不是从来就有的,比如说刷牙. 在1810年代 ...

定个小目标：一月一万行代码3

定个小目标：一月一万行代码3相关推荐

最新文章

热门文章