代码介绍: 使用JavaScript制作一个找不同的小游戏,其功能为在4x4的格子中,放置一样的图片,点击图片后会揭开“底层图片”。揭开底层图片后,若两个图片一致,则不改变一致图片;若两个图片不一致,则还原为原图片。
问题: 但是我还想加一个功能,点击的两个图片一致后,就禁止点击 onclick=null; 这个功能我不知道如何实现。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>找不同</title>
<style>
table{
border: 1px solid black;
}
td{
border: 1px solid black;
}
.imgs{
height: 150px;
width: 100px;
margin-bottom: -4px;
}
</style>
</head>
<body>
<center>
<div id="">
<input type="button" id="btn_nextgame" value="来一局" onclick="initArray()"/>
<table cellspacing="0px";cellpadding="2px";>
<tr>
<td cellspacing="0px"; cellpadding="2px"><img src="imgs/img0.jpg"; onclick="changeImg(this)" id="0" class="imgs"/></td>
<td cellspacing="0px"; cellpadding="2px"><img src="imgs/img0.jpg"; onclick="changeImg(this)" id="1" class="imgs"/></td>
<td cellspacing="0px"; cellpadding="2px"><img src="imgs/img0.jpg"; onclick="changeImg(this)" id="2" class="imgs"/></td>
<td cellspacing="0px"; cellpadding="2px"><img src="imgs/img0.jpg"; onclick="changeImg(this)" id="3" class="imgs"/></td>
</tr>
<tr>
<td cellspacing="0px"; cellpadding="2px"><img src="imgs/img0.jpg"; onclick="changeImg(this)" id="4" class="imgs"/></td>
<td cellspacing="0px"; cellpadding="2px"><img src="imgs/img0.jpg"; onclick="changeImg(this)" id="5" class="imgs"/></td>
<td cellspacing="0px"; cellpadding="2px"><img src="imgs/img0.jpg"; onclick="changeImg(this)" id="6" class="imgs"/></td>
<td cellspacing="0px"; cellpadding="2px"><img src="imgs/img0.jpg"; onclick="changeImg(this)" id="7" class="imgs"/></td>
</tr>
<tr>
<td cellspacing="0px"; cellpadding="2px"><img src="imgs/img0.jpg"; onclick="changeImg(this)" id="8" class="imgs"/></td>
<td cellspacing="0px"; cellpadding="2px"><img src="imgs/img0.jpg"; onclick="changeImg(this)" id="9" class="imgs"/></td>
<td cellspacing="0px"; cellpadding="2px"><img src="imgs/img0.jpg"; onclick="changeImg(this)" id="10" class="imgs"/></td>
<td cellspacing="0px"; cellpadding="2px"><img src="imgs/img0.jpg"; onclick="changeImg(this)" id="11" class="imgs"/></td>
</tr>
<tr>
<td cellspacing="0px"; cellpadding="2px"><img src="imgs/img0.jpg"; onclick="changeImg(this)" id="12" class="imgs"/></td>
<td cellspacing="0px"; cellpadding="2px"><img src="imgs/img0.jpg"; onclick="changeImg(this)" id="13" class="imgs"/></td>
<td cellspacing="0px"; cellpadding="2px"><img src="imgs/img0.jpg"; onclick="changeImg(this)" id="14" class="imgs"/></td>
<td cellspacing="0px"; cellpadding="2px"><img src="imgs/img0.jpg"; onclick="changeImg(this)" id="15" class="imgs"/></td>
</tr>
</table>
</div>
</center>
<script type="text/javascript">
var newArray = [];
// 声明一个新的数组
function initArray(){
//
var images = new Array(1,2,3,4,5,6,7,8,1,2,3,4,5,6,7,8);
// 声明数组 存放图片src数字部分
for(var i=0;i<16;i++){
// for循环 16 次
var randomIndex = Math.floor(Math.random()*images.length);
// 生成0-15的随机数 供数组下标使用
var value = images[randomIndex];
// 随机数代表数组下标,使得数组随机,赋值于变量值中
newArray[i] = value;
// 随机的变量赋值于新的数组之中
console.log(newArray[i]);
images.splice(randomIndex,1);
// 删除旧数组中选中的数
}
}
var index = 0;
// 声明变量 供图片src的数字使用
var firstObj = null;
// 声明一个空的变量 为储存第一次的obj做准备
var secondObj = null;
// 声明一个空的变量 为储存第二次的obj做准备
function changeImg(obj){
obj.src = "imgs/img"+newArray[obj.id]+".jpg";
// 改变图片路径 目的是更换图片
// 数组下标加一 随机数组中的下一个数 也就是执行下一个随机数
if(firstObj == null){
// 如果第一个obj为空值
firstObj = obj;
// 将一个点击的图片数据传入给图片的值
}else{
// 或者
if(firstObj != obj){
// 如果第一次的点击数据不等于第二次的点击数据
secondObj = obj;
// 第二次点击数据赋值于变量中
console.log(firstObj);
// <img src="imgs/img0.jpg" ;="" onclick="changeImg(this)" class="imgs"> 非id class这类属性的元素
console.log(secondObj);
// <img src="imgs/img0.jpg" ;="" onclick="changeImg(this)" class="imgs">
window.setTimeout(
()=>{
if(firstObj.src != secondObj.src){
firstObj.src = "imgs/img0.jpg";
secondObj.src = "imgs/img0.jpg";
}
firstObj = null;
secondObj = null;
},2000
);
// 调用函数,2秒过后 其功能为点击图片不一致时,还原原图片,一致时,保留。
// 这里可以使用箭头函数
}
}
}
window.onload = function(){
initArray();
}
</script>
</body>
</html>
<script>
if( secondObj == obj ){
this.onclick = null;
}
</script>