JavaScript华容道游戏实现：经典益智游戏代码示例
华容道是一款经典的益智游戏，玩家需要移动方块，让目标方块移动到出口位置。以下是一个简单的JavaScript华容道游戏实现：
HTML代码
<!DOCTYPE html>
<html>
<head>
<title>华容道</title>
<style>
.container {
display: inline-block;
}
.row {
display: flex;
}
.cell {
width: 50px;
height: 50px;
margin: 5px;
border: 1px solid black;
text-align: center;
font-size: 30px;
line-height: 50px;
cursor: pointer;
}
.empty {
background-color: gray;
}
</style>
</head>
<body>
<div class='container'></div>
<script src='huarongdao.js'></script>
</body>
</html>
JavaScript代码
const ROWS = 3; // 行数
const COLS = 3; // 列数
let container = document.querySelector('.container');
let cells = []; // 方块数组
let emptyCell = null; // 空方块
// 创建方块
function createCell(row, col, num) {
let cell = document.createElement('div');
cell.className = 'cell' + (num === 0 ? ' empty' : '');
cell.textContent = num === 0 ? '' : num;
cell.addEventListener('click', () => {
moveCell(row, col);
});
return cell;
}
// 初始化游戏
function initGame() {
container.innerHTML = '';
cells = [];
emptyCell = null;
for (let i = 0; i < ROWS; i++) {
let row = document.createElement('div');
row.className = 'row';
cells.push([]);
for (let j = 0; j < COLS; j++) {
let num = i * COLS + j + 1;
let cell = createCell(i, j, num);
row.appendChild(cell);
cells[i].push(cell);
if (num === ROWS * COLS) {
emptyCell = cell;
}
}
container.appendChild(row);
}
}
// 移动方块
function moveCell(row, col) {
if (emptyCell === null) {
return;
}
let cell = cells[row][col];
if (cell === emptyCell) {
return;
}
let dx = Math.abs(col - emptyCell.cellIndex);
let dy = Math.abs(row - emptyCell.parentNode.rowIndex);
if (dx + dy !== 1) {
return;
}
cell.classList.add('empty');
cell.textContent = '';
emptyCell.classList.remove('empty');
emptyCell.textContent = cell.textContent;
emptyCell = cell;
checkWin();
}
// 检查是否获胜
function checkWin() {
let win = true;
for (let i = 0; i < ROWS; i++) {
for (let j = 0; j < COLS; j++) {
let num = i * COLS + j + 1;
if (num === ROWS * COLS) {
continue;
}
let cell = cells[i][j];
if (cell.textContent != num) {
win = false;
break;
}
}
}
if (win) {
alert('恭喜获胜！');
initGame();
}
}
// 开始游戏
initGame();
在HTML页面中，创建了一个容器<div class='container'></div>用于显示游戏界面，同时引入了一个huarongdao.js的JavaScript文件。
在JavaScript文件中，首先定义了常量ROWS和COLS表示华容道的行数和列数，然后获取了容器元素和方块数组cells，以及一个空方块emptyCell。
接着定义了createCell函数用于创建方块，其中num表示方块的数字，如果为0则表示是空方块。每个方块都设置了点击事件，点击时调用moveCell函数移动方块。
定义了initGame函数用于初始化游戏，首先清空容器和方块数组，然后创建ROWS x COLS个方块，放入容器中，并将方块存入数组中。同时找到空方块并记录下来。
moveCell函数用于移动方块，首先判断空方块是否存在，方块是否与空方块相邻，然后交换方块和空方块的位置。移动完成后，调用checkWin函数检查是否获胜。
checkWin函数用于检查是否获胜，遍历所有方块，如果方块的数字不等于i x COLS + j + 1，则表示没有获胜。如果所有方块都正确放置，则弹出恭喜获胜的提示，并重新开始游戏。
最后调用initGame函数开始游戏。
原文地址: https://www.cveoy.top/t/topic/mMdn 著作权归作者所有。请勿转载和采集!