js實(shí)現(xiàn)簡單翻牌小游戲

更新時(shí)間：2022年04月20日 16:56:38 作者：啊哈在下

這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡單翻牌小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js實(shí)現(xiàn)簡單翻牌小游戲的具體代碼，供大家參考，具體內(nèi)容如下

1.簡介

非常簡單的一個(gè)網(wǎng)絡(luò)消消樂翻牌小游戲的實(shí)現(xiàn)，代碼量較少，不過遇到的bug和自行開發(fā)的步驟十分有紀(jì)念意義。

2.核心代碼塊

生成隨機(jī)數(shù)列，確定圖片隨機(jī)分布

function getImgIndex(is){
???var index = parseInt(Math.random()*8)+1;
?? ??? ??if(is[index] < 2){
?? ??? ???? ?is[index]++;
?? ??? ??? ? ?} else {
?? ??? ??? ??index = getImgIndex(is);
?? ??? ????}
?? ??? ?return index;
??}

通過window.onload函數(shù)定義8個(gè)背景圖片隨機(jī)分布

window.onload = function(){
?? ???//規(guī)則：五個(gè)背景圖，每張圖出現(xiàn)兩次，隨機(jī)分配到16個(gè)div中
?? ??? ?var ele = document.getElementById("parent");
?? ??? ?var imgs = [1,2,3,4,5,6,7,8];
?? ??? ?var is = [0,0,0,0,0,0,0,0,0];
?? ??? ??for(var i = 0; i < 16; i++){
?? ??? ??? ???var index = getImgIndex(is);
?? ??? ??? ??? console.info(index);
?? ??? ??? ??? ele.innerHTML += "<div id='k"+i+"' class='kid' "
?? ??? ??? ??? ???+"οnclick='oclick(this.id,"+index+");'></div>";?? ?
?? ??? ??? ??? ?//通過字符串拼接方式，將H5代碼發(fā)送給網(wǎng)頁執(zhí)行?? ??? ??? ?
?? ??? ???}
}

點(diǎn)擊圖片事件
oclick函數(shù)中利用f存儲(chǔ)上個(gè)圖片的index,；利用id2存儲(chǔ)上個(gè)圖片的id
再進(jìn)行以下操作比較

function oclick(id,index)
?? ??? ??? ?{ ??
?? ??? ??? ??? ?if(find[index]<2)
?? ??? ??? ??? ?{
?? ??? ??? ? ? ?if(f==0){
?? ??? ??? ? ? ?find[index]++;
?? ??? ??? ??? ?look(id,index);
?? ??? ??? ??? ?f=index;
?? ??? ??? ??? ?id2=id;
?? ??? ??? ??? ?}
?? ??? ??? ??? ?else
?? ??? ??? ??? ?{
?? ??? ??? ??? ??? ?if(f==index&&id!=id2)
?? ??? ??? ??? ??? ?{ ??
?? ??? ??? ??? ??? ??? ?find[index]++;
?? ??? ??? ??? ??? ??? ?look(id,index);
?? ??? ??? ??? ??? ??? ?f=0;
?? ??? ??? ??? ??? ??? ?id2=0;
?? ??? ??? ??? ??? ??? ?marked++;
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?else
?? ??? ??? ??? ??? ?{ ??
?? ??? ??? ??? ??? ??? ?find[f]=0;
?? ??? ??? ??? ??? ??? ?look(id,index);
?? ??? ??? ??? ??? ??? ?look(id2,f);
?? ??? ??? ??? ??? ??? ?clearStyle(id);
?? ??? ??? ??? ??? ??? ?clearStyle(id2);
?? ??? ??? ??? ??? ??? ?f=0;
?? ??? ??? ??? ??? ??? ?id2=0;
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?}
?? ??? ??? ??? ?}
?? ??? ??? ??? ?if(marked==8)
?? ??? ??? ??? ?{
?? ??? ??? ???alert("恭喜完成");
?? ??}
}

圖片操作函數(shù)

function look(id,index){
?var ele = document.getElementById(id);
?? ??ele.style="background-image: url("+index+".gif);";
?? ??? }
?? ??? ??function clearStyle(id){
?? ??? ???setTimeout(function(){
?? ??? ??? ?var ele = document.getElementById(id);
?? ??? ??? ?ele.style="";
?? ??? ???}, 200);
?}

重置頁面函數(shù)

function re(){
?? ??? ??? ??? ?window.location.reload();
?? ??? ??? ?}

頁面的設(shè)計(jì)

<body>
?? <div id="parent" class="par"></div>
?? <input type="button" name="b1" id="b1" value="再van♂一次" onclick="re();"/>
</body>

3.已知bug 說明（已解決）

1.點(diǎn)擊圖片本身兩次導(dǎo)致匹配成功

解決方式：加入id判斷是否為自身比較

f==index&&id!=id2

2.已匹配的圖片再次點(diǎn)擊會(huì)消除

解決方式：加入find[]數(shù)組統(tǒng)計(jì)圖片點(diǎn)擊次數(shù)，超過兩次不再比較

if(find[index]<2)

4.全文代碼

<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="utf-8">
?? ??? ?<title></title>
?? ??? ?<style>
?? ??? ?/* 父子網(wǎng)頁界面設(shè)計(jì) */
?? ??? ? ? .kid{
?? ??? ? ? ?? ?width: 100px;
?? ??? ? ? ?? ?height: 100px;
?? ??? ? ? ?? ?background-color: #aaffff;
?? ??? ? ? ?? ?border: 1px solid black;
?? ??? ? ? ?? ?margin: 10px;
?? ??? ? ? ?? ?float: left;
?? ??? ? ? }
?? ??? ? ? .par{
?? ??? ? ? ?? ?width: 1000px;
?? ??? ? ? ?? ?padding: 10px;
?? ??? ? ? ?? ?border: 1px solid black;
?? ??? ? ? ?? ?float: left;
?? ??? ? ? }
?? ??? ?</style>
?? ??? ?<script>
?? ??? ? ? ? var f=0;
?? ??? ??? ? var id2=0;
?? ??? ??? ? var find = [0,0,0,0,0,0,0,0,0];
?? ??? ??? ? var marked=0;
?? ??? ??? ?window.onload = function(){
?? ??? ??? ??? ?//規(guī)則：五個(gè)背景圖，每張圖出現(xiàn)兩次，隨機(jī)分配到16個(gè)div中
?? ??? ??? ??? ?var ele = document.getElementById("parent");
?? ??? ??? ??? ?
?? ??? ??? ??? ?var imgs = [1,2,3,4,5,6,7,8]; ?? ??? ??? ??? ?
?? ??? ??? ??? ?
?? ??? ??? ??? ?var is = [0,0,0,0,0,0,0,0,0];
?? ??? ??? ??? ?
?? ??? ??? ??? ?for(var i = 0; i < 16; i++){
?? ??? ??? ??? ??? ?var index = getImgIndex(is);
?? ??? ??? ??? ??? ?console.info(index);
?? ??? ??? ??? ??? ?ele.innerHTML += "<div id='k"+i+"' class='kid' "
?? ??? ??? ??? ??? ??? ?+"οnclick='oclick(this.id,"+index+");'></div>";?? ??? ??? ??? ?
?? ??? ??? ??? ?}
?? ??? ??? ?}
?? ??? ??? ?function getImgIndex(is){
?? ??? ??? ??? ?var index = parseInt(Math.random()*8)+1;
?? ??? ??? ??? ?if(is[index] < 2){
?? ??? ??? ??? ??? ?is[index]++;
?? ??? ??? ??? ?} else {
?? ??? ??? ??? ??? ?index = getImgIndex(is);
?? ??? ??? ??? ?}
?? ??? ??? ??? ?return index;
?? ??? ??? ?}
?? ??? ??? ?function oclick(id,index)
?? ??? ??? ?{ ??
?? ??? ??? ??? ?if(find[index]<2)
?? ??? ??? ??? ?{
?? ??? ??? ? ? ?if(f==0){
?? ??? ??? ? ? ?find[index]++;
?? ??? ??? ??? ?look(id,index);
?? ??? ??? ??? ?f=index;
?? ??? ??? ??? ?id2=id;
?? ??? ??? ??? ?}
?? ??? ??? ??? ?else
?? ??? ??? ??? ?{
?? ??? ??? ??? ??? ?if(f==index&&id!=id2)
?? ??? ??? ??? ??? ?{ ??
?? ??? ??? ??? ??? ??? ?find[index]++;
?? ??? ??? ??? ??? ??? ?look(id,index);
?? ??? ??? ??? ??? ??? ?f=0;
?? ??? ??? ??? ??? ??? ?id2=0;
?? ??? ??? ??? ??? ??? ?marked++;
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?else
?? ??? ??? ??? ??? ?{ ??
?? ??? ??? ??? ??? ??? ?find[f]=0;
?? ??? ??? ??? ??? ??? ?look(id,index);
?? ??? ??? ??? ??? ??? ?look(id2,f);
?? ??? ??? ??? ??? ??? ?clearStyle(id);
?? ??? ??? ??? ??? ??? ?clearStyle(id2);
?? ??? ??? ??? ??? ??? ?f=0;
?? ??? ??? ??? ??? ??? ?id2=0;
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?}
?? ??? ??? ??? ?}
?? ??? ??? ??? ?if(marked==8)
?? ??? ??? ??? ?{
?? ??? ??? ??? ??? ?alert("恭喜完成");
?? ??? ??? ??? ?}
?? ??? ??? ?}
?? ??? ??? ?function look(id,index){
?? ??? ??? ??? ?var ele = document.getElementById(id);
?? ??? ??? ??? ?ele.style="background-image: url("+index+".gif);";
?? ??? ??? ?}
?? ??? ??? ?function clearStyle(id){
?? ??? ??? ??? ?setTimeout(function(){
?? ??? ??? ??? ??? ??? ?var ele = document.getElementById(id);
?? ??? ??? ??? ??? ??? ?ele.style="";
?? ??? ??? ??? ??? ?}, 200);
?? ??? ??? ?}
?? ??? ??? ?function re(){
?? ??? ??? ??? ?window.location.reload();
?? ??? ??? ?}
?? ??? ?</script>
?? ?</head>
?? ?<body>
?? ??? ?<div id="parent" class="par"></div>
?? ??? ??? ?<input type="button" name="b1" id="b1" value="再van♂一次" onclick="re();"/>
?? ?</body>
</html>

注意：使用需修改圖片地址url

實(shí)現(xiàn)效果