写一个Js的消消乐游戏代码
时间: 2023-08-24 21:27:44 浏览: 125
好的,下面是一个简单的JS消消乐游戏代码示例:
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>消消乐游戏</title>
<style>
.container {
display: flex;
flex-wrap: wrap;
width: 360px;
margin: 0 auto;
}
.block {
width: 60px;
height: 60px;
margin: 5px;
background-color: #ccc;
border-radius: 5px;
text-align: center;
font-size: 30px;
line-height: 60px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container"></div>
<script src="消消乐游戏.js"></script>
</body>
</html>
```
JS代码:
```js
var colors = ["red", "blue", "green", "purple", "orange", "yellow"]; // 砖块颜色
var blocks = []; // 砖块数组
var selectedBlocks = []; // 选中的砖块
var score = 0; // 分数
var container = document.querySelector(".container"); // 游戏容器
// 创建指定数量的砖块
function createBlocks(num) {
for (var i = 0; i < num; i++) {
var block = document.createElement("div");
block.className = "block";
block.dataset.color = colors[Math.floor(Math.random() * colors.length)];
block.addEventListener("click", function() {
selectBlock(this);
});
container.appendChild(block);
blocks.push(block);
}
}
// 选中砖块
function selectBlock(block) {
if (block.classList.contains("selected")) {
block.classList.remove("selected");
selectedBlocks.splice(selectedBlocks.indexOf(block), 1);
} else {
block.classList.add("selected");
selectedBlocks.push(block);
if (selectedBlocks.length == 2) {
checkBlocks();
}
}
}
// 检查选中的砖块是否相同
function checkBlocks() {
if (selectedBlocks[0].dataset.color == selectedBlocks[1].dataset.color) {
removeBlocks();
score += 10;
document.querySelector(".score").innerHTML = score;
} else {
selectedBlocks.forEach(function(block) {
block.classList.remove("selected");
});
}
selectedBlocks = [];
}
// 移除相同的砖块
function removeBlocks() {
selectedBlocks.forEach(function(block) {
block.remove();
blocks.splice(blocks.indexOf(block), 1);
});
}
// 初始化游戏
function init() {
createBlocks(36);
}
init();
```
这个游戏的基本实现是,随机生成一些不同颜色的砖块,玩家点击砖块,选中两个砖块后,如果它们颜色相同,这两个砖块就会消失,得分增加。如果颜色不同,这两个砖块就不会消失,玩家需要重新选择。
阅读全文