<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.game-container {
margin: 0 auto;
width: 400px;
}
.game-header {
text-align: center;
margin-bottom: 20px;
}
.game-board {
display: flex;
flex-direction: column;
background-color: #bbada0;
border-radius: 6px;
padding: 10px;
}
.game-row {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-bottom: 10px;
}
.game-cell {
width: 90px;
height: 90px;
background-color: #cdc1b4;
border-radius: 6px;
font-size: 36px;
font-weight: bold;
color: #776e65;
display: flex;
justify-content: center;
align-items: center;
}
.game-cell[data-value="2"] {
background-color: #eee4da;
color: #776e65;
}
.game-cell[data-value="4"] {
background-color: #ede0c8;
color: #776e65;
}
.game-cell[data-value="8"] {
background-color: #f2b179;
color: #f9f6f2;
}
.game-cell[data-value="16"] {
background-color: #f59563;
color: #f9f6f2;
}
.game-cell[data-value="32"] {
background-color: #f67c5f;
color: #f9f6f2;
}
.game-cell[data-value="64"] {
background-color: #f65e3b;
color: #f9f6f2;
}
.game-cell[data-value="128"] {
background-color: #edcf72;
color: #f9f6f2;
}
.game-cell[data-value="256"] {
background-color: #edcc61;
color: #f9f6f2;
}
.game-cell[data-value="512"] {
background-color: #edc850;
color: #f9f6f2;
}
.game-cell[data-value="1024"] {
background-color: #edc53f;
color: #f9f6f2;
}
.game-cell[data-value="2048"] {
background-color: #edc22e;
color: #f9f6f2;
}
.game-cell[data-value="4096"] {
background-color: #3c3a32;
color: #f9f6f2;
}
</style>
</head>
<body>
<div class="game-container">
<div class="game-header">
<h1>2048</h1>
<p>Join the numbers and get to the 2048 tile!</p>
</div>
<div class="game-board">
<div class="game-row">
<div class="game-cell" data-x="0" data-y="0"></div>
<div class="game-cell" data-x="0" data-y="1"></div>
<div class="game-cell" data-x="0" data-y="2"></div>
<div class="game-cell" data-x="0" data-y="3"></div>
</div>
<div class="game-row">
<div class="game-cell" data-x="1" data-y="0"></div>
<div class="game-cell" data-x="1" data-y="1"></div>
<div class="game-cell" data-x="1" data-y="2"></div>
<div class="game-cell" data-x="1" data-y="3"></div>
</div>
<div class="game-row">
<div class="game-cell" data-x="2" data-y="0"></div>
<div class="game-cell" data-x="2" data-y="1"></div>
<div class="game-cell" data-x="2" data-y="2"></div>
<div class="game-cell" data-x="2" data-y="3"></div>
</div>
<div class="game-row">
<div class="game-cell" data-x="3" data-y="0"></div>
<div class="game-cell" data-x="3" data-y="1"></div>
<div class="game-cell" data-x="3" data-y="2"></div>
<div class="game-cell" data-x="3" data-y="3"></div>
</div>
</div>
</div>
<script>
// 初始化游戏面板
function initGameBoard() {
const board = [];
for (let i = 0; i < 4; i++) {
board[i] = [];
for (let j = 0; j < 4; j++) {
board[i][j] = 0;
}
}
return board;
}
// 在游戏面板中随机生成一个数字
function generateNumber(board) {
const emptyCells = [];
for (let i = 0; i < 4; i++) {
for (let j = 0; j < 4; j++) {
if (board[i][j] === 0) {
emptyCells.push({ x: i, y: j });
}
}
}
if (emptyCells.length > 0) {
const cell = emptyCells[Math.floor(Math.random() * emptyCells.length)];
board[cell.x][cell.y] = Math.random() < 0.9 ? 2 : 4;
}
}
// 判断游戏是否结束
function isGameOver(board) {
for (let i = 0; i < 4; i++) {
for (let j = 0; j < 4; j++) {
if (board[i][j] === 0) {
return false;
}
if (i < 3 && board[i][j] === board[i + 1][j]) {
return false;
}
if (j < 3 && board[i][j] === board[i][j + 1]) {
return false;
}
}
}
return true;
}
// 移动游戏面板
function moveBoard(board, direction) {
let moved = false;
switch (direction) {
case "up":
for (let j = 0; j < 4; j++) {
for (let i = 1; i < 4; i++) {
if (board[i][j] !== 0) {
let k = i;
while (k > 0 && board[k - 1][j] === 0) {
board[k - 1][j] = board[k][j];
board[k][j] = 0;
k--;
moved = true;
}
if (k > 0 && board[k - 1][j] === board[k][j]) {
board[k - 1][j] *= 2;
board[k][j] = 0;
moved = true;
}
}
}
}
break;
case "down":
for (let j = 0; j < 4; j++) {
for (let i = 2; i >= 0; i--) {
if (board[i][j] !== 0) {
let k = i;
while (k < 3 && board[k + 1][j] === 0) {
board[k + 1][j] = board[k][j];
board[k][j] = 0;
k++;
moved = true;
}
if (k < 3 && board[k + 1][j] === board[k][j]) {
board[k + 1][j] *= 2;
board[k][j] = 0;
moved = true;
}
}
}
}
break;
case "left":
for (let i = 0; i < 4; i++) {
for (let j = 1; j < 4; j++) {
if (board[i][j] !== 0) {
let k = j;
while (k > 0 && board[i][k - 1] === 0) {
board[i][k - 1] = board[i][k];
board[i][k] = 0;
k--;
moved = true;
}
if (k > 0 && board[i][k - 1] === board[i][k]) {
board[i][k - 1] *= 2;
board[i][k] = 0;
moved = true;
}
}
}
}
break;
case "right":
for (let i = 0; i < 4; i++) {
for (let j = 2; j >= 0; j--) {
if (board[i][j] !== 0) {
let k = j;
while (k < 3 && board[i][k + 1] === 0) {
board[i][k + 1] = board[i][k];
board[i][k] = 0;
k++;
moved = true;
}
if (k < 3 && board[i][k + 1] === board[i][k]) {
board[i][k + 1] *= 2;
board[i][k] = 0;
moved = true;
}
}
}
}
break;
}
return moved;
}
// 更新游戏面板
function updateGameBoard(board) {
for (let i = 0; i < 4; i++) {
for (let j = 0; j < 4; j++) {
const cell = document.querySelector(`.game-cell[data-x="${i}"][data-y="${j}"]`);
cell.dataset.value = board[i][j];
cell.textContent = board[i][j] === 0 ? "" : board[i][j];
}
}
}
// 初始化游戏
function initGame() {
let board = initGameBoard();
generateNumber(board);
generateNumber(board);
updateGameBoard(board);
// 监听键盘事件
document.addEventListener("keydown", event => {
let moved = false;
switch (event.key) {
case "ArrowUp":
moved = moveBoard(board, "up");
break;
case "ArrowDown":
moved = moveBoard(board, "down");
break;
case "ArrowLeft":
moved = moveBoard(board, "left");
break;
case "ArrowRight":
moved = moveBoard(board, "right");
break;
}
if (moved) {
generateNumber(board);
updateGameBoard(board);
if (isGameOver(board)) {
alert("Game over!");
}
}
});
}
// 开始游戏
initGame();
</script>
</body>
</html>
扫一扫
379
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
