引言
2048是一款风靡全球的数字拼图游戏,由意大利开发者Gabriele Cirulli在2014年开发。这款游戏的目标是通过上下左右滑动来移动瓷砖,当两个相同数字的瓷砖碰撞时,它们会合并成一个新的瓷砖,其值为原来的两倍。每次移动后,会在随机位置生成一个新的数字瓷砖(通常是2或4)。如果无法再进行任何有效的移动,则游戏结束。本文将详细介绍如何使用HTML、CSS和JavaScript实现一个完整的网页版2048小游戏。
游戏的基本结构
在开始编写代码之前,我们需要明确游戏的基本结构。2048游戏的核心是一个4x4的网格(可以扩展到其他尺寸),玩家可以通过上下左右滑动来移动瓷砖。以下是游戏的基本组成部分:
- 游戏面板:一个4x4的网格,用于显示瓷砖。
- 得分面板:显示当前分数以及重新开始按钮。
- 用户输入:处理用户的键盘或触摸输入,以控制瓷砖的移动。
- 核心逻辑:包括移动、合并、添加新数字、检测游戏结束等。
HTML结构
首先,我们需要创建一个基本的HTML页面结构。这个结构包括一个得分面板和一个游戏棋盘。
<body>
<div id="score-panel">
<div>分数: <span id="score">0</span></div>
<button>重新开始</button>
</div>
<div id="game-board"></div>
<script></script>
</body>
CSS样式
接下来,我们定义一些基本的CSS样式来美化游戏界面。这些样式包括背景颜色、字体大小、瓷砖的颜色和布局等。
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #faf8ef;
margin: 0;
font-family: Arial, sans-serif;
}
#score-panel {
width: 95%;
max-width: 360px;
margin-bottom: 20px;
}
#game-board {
width: 95%;
max-width: 360px;
display: grid;
gap: 5px;
}
.tile {
width: 100%;
height: 100%;
background-color: #eee4da;
border-radius: 3px;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
color: #776e65;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
JavaScript逻辑
核心的游戏逻辑主要通过JavaScript实现。我们将分为几个部分来介绍:初始化游戏、处理用户输入、移动和合并瓷砖、添加新数字、检测游戏结束状态以及动态调整瓷砖大小。
1.初始化游戏
首先,我们需要初始化游戏面板和相关变量。这包括创建一个4x4的二维数组来表示游戏面板,并在其中随机放置两个初始数字瓷砖。
const boardSize = 4;
let board = Array(boardSize).fill(null).map(() => Array(boardSize).fill(0));
let score = 0;
let tileSize = 80;
function addNewNumber() {
let options = [];
for (let i = 0; i < boardSize; i++) {
for (let j = 0; j < boardSize; j++) {
if (board[i][j] === 0) options.push([i, j]);
}
}
if (options.length > 0) {
let [row, col] = options[Math.floor(Math.random() * options.length)];
board[row][col] = Math.random() < 0.9 ? 2 : 4;
}
}
function renderBoard() {
const gameBoard = document.getElementById('game-board');
gameBoard.style.gridTemplateColumns = `repeat(${boardSize}, ${tileSize}px)`;
gameBoard.style.gridTemplateRows = `repeat(${boardSize}, ${tileSize}px)`;
gameBoard.innerHTML = '';
board.forEach((row, rowIndex) => {
row.forEach((num, colIndex) => {
const tile = document.createElement('div');
tile.classList.add('tile');
tile.textContent = num !== 0 ? num : '';
tile.dataset.row = rowIndex;
tile.dataset.col = colIndex;
gameBoard.appendChild(tile);
});
});
document.getElementById('score').textContent = score;
}
2.处理用户输入
为了处理用户的键盘和触摸输入,我们需要监听相关的事件,并根据用户的操作来更新游戏面板。
document.addEventListener('keydown', handleKeydown);
document.addEventListener('touchstart', handleTouchStar