2048 小游戏完整代码：8*8 前端 JavaScript 实现
<!DOCTYPE html>
<html>
<head>
<title>2048</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="header">
<h1>2048</h1>
<div class="score">
<p>Score:</p>
<p id="score">0</p>
</div>
</div>
<div class="board">
<div class="row">
<div class="cell" id="cell00"></div>
<div class="cell" id="cell01"></div>
<div class="cell" id="cell02"></div>
<div class="cell" id="cell03"></div>
</div>
<div class="row">
<div class="cell" id="cell10"></div>
<div class="cell" id="cell11"></div>
<div class="cell" id="cell12"></div>
<div class="cell" id="cell13"></div>
</div>
<div class="row">
<div class="cell" id="cell20"></div>
<div class="cell" id="cell21"></div>
<div class="cell" id="cell22"></div>
<div class="cell" id="cell23"></div>
</div>
<div class="row">
<div class="cell" id="cell30"></div>
<div class="cell" id="cell31"></div>
<div class="cell" id="cell32"></div>
<div class="cell" id="cell33"></div>
</div>
</div>
<div class="overlay" id="overlay">
<div class="message" id="message">
<p id="result"></p>
<button id="restart">Restart</button>
</div>
</div>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
<p>.container {
margin: 0 auto;
width: 480px;
}</p>
<p>.header {
background-color: #eee4da;
padding: 10px;
text-align: center;
}</p>
<p>.score {
display: inline-block;
background-color: #bbada0;
padding: 5px 10px;
border-radius: 5px;
margin-left: 20px;
font-size: 20px;
}</p>
<p>.board {
background-color: #bbada0;
padding: 10px;
}</p>
<p>.row {
display: flex;
flex-wrap: nowrap;
}</p>
<p>.cell {
width: 100px;
height: 100px;
background-color: #cdc1b4;
border-radius: 5px;
margin: 5px;
font-size: 50px;
line-height: 100px;
text-align: center;
}</p>
<p>.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1;
display: none;
}</p>
<p>.message {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #eee4da;
padding: 20px;
border-radius: 5px;
text-align: center;
}</p>
<p>#result {
font-size: 30px;
margin-bottom: 20px;
}</p>
<p>#restart {
background-color: #8f7a66;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
font-size: 20px;
cursor: pointer;
}</p>
<p>var cells = []; // 保存所有方格的引用
var score = 0; // 分数
var overlay = document.getElementById('overlay'); // 蒙层
var message = document.getElementById('message'); // 提示框
var result = document.getElementById('result'); // 结果
var restart = document.getElementById('restart'); // 重新开始按钮</p>
<p>// 初始化
function init() {
// 获取所有方格引用
for (var i = 0; i < 4; i++) {
cells[i] = [];
for (var j = 0; j < 4; j++) {
cells[i][j] = document.getElementById('cell' + i + j);
}
}
// 绑定重新开始事件
restart.addEventListener('click', function() {
hideOverlay();
startGame();
});
startGame();
}</p>
<p>// 开始游戏
function startGame() {
// 初始化分数
score = 0;
updateScore();
// 初始化所有方格的值和样式
for (var i = 0; i < 4; i++) {
for (var j = 0; j < 4; j++) {
cells[i][j].innerHTML = '';
cells[i][j].classList.remove('tile');
cells[i][j].classList.remove('tile' + cells[i][j].innerHTML);
}
}
// 随机生成两个方块
generateTile();
generateTile();
}</p>
<p>// 随机生成一个方块
function generateTile() {
// 找到所有空方格
var emptyCells = [];
for (var i = 0; i < 4; i++) {
for (var j = 0; j < 4; j++) {
if (cells[i][j].innerHTML == '') {
emptyCells.push([i, j]);
}
}
}
// 如果没有空方格了，游戏结束
if (emptyCells.length == 0) {
showOverlay('Game Over!');
return;
}
// 在空方格中随机选择一个
var index = Math.floor(Math.random() * emptyCells.length);
var row = emptyCells[index][0];
var col = emptyCells[index][1];
// 随机生成 2 或 4
var value = Math.random() < 0.9 ? 2 : 4;
// 在随机位置上显示随机生成的值
cells[row][col].innerHTML = value;
cells[row][col].classList.add('tile');
cells[row][col].classList.add('tile' + value);
}</p>
<p>// 更新分数
function updateScore() {
document.getElementById('score').innerHTML = score;
}</p>
<p>// 移动方块
function move(direction) {
var moved = false; // 是否有方块移动
// 根据不同的方向确定遍历方向和起点
var startRow, startCol, endRow, endCol, stepRow, stepCol;
switch (direction) {
case 'up':
startRow = 1, startCol = 0, endRow = 3, endCol = 3, stepRow = 1, stepCol = 0;
break;
case 'down':
startRow = 2, startCol = 0, endRow = 0, endCol = 3, stepRow = -1, stepCol = 0;
break;
case 'left':
startRow = 0, startCol = 1, endRow = 3, endCol = 3, stepRow = 0, stepCol = 1;
break;
case 'right':
startRow = 0, startCol = 2, endRow = 3, endCol = 0, stepRow = 0, stepCol = -1;
break;
}
// 遍历所有方块，根据不同的情况进行移动和合并
for (var i = startRow; i != endRow + stepRow; i += stepRow) {
for (var j = startCol; j != endCol + stepCol; j += stepCol) {
var current = cells[i][j];
if (current.innerHTML == '') {
// 当前方块为空，无需处理
continue;
}
var nextRow = i + stepRow, nextCol = j + stepCol;
while (nextRow >= 0 && nextRow < 4 && nextCol >= 0 && nextCol < 4) {
var next = cells[nextRow][nextCol];
if (next.innerHTML == '') {
// 下一个方块为空，移动当前方块
next.innerHTML = current.innerHTML;
next.classList.add('tile' + current.innerHTML);
current.innerHTML = '';
current.classList.remove('tile' + current.innerHTML);
current.classList.remove('tile');
current = next;
nextRow += stepRow;
nextCol += stepCol;
moved = true;
} else if (next.innerHTML == current.innerHTML) {
// 下一个方块的值与当前方块相等，合并
next.innerHTML = parseInt(next.innerHTML) + parseInt(current.innerHTML);
score += parseInt(next.innerHTML);
updateScore();
next.classList.remove('tile' + current.innerHTML);
current.innerHTML = '';
current.classList.remove('tile' + current.innerHTML);
current.classList.remove('tile');
moved = true;
break;
} else {
// 下一个方块的值与当前方块不相等，无法合并
break;
}
}
}
}
// 如果有方块移动，则随机生成一个新方块
if (moved) {
generateTile();
}
}</p>
<p>// 显示蒙层和提示框
function showOverlay(message) {
result.innerHTML = message;
overlay.style.display = 'block';
}</p>
<p>// 隐藏蒙层和提示框
function hideOverlay() {
overlay.style.display = 'none';
}</p>
<p>// 绑定键盘事件
document.addEventListener('keydown', function(event) {
switch (event.keyCode) {
case 37: // 左箭头
move('left');
break;
case 38: // 上箭头
move('up');
break;
case 39: // 右箭头
move('right');
break;
case 40: // 下箭头
move('down');
break;
}
});</p>
<p>// 初始化游戏
init();</p>
原文地址: http://www.cveoy.top/t/topic/nuVC 著作权归作者所有。请勿转载和采集!