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