源代码在效果图后面
效果图
源代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2048 Game</title>
<style>
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #f7f7f7;
font-family: Arial, sans-serif;
}
.game-container {
width: 400px;
height: 400px;
background: #fff;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.tile {
width: 25%;
height: 25%;
box-sizing: border-box;
position: relative;
background: #fff;
border: 1px solid #eaeaea;
margin: 0;
float: left;
text-align: center;
line-height: 100px;
font-size: 48px;
color: #776e65;
border-radius: 10px;
transition: transform 0.2s;
}
.tile:after {
content: '';
display: block;
padding-top: 100%;
}
.tile.new {
animation: slideIn 0.5s;
}
.tile.tile-2 {
background: #eee4da;
}
.tile.tile-4 {
background: #ede0c8;
}
.tile.tile-8 {
background: #f2b47b;
}
.tile.tile-16 {
background: #f59563;
}
.tile.tile-32 {
background: #f67c5f;
}
.tile.tile-64 {
background: #f65e3b;
}
.tile.tile-128 {
background: #edcf72;
}
.tile.tile-256 {
background: #edcc61;
}
.tile.tile-512 {
background: #edc850;
}
.tile.tile-1024 {
background: #edc53f;
}
.tile.tile-2048 {
background: #edc22e;
}
@keyframes slideIn {
0% {
transform: translate(-50%, -50%) rotate(90deg);
}
100% {
transform: translate(-50%, -50%) rotate(0deg);
}
}
</style>
</head>
<body>
<div class="game-container" id="game-container"></div>
<div style="margin-top: 20px;">
<button onclick="moveUp()">上</button>
<button onclick="moveDown()">下</button>
<button onclick="moveLeft()">左</button>
<button onclick="moveRight()">右</button>
</div>
<script>
const container = document.getElementById('game-container');
let grid = [];
let score = 0;
function createGrid() {
for (let i = 0; i < 4; i++) {
const row = [];
for (let j = 0; j < 4; j++) {
const tile = document.createElement('div');
tile.classList.add('tile');
tile.dataset.row = i;
tile.dataset.col = j;
container.appendChild(tile);
row.push(tile);
}
grid.push(row);
}
}
function addRandomTile() {
const emptyCells = [];
grid.forEach((row, rowIndex) => {
row.forEach((tile, colIndex) => {
if (!tile.classList.contains('tile-2') &&!tile.classList.contains('tile-4') &&!tile.classList.contains('tile-8') &&!tile.classList.contains('tile-16') &&!tile.classList.contains('tile-32') &&!tile.classList.contains('tile-64') &&!tile.classList.contains('tile-128') &&!tile.classList.contains('tile-256') &&!tile.classList.contains('tile-512') &&!tile.classList.contains('tile-1024') &&!tile.classList.contains('tile-2048')) {
emptyCells.push({ row: rowIndex, col: colIndex });
}
});
});
if (emptyCells.length) {
const randomIndex = Math.floor(Math.random() * emptyCells.length);
const cell = emptyCells[randomIndex];
const value = Math.random() > 0.5? 2 : 4;
addTile(cell.row, cell.col, value);
}
}
function addTile(row, col, value) {
const tile = grid[row][col];
tile.classList.add(`tile-${value}`);
tile.textContent = value;
}
function removeTile(row, col) {
const tile = grid[row][col];
tile.classList.remove('tile-2', 'tile-4', 'tile-8', 'tile-16', 'tile-32', 'tile-64', 'tile-128', 'tile-256', 'tile-512', 'tile-1024', 'tile-2048');
tile.textContent = '';
}
function moveUp() {
for (let col = 0; col < 4; col++) {
let merged = false;
let newRow = [];
for (let row = 0; row < 4; row++) {
const tile = grid[row][col];
if (tile.textContent === '') continue;
let currentValue = parseInt(tile.textContent);
if (newRow.length === 0) {
newRow.push(currentValue);
} else {
const lastValue = newRow[newRow.length - 1];
if (lastValue === currentValue &&!merged) {
newRow[newRow.length - 1] = currentValue * 2;
score += currentValue * 2;
merged = true;
} else {
newRow.push(currentValue);
merged = false;
}
}
}
for (let row = 0; row < 4; row++) {
if (row < newRow.length) {
addTile(row, col, newRow[row]);
} else {
removeTile(row, col);
}
}
}
addRandomTile();
}
function moveDown() {
for (let col = 0; col < 4; col++) {
let merged = false;
let newRow = [];
for (let row = 3; row >= 0; row--) {
const tile = grid[row][col];
if (tile.textContent === '') continue;
let currentValue = parseInt(tile.textContent);
if (newRow.length === 0) {
newRow.push(currentValue);
} else {
const lastValue = newRow[newRow.length - 1];
if (lastValue === currentValue &&!merged) {
newRow[newRow.length - 1] = currentValue * 2;
score += currentValue * 2;
merged = true;
} else {
newRow.push(currentValue);
merged = false;
}
}
}
for (let row = 3; row >= 0; row--) {
if (3 - row < newRow.length) {
addTile(row, col, newRow[3 - row]);
} else {
removeTile(row, col);
}
}
}
addRandomTile();
}
function moveLeft() {
for (let row = 0; row < 4; row++) {
let merged = false;
let newCol = [];
for (let col = 0; col < 4; col++) {
const tile = grid[row][col];
if (tile.textContent === '') continue;
let currentValue = parseInt(tile.textContent);
if (newCol.length === 0) {
newCol.push(currentValue);
} else {
const lastValue = newCol[newCol.length - 1];
if (lastValue === currentValue &&!merged) {
newCol[newCol.length - 1] = currentValue * 2;
score += currentValue * 2;
merged = true;
} else {
newCol.push(currentValue);
merged = false;
}
}
}
for (let col = 0; col < 4; col++) {
if (col < newCol.length) {
addTile(row, col, newCol[col]);
} else {
removeTile(row, col);
}
}
}
addRandomTile();
}
function moveRight() {
for (let row = 0; row < 4; row++) {
let merged = false;
let newCol = [];
for (let col = 3; col >= 0; col--) {
const tile = grid[row][col];
if (tile.textContent === '') continue;
let currentValue = parseInt(tile.textContent);
if (newCol.length === 0) {
newCol.push(currentValue);
} else {
const lastValue = newCol[newCol.length - 1];
if (lastValue === currentValue &&!merged) {
newCol[newCol.length - 1] = currentValue * 2;
score += currentValue * 2;
merged = true;
} else {
newCol.push(currentValue);
merged = false;
}
}
}
for (let col = 3; col >= 0; col--) {
if (3 - col < newCol.length) {
addTile(row, col, newCol[3 - col]);
} else {
removeTile(row, col);
}
}
}
addRandomTile();
}
function checkGameEnd() {
// 检查是否无法再进行移动
let canMove = false;
for (let row = 0; row < 4; row++) {
for (let col = 0; col < 4; col++) {
const tile = grid[row][col];
if (tile.textContent === '') {
canMove = true;
break;
}
if (row > 0 && parseInt(grid[row - 1][col].textContent) === parseInt(tile.textContent)) {
canMove = true;
break;
}
if (row < 3 && parseInt(grid[row + 1][col].textContent) === parseInt(tile.textContent)) {
canMove = true;
break;
}
if (col > 0 && parseInt(grid[row][col - 1].textContent) === parseInt(tile.textContent)) {
canMove = true;
break;
}
if (col < 3 && parseInt(grid[row][col + 1].textContent) === parseInt(tile.textContent)) {
canMove = true;
break;
}
}
if (canMove) break;
}
if (!canMove) {
alert('游戏结束！你的得分是：' + score);
}
}
document.addEventListener('keydown', (e) => {
switch (e.key) {
case 'ArrowUp':
moveUp();
break;
case 'ArrowDown':
moveDown();
break;
case 'ArrowLeft':
moveLeft();
break;
case 'ArrowRight':
moveRight();
break;
}
});
createGrid();
addRandomTile();
addRandomTile();
</script>
</body>
</html>
