用js代码开发2048网页版小游戏
时间: 2023-08-28 08:07:51 浏览: 43
好的,下面是一个简单的实现:
1. HTML
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2048小游戏</title>
<style>
.container {
width: 400px;
margin: 0 auto;
text-align: center;
}
.row {
display: flex;
justify-content: space-between;
}
.cell {
width: 90px;
height: 90px;
border: 1px solid #ccc;
font-size: 40px;
display: flex;
justify-content: center;
align-items: center;
}
.cell.empty {
background-color: #eee;
}
</style>
</head>
<body>
<div class="container">
<h1>2048小游戏</h1>
<div class="board"></div>
<button id="reset">重新开始</button>
</div>
<script src="js/2048.js"></script>
</body>
</html>
```
2. JavaScript
```js
// 定义变量和常量
const ROWS = 4;
const COLS = 4;
const EMPTY = 0;
const CELL_SIZE = 90;
const KEY_LEFT = 37;
const KEY_UP = 38;
const KEY_RIGHT = 39;
const KEY_DOWN = 40;
let board = [];
let score = 0;
// 初始化游戏
function init() {
// 生成棋盘
let boardDiv = document.querySelector('.board');
boardDiv.style.width = `${CELL_SIZE * COLS}px`;
boardDiv.style.height = `${CELL_SIZE * ROWS}px`;
for (let row = 0; row < ROWS; row++) {
let rowDiv = document.createElement('div');
rowDiv.className = 'row';
board.push([]);
for (let col = 0; col < COLS; col++) {
let cellDiv = document.createElement('div');
cellDiv.className = 'cell empty';
cellDiv.style.width = `${CELL_SIZE}px`;
cellDiv.style.height = `${CELL_SIZE}px`;
rowDiv.appendChild(cellDiv);
board[row].push(EMPTY);
}
boardDiv.appendChild(rowDiv);
}
// 生成初始方块
addRandomCell();
addRandomCell();
}
// 在随机位置生成新方块
function addRandomCell() {
let emptyCells = [];
for (let row = 0; row < ROWS; row++) {
for (let col = 0; col < COLS; col++) {
if (board[row][col] === EMPTY) {
emptyCells.push({row, col});
}
}
}
if (emptyCells.length === 0) {
alert('游戏结束!');
return;
}
let {row, col} = emptyCells[Math.floor(Math.random() * emptyCells.length)];
board[row][col] = Math.random() < 0.5 ? 2 : 4;
render();
}
// 绘制棋盘
function render() {
for (let row = 0; row < ROWS; row++) {
for (let col = 0; col < COLS; col++) {
let cellDiv = document.querySelector(`.row:nth-child(${row + 1}) .cell:nth-child(${col + 1})`);
cellDiv.innerHTML = board[row][col] !== EMPTY ? board[row][col] : '';
cellDiv.className = `cell ${board[row][col] === EMPTY ? 'empty' : ''}`;
}
}
document.querySelector('#score').textContent = score;
}
// 移动方块
function move(keyCode) {
let moved = false;
switch (keyCode) {
case KEY_LEFT:
for (let row = 0; row < ROWS; row++) {
for (let col = 0; col < COLS; col++) {
if (board[row][col] !== EMPTY) {
let nextCol = col;
while (nextCol > 0 && board[row][nextCol - 1] === EMPTY) {
nextCol--;
}
if (nextCol > 0 && board[row][nextCol - 1] === board[row][col]) {
board[row][nextCol - 1] *= 2;
score += board[row][nextCol - 1];
board[row][col] = EMPTY;
moved = true;
} else if (nextCol !== col) {
board[row][nextCol] = board[row][col];
board[row][col] = EMPTY;
moved = true;
}
}
}
}
break;
case KEY_UP:
for (let col = 0; col < COLS; col++) {
for (let row = 0; row < ROWS; row++) {
if (board[row][col] !== EMPTY) {
let nextRow = row;
while (nextRow > 0 && board[nextRow - 1][col] === EMPTY) {
nextRow--;
}
if (nextRow > 0 && board[nextRow - 1][col] === board[row][col]) {
board[nextRow - 1][col] *= 2;
score += board[nextRow - 1][col];
board[row][col] = EMPTY;
moved = true;
} else if (nextRow !== row) {
board[nextRow][col] = board[row][col];
board[row][col] = EMPTY;
moved = true;
}
}
}
}
break;
case KEY_RIGHT:
for (let row = 0; row < ROWS; row++) {
for (let col = COLS - 1; col >= 0; col--) {
if (board[row][col] !== EMPTY) {
let nextCol = col;
while (nextCol < COLS - 1 && board[row][nextCol + 1] === EMPTY) {
nextCol++;
}
if (nextCol < COLS - 1 && board[row][nextCol + 1] === board[row][col]) {
board[row][nextCol + 1] *= 2;
score += board[row][nextCol + 1];
board[row][col] = EMPTY;
moved = true;
} else if (nextCol !== col) {
board[row][nextCol] = board[row][col];
board[row][col] = EMPTY;
moved = true;
}
}
}
}
break;
case KEY_DOWN:
for (let col = 0; col < COLS; col++) {
for (let row = ROWS - 1; row >= 0; row--) {
if (board[row][col] !== EMPTY) {
let nextRow = row;
while (nextRow < ROWS - 1 && board[nextRow + 1][col] === EMPTY) {
nextRow++;
}
if (nextRow < ROWS - 1 && board[nextRow + 1][col] === board[row][col]) {
board[nextRow + 1][col] *= 2;
score += board[nextRow + 1][col];
board[row][col] = EMPTY;
moved = true;
} else if (nextRow !== row) {
board[nextRow][col] = board[row][col];
board[row][col] = EMPTY;
moved = true;
}
}
}
}
break;
}
if (moved) {
addRandomCell();
render();
}
}
// 绑定事件
document.addEventListener('keydown', e => {
switch (e.keyCode) {
case KEY_LEFT:
case KEY_UP:
case KEY_RIGHT:
case KEY_DOWN:
e.preventDefault();
move(e.keyCode);
break;
}
});
document.querySelector('#reset').addEventListener('click', () => {
board = [];
score = 0;
document.querySelector('.board').innerHTML = '';
init();
});
// 开始游戏
init();
```
希望这个代码可以帮到你!