随机数字消消乐游戏JavaScript完整代码
时间: 2023-08-15 16:05:57 浏览: 182
好的,以下是一个完整的随机数字消消乐游戏的 JavaScript 代码示例:
HTML:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>随机数字消消乐游戏</title>
<style>
#game {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 600px;
height: 600px;
}
.row {
display: flex;
flex-direction: row;
}
.cell {
display: flex;
align-items: center;
justify-content: center;
width: 100px;
height: 100px;
margin: 10px;
background-color: #eee;
font-size: 24px;
cursor: pointer;
}
#score {
margin-top: 20px;
font-size: 36px;
font-weight: bold;
}
button {
margin-top: 20px;
padding: 10px;
font-size: 24px;
font-weight: bold;
cursor: pointer;
}
</style>
</head>
<body>
<div id="game"></div>
<div id="score">得分:0</div>
<button onclick="startGame()">开始游戏</button>
<script src="game.js"></script>
</body>
</html>
```
JavaScript:
```javascript
// 游戏区域大小
var gameSize = 6;
// 数字最大值
var maxValue = 8;
// 每个数字的得分
var scoreTable = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90];
// 游戏得分
var score = 0;
// 生成随机数字
function generateNumber() {
return Math.floor(Math.random() * maxValue) + 1;
}
// 生成游戏区域
function generateGameArea() {
var gameArea = document.getElementById("game");
gameArea.innerHTML = "";
for (var i = 0; i < gameSize; i++) {
var row = document.createElement("div");
row.classList.add("row");
for (var j = 0; j < gameSize; j++) {
var cell = document.createElement("div");
cell.classList.add("cell");
cell.dataset.number = generateNumber();
cell.innerHTML = cell.dataset.number;
cell.addEventListener("click", cellClick);
row.appendChild(cell);
}
gameArea.appendChild(row);
}
}
// 点击数字格子
function cellClick(event) {
var currentCell = event.target;
var currentNumber = parseInt(currentCell.dataset.number);
if (currentNumber == 1) {
// 格子消失
currentCell.remove();
// 更新得分
score += scoreTable[currentNumber];
document.getElementById("score").innerHTML = "得分:" + score;
} else {
// 数字减一
currentCell.dataset.number = currentNumber - 1;
currentCell.innerHTML = currentNumber - 1;
// 更新得分
score += scoreTable[currentNumber];
document.getElementById("score").innerHTML = "得分:" + score;
}
}
// 开始游戏
function startGame() {
// 重置得分
score = 0;
document.getElementById("score").innerHTML = "得分:" + score;
// 生成游戏区域
generateGameArea();
}
```
以上代码实现了一个完整的随机数字消消乐游戏,每个数字的得分不同,点击数字格子时,数字将减一,如果减到了1,则格子将消失,并增加相应的得分。您可以根据自己的需求进行修改和优化。
阅读全文