随机数字消消乐游戏html+JavaScript
时间: 2023-12-13 07:04:10 浏览: 86
html实现开心消消乐小游戏源码
5星 · 资源好评率100%
好的,这是一个简单的随机数字消消乐游戏的HTML和JavaScript代码,供您参考:
```html
<!DOCTYPE html>
<html>
<head>
<title>随机数字消消乐游戏</title>
<style type="text/css">
body {
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
font-size: 36px;
margin-top: 20px;
}
.container {
display: inline-block;
margin-top: 50px;
}
.box {
display: inline-block;
width: 50px;
height: 50px;
margin: 5px;
font-size: 24px;
line-height: 50px;
border-radius: 5px;
background-color: #ccc;
cursor: pointer;
transition: background-color 0.3s;
}
.box:hover {
background-color: #ddd;
}
.box.selected {
background-color: #ffcc00;
}
.clear {
clear: both;
}
.score {
font-size: 24px;
margin-top: 20px;
}
.btn {
display: inline-block;
font-size: 24px;
padding: 10px;
margin-top: 20px;
border-radius: 5px;
background-color: #007bff;
color: #fff;
cursor: pointer;
transition: background-color 0.3s;
}
.btn:hover {
background-color: #0062cc;
}
</style>
</head>
<body>
<h1>随机数字消消乐游戏</h1>
<div class="container"></div>
<div class="clear"></div>
<div class="score">得分: <span id="score">0</span></div>
<div class="btn" onclick="restart()">重新开始</div>
<script type="text/javascript">
var container = document.querySelector('.container');
var scoreEl = document.querySelector('#score');
var score = 0;
var selected = [];
var colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
var nums = ['1', '2', '3', '4', '5', '6'];
// 创建随机数字格子的函数
function createNum() {
var box = document.createElement('div');
box.className = 'box';
box.innerText = nums[Math.floor(Math.random() * nums.length)];
box.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
box.onclick = function() {
if (selected.length === 0) { // 如果没有选中的格子
box.classList.add('selected');
selected.push(box);
} else if (selected.length === 1) { // 如果已经选中了一个格子
if (box === selected[0]) { // 如果重复点击已选中的格子
box.classList.remove('selected');
selected.pop();
} else if (box.innerText == selected[0].innerText) { // 如果选中的格子数字相同
box.classList.add('selected');
selected.push(box);
setTimeout(function() {
selected.forEach(function(item) {
item.style.display = 'none'; // 隐藏选中的格子
});
score += selected.length * 10; // 加分
scoreEl.innerText = score;
selected = []; // 清空选中的格子数组
checkGameOver(); // 检查游戏是否结束
}, 500);
} else { // 如果选中的格子数字不同
selected[0].classList.remove('selected');
selected.pop();
box.classList.add('selected');
selected.push(box);
}
}
};
return box;
}
// 创建随机数字格子的函数
function createNums(num) {
for (var i = 0; i < num; i++) {
container.appendChild(createNum());
}
}
// 检查游戏是否结束的函数
function checkGameOver() {
if (container.childElementCount === 0) { // 如果没有格子了
alert('恭喜你,游戏结束,你的得分是:' + score);
}
}
// 重新开始游戏的函数
function restart() {
score = 0;
scoreEl.innerText = score;
selected = [];
container.innerHTML = '';
createNums(36);
}
// 初始化游戏
createNums(36);
</script>
</body>
</html>
```
这个游戏会在页面中生成36个随机数字格子,你可以点击两个数字相同的格子,它们就会消失,并且你会得到分数。当所有格子都消失时,游戏结束,你的得分将被显示出来。你可以点击“重新开始”按钮重新开始游戏。
阅读全文