• 日期: 2025-07-04 22:22:38
  • 标签: 科技

以下是一个8*8的前端2048游戏代码及代码解释：

HTML代码

<!DOCTYPE html>
<html>
<head>
	<title>2048</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="game-container">
		<div class="game-header">
			<h1>2048</h1>
			<div class="score-container">
				<div class="score-label">Score:</div>
				<div class="score">0</div>
			</div>
		</div>
		<div class="game-board">
			<div class="row">
				<div class="cell"></div>
				<div class="cell"></div>
				<div class="cell"></div>
				<div class="cell"></div>
				<div class="cell"></div>
				<div class="cell"></div>
				<div class="cell"></div>
				<div class="cell"></div>
			</div>
			<!-- 重复7次 -->
		</div>
		<div class="game-message">
			<p></p>
			<div class="button-container">
				<button class="retry-button">Try Again</button>
			</div>
		</div>
	</div>

	<script src="script.js"></script>
</body>
</html>

这是游戏的HTML代码。它包括游戏容器、游戏头部、得分、游戏板、游戏消息和重玩按钮。游戏板由8行和8列的单元格组成，每个单元格都有一个类名为“cell”。

CSS代码

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 0;
	font-family: sans-serif;
}

.game-container {
	margin: auto;
	padding: 20px;
	max-width: 600px;
}

.game-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
}

.game-header h1 {
	margin: 0;
	font-size: 48px;
	color: #776e65;
}

.score-container {
	background-color: #bbada0;
	border-radius: 6px;
	padding: 10px;
	display: flex;
	align-items: center;
}

.score-label {
	font-size: 24px;
	color: #eee4da;
	margin-right: 10px;
}

.score {
	font-size: 36px;
	color: #ffffff;
	background-color: #bbada0;
	border-radius: 4px;
	padding: 8px;
}

.game-board {
	background-color: #bbada0;
	border-radius: 6px;
	padding: 10px;
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	grid-gap: 10px;
}

.row {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

.cell {
	background-color: #cdc1b4;
	border-radius: 6px;
	width: 100%;
	height: 0;
	padding-bottom: 100%;
	position: relative;
}

.cell span {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 36px;
	font-weight: bold;
	color: #776e65;
}

.game-message {
	background-color: rgba(238, 228, 218, 0.73);
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s, visibility 0.3s;
}

.game-message p {
	font-size: 48px;
	font-weight: bold;
	color: #776e65;
	margin-bottom: 20px;
}

.button-container {
	display: flex;
	align-items: center;
	justify-content: center;
}

.retry-button {
	background-color: #8f7a66;
	color: #f9f6f2;
	border-radius: 6px;
	padding: 10px 20px;
	font-size: 24px;
	font-weight: bold;
	cursor: pointer;
}

.game-message.show {
	opacity: 1;
	visibility: visible;
}

这是游戏的CSS代码。它设置了游戏的样式，包括游戏容器、游戏头部、得分、游戏板、游戏消息和重玩按钮。游戏板的单元格具有相同的高度和宽度，以使它们成为正方形。

JavaScript代码

// 获取游戏板和游戏单元格
var gameBoard = document.querySelector('.game-board');
var cells = document.querySelectorAll('.cell');

// 初始化游戏单元格
for (var i = 0; i < cells.length; i++) {
	var cell = cells[i];
	cell.innerHTML = '<span></span>';
}

// 创建游戏数据
var data = [];
for (var i = 0; i < 8; i++) {
	data.push([]);
	for (var j = 0; j < 8; j++) {
		data[i].push(null);
	}
}

// 随机生成2或4
function generateRandomNumber() {
	return Math.random() < 0.5 ? 2 : 4;
}

// 在空的单元格中随机生成数字
function generateRandomCell() {
	var emptyCells = [];
	for (var i = 0; i < data.length; i++) {
		for (var j = 0; j < data[i].length; j++) {
			if (data[i][j] === null) {
				emptyCells.push({
					x: i,
					y: j
				});
			}
		}
	}
	var randomCell = emptyCells[Math.floor(Math.random() * emptyCells.length)];
	data[randomCell.x][randomCell.y] = generateRandomNumber();
	updateGameBoard();
}

// 更新游戏板
function updateGameBoard() {
	for (var i = 0; i < data.length; i++) {
		for (var j = 0; j < data[i].length; j++) {
			var cell = cells[i * 8 + j];
			if (data[i][j] === null) {
				cell.classList.remove('merged');
				cell.querySelector('span').innerHTML = '';
			} else {
				cell.classList.add('merged');
				cell.querySelector('span').innerHTML = data[i][j];
			}
		}
	}
}

// 移动数字
function moveNumbers(direction) {
	var moved = false;
	var merged = false;

	// 根据移动方向获取游戏数据的行和列
	var rows = [];
	var cols = [];
	if (direction === 'up') {
		for (var j = 0; j < data[0].length; j++) {
			var row = [];
			for (var i = 0; i < data.length; i++) {
				row.push(data[i][j]);
			}
			rows.push(row);
			cols.push(row);
		}
	} else if (direction === 'down') {
		for (var j = 0; j < data[0].length; j++) {
			var row = [];
			for (var i = data.length - 1; i >= 0; i--) {
				row.push(data[i][j]);
			}
			rows.push(row.reverse());
			cols.push(row);
		}
	} else if (direction === 'left') {
		for (var i = 0; i < data.length; i++) {
			var row = [];
			for (var j = 0; j < data[i].length; j++) {
				row.push(data[i][j]);
			}
			rows.push(row);
			cols.push(row);
		}
	} else if (direction === 'right') {
		for (var i = 0; i < data.length; i++) {
			var row = [];
			for (var j = data[i].length - 1; j >= 0; j--) {
				row.push(data[i][j]);
			}
			rows.push(row.reverse());
			cols.push(row);
		}
	}

	// 移动数字
	for (var i = 0; i < rows.length; i++) {
		var row = rows[i];
		for (var j = 0; j < row.length; j++) {
			if (row[j] !== null) {
				var k = j;
				while (k > 0 && row[k - 1] === null) {
					k--;
					moved = true;
				}
				if (k !== j) {
					row[k] = row[j];
					row[j] = null;
				}
			}
		}
	}

	// 合并数字
	for (var i = 0; i < rows.length; i++) {
		var row = rows[i];
		for (var j = 0; j < row.length - 1; j++) {
			if (row[j] !== null && row[j] === row[j + 1]) {
				row[j] *= 2;
				row[j + 1] = null;
				merged = true;
			}
		}
	}

	// 移动数字
	for (var i = 0; i < rows.length; i++) {
		var row = rows[i];
		for (var j = 0; j < row.length; j++) {
			if (row[j] !== null) {
				var k = j;
				while (k > 0 && row[k - 1] === null) {
					k--;
				}
				if (k !== j) {
					row[k] = row[j];
					row[j] = null;
					moved = true;
				}
			}
		}
	}

	// 根据移动方向更新游戏数据
	if (direction === 'up') {
		for (var j = 0; j < data[0].length; j++) {
			for (var i = 0; i < data.length; i++) {
				data[i][j] = cols[j][i];
			}
		}
	} else if (direction === 'down') {
		for (var j = 0; j < data[0].length; j++) {
			for (var i = data.length - 1; i >= 0; i--) {
				data[i][j] = cols[j][data.length - 1 - i];
			}
		}
	} else if (direction === 'left') {
		for (var i = 0; i < data.length; i++) {
			for (var j = 0; j < data[i].length; j++) {
				data[i][j] = rows[i][j];
			}
		}
	} else if (direction === 'right') {
		for (var i = 0; i < data.length; i++) {
			for (var j = data[i].length - 1; j >= 0; j--) {
				data[i][j] = rows[i][data[i].length - 1 - j];
			}
		}
	}

	// 如果移动或合并了数字，则生成新的数字
	if (moved || merged) {
		generateRandomCell();
	}
}

// 更新得分
function updateScore() {
	var score = 0;
	for (var i = 0; i < data.length; i++) {
		for (var j = 0; j < data[i].length; j++) {
			if (data[i][j] !== null) {
				score += data[i][j];
			}
		}
	}
	document.querySelector('.score').innerHTML = score;
}

// 游戏结束
function gameOver() {
	document.querySelector('.game-message p').innerHTML = 'Game Over';
	document.querySelector('.game-message').classList.add('show');
}

// 检查游戏是否结束
function checkGameOver() {
	for (var i = 0; i < data.length; i++) {
		for (var j = 0; j < data[i].length; j++) {
			if (data[i][j] === null) {
				return false;
			}
			if (i > 0 && data[i - 1][j] === data[i][j]) {
				return false;
			}
			if (i < data.length - 1 && data[i + 1][j] === data[i][j]) {
				return false;
			}
			if (j > 0 && data[i][j - 1] === data[i][j]) {
				return false;
			}
			if (j < data[i].length - 1 && data[i][j + 1] === data[i][j]) {
				return false;
			}
		}
	}
	return true;
}

// 处理按键事件
document.addEventListener('keydown', function(event) {
	if (event.keyCode === 38) { // Up
		event.preventDefault();
		moveNumbers('up');
	} else if (event.keyCode === 40) { // Down
		event.preventDefault();
		moveNumbers('down');
	} else if (event.keyCode === 37) { // Left
		event.preventDefault();
		moveNumbers('left');
	} else if (event.keyCode === 39) { // Right
		event.preventDefault();
		moveNumbers('right');
	}

	// 更新得分
	updateScore();

	// 检查游戏是否结束
	if (checkGameOver()) {
		gameOver();
	}
});

// 处理重玩按钮点击事件
document.querySelector('.retry-button').addEventListener('click', function() {
	// 重新开始游戏
	data = [];
	for (var i = 0; i < 8; i++) {
		data.push([]);
		for (var j = 0; j < 8; j++) {
			data[i].push(null);
		}
	}
	generateRandomCell();
	generateRandomCell();
	updateScore();
	document.querySelector('.game-message').classList.remove('show');
});

这是游戏的JavaScript代码。它包括初始化游戏单元格、创建游戏数据、随机生成2或4、在空的单元格中随机生成数字、更新游戏板、移动数字、合并数字、更新得分、检查游戏是否结束、游戏结束和处理按键事件。它还处理重玩按钮的点击事件

写一个88的前端2048游戏代码及代码解释

原文地址: https://www.cveoy.top/t/topic/co6j 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录