基于JavaScript配对游戏
当用户点击两个相同的图案或字符后配对成功，全部配对成功后游戏获胜
界面如下：
代码如下：
有兴趣的朋友欢迎继续完善 ^ _ ^
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>配对游戏</title>
<style type="text/css">
h2{
text-align: center;
}
hr{
background: deepskyblue;
height: 5px;
width: 600px;
}
table{
background: deepskyblue;
color: blue;
width: 500px;
height: 500px;
margin: 15px auto;
}
td{
text-align: center;
font-size: 50px;
background: greenyellow;
width: 100px;
height: 125px;
}
footer{
background: deepskyblue;
width: 600px;
padding: 10px;
margin: 15px auto;
text-align: center;
}
</style>
</head>
<body>
<h2>配对游戏</h2><hr>
<table>
<script>
// 定义行列
var cols = 5, rows = 4;
for(var i = 0; i < rows; i++){
str = "<tr>";
for(var j = 0; j < cols; j++){
var td_id = "img" + ((cols * i) + j);
str += '<td id="' + td_id + '" οnclick="showimg(' + ((cols * i) + j) +')"' + '">';
str += "</td>";
}
str += "</tr>";
document.write(str);
}
</script>
</table>
<footer>
用时：<span id="gameTime"></span>
<input type="button" value="开始游戏" onclick="init()">
</footer>
<script>
var length = cols*rows;//表格单元格数目
var map = [];//存储单元格里的内容
var user = [];//存储每个单元格是否可以翻开的状态
var times=0;//存储时间
var newStart;//表示是否为新的游戏开始
var firstIndex = 0, secondIndex = 0;//点击第一种、第二种照片的索引
var ctr = 0;//记录时第一次点击
var finished = 0;//配对成功数量
function $(x){
return document.getElementById(x);
}
for(var i = 0; i < length/2; i++){
map[i] = i;
map[length/2 + i] = i;
}
// alert(map);
//游戏初始化
function init(){
for(var i = 0; i <length; i++){
$("img" + i).innerHTML = '';//用空表示背面
user[i] = 0;//是否显示照片，0为背面
}
// alert(map);
map.sort(function(){
return (Math.random() - 0.5);//打乱数组
})
// alert(map);
times = 0;//计时器清零
$("gameTime").innerHTML = times + "秒";
newStart = true;//标记为新的游戏开始
}
// init();
//点击事件函数
function showimg(x){
if(newStart){
start();
newStart = false;
}
$("img" + x).innerHTML = map[x];
if(ctr == 0){
firstIndex = x;//记录第一种照片索引
ctr++;
}else{
if(firstIndex != x){//防止两次点击相同照片
secondIndex = x;//记录第二张照片索引
ctr = 0;
check();//比较两者照片
}
}
}
//配对
function check(){
if(map[firstIndex] == map[secondIndex]){
finished++;
user[firstIndex] = 1;
user[secondIndex] = 1;//不能在翻
ctr = 0;
}else if(user[firstIndex] == 0){//如果没有配对成功，此时user还是为0
$("img"+firstIndex).innerHTML = " ";//将第一次点击的照片隐藏
firstIndex = secondIndex;//此时第二次点击的变成下轮第一次点击
secondIndex = 0;//下一轮还没有第二次点击，所以为0
ctr++;//标记已经点击了一张
}
if(finished == length/2){
clearTimeout(times);
if(confirm("恭喜你，再来一局？") == "true"){
init();
}
}
}
//计时函数
function start(){
times += 1;
$("gameTime").innerHTML = times + "秒";
setTimeout('start()', 1000);
}
</script>
</body>
</html>