使用 JavaScript 实现一个消消乐游戏
Posted 张驰Zhangchi
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用 JavaScript 实现一个消消乐游戏相关的知识，希望对你有一定的参考价值。
示例地址
https://jsfiddle.net/7fm1px5d/
https://jsfiddle.net/7fm1px5d/
源码
<!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>xiaoxiaole</title>
<style>
*
box-sizing: border-box;
.box
width:400px;
height:400px;
background:red;
position:absolute;
left:50%;
top:50%;
margin-left:-200px;
margin-top:-200px;
.box-item
float: left;
width:100px;
height:100px;
background:#ccc;
text-align:center;
line-height:100px;
border:1px solid #fff;
.box-item:hover
background: black;
color: #fff;
</style>
</head>
<body>
<div id="box" class="box">
</div>
<script>
function getRandomStrList ()
const STR_LIST = ['A','B','C','D','E','F','G','H','A','B','C','D','E','F','G','H'];
let grid_list = [];
let index = 0;
while(STR_LIST.length)
let random_index = Math.floor(Math.random()*STR_LIST.length);
let random_str = STR_LIST.splice(random_index,1)[0];
grid_list[index] = random_str;
index++;
return grid_list;
function createBoxCardItem(GRID_LIST)
const box = document.getElementById('box');
let first_click_item = null;
let second_click_item = null;
GRID_LIST.forEach((value,i)=>
let box_item = document.createElement('div');
box_item.className = 'box-item';
box_item.dataset.index = i;
box_item.id = 'box-item-'+i;
box.appendChild(box_item);
)
let resolved_count = 0;
box.addEventListener('click',(e)=>
let box_item = e.target;
if(box_item.dataset.index === undefined)
return;
if(box_item.dataset.resolved)
return;
if(box_item)
if(first_click_item && box_item.dataset.index == first_click_item.index)
return;
if(second_click_item && box_item.dataset.index ==second_click_item.index)
return;
if(!first_click_item)
first_click_item =
value: GRID_LIST[ box_item.dataset.index],
index:box_item.dataset.index
document.getElementById('box-item-'+first_click_item.index).innerText = first_click_item.value;
else if(!second_click_item)
second_click_item =
value: GRID_LIST[ box_item.dataset.index],
index:box_item.dataset.index
document.getElementById('box-item-'+second_click_item.index).innerText = second_click_item.value;
if(first_click_item && second_click_item && first_click_item.value === second_click_item.value)
document.getElementById('box-item-'+first_click_item.index).dataset.resolved = 1;
document.getElementById('box-item-'+second_click_item.index).dataset.resolved = 1;
resolved_count+=2;
first_click_item = null;
second_click_item = null;
if(resolved_count === GRID_LIST.length)
alert('Congratulations! You win!');
return;
else if(first_click_item && second_click_item)
document.getElementById('box-item-'+first_click_item.index).innerText = '';
document.getElementById('box-item-'+second_click_item.index).innerText = '';
first_click_item = null;
second_click_item = null;
return;
);
createBoxCardItem(getRandomStrList())
</script>
</body>
</html>以上是关于使用 JavaScript 实现一个消消乐游戏的主要内容，如果未能解决你的问题，请参考以下文章