基于js的2048游戏
时间: 2023-11-14 21:05:46 浏览: 47
下面是一个基于 JavaScript 的 2048 游戏的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>2048 Game</title>
<style>
body {
margin: 0;
padding: 0;
font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
h1 {
text-align: center;
margin-top: 50px;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
height: 400px;
width: 400px;
margin: 0 auto;
}
.box {
display: flex;
justify-content: center;
align-items: center;
height: 100px;
width: 100px;
border: 1px solid #ccc;
font-size: 36px;
font-weight: bold;
background-color: #eee;
margin: 5px;
}
.box-2 {
background-color: #eee4da;
}
.box-4 {
background-color: #ede0c8;
}
.box-8 {
background-color: #f2b179;
}
.box-16 {
background-color: #f59563;
}
.box-32 {
background-color: #f67c5f;
}
.box-64 {
background-color: #f65e3b;
}
.box-128 {
background-color: #edcf72;
}
.box-256 {
background-color: #edcc61;
}
.box-512 {
background-color: #edc850;
}
.box-1024 {
background-color: #edc53f;
}
.box-2048 {
background-color: #edc22e;
}
.box-empty {
background-color: #ccc0b3;
}
</style>
</head>
<body>
<h1>2048 Game</h1>
<div class="container"></div>
<script>
// 初始化游戏
var board = [];
var score = 0;
function init() {
for (var i = 0; i < 4; i++) {
board[i] = [];
for (var j = 0; j < 4; j++) {
board[i][j] = 0;
}
}
score = 0;
generateNumber();
generateNumber();
updateBoard();
}
// 生成随机数
function generateNumber() {
var emptyCells = [];
for (var i = 0; i < 4; i++) {
for (var j = 0; j < 4; j++) {
if (board[i][j] === 0) {
emptyCells.push([i, j]);
}
}
}
if (emptyCells.length === 0) {
return false;
}
var randomCell = emptyCells[Math.floor(Math.random() * emptyCells.length)];
var randomNumber = Math.random() < 0.5 ? 2 : 4;
board[randomCell[0]][randomCell[1]] = randomNumber;
return true;
}
// 更新游戏面板
function updateBoard() {
var container = document.querySelector('.container');
container.innerHTML = '';
for (var i = 0; i < 4; i++) {
for (var j = 0; j < 4; j++) {
var box = document.createElement('div');
box.classList.add('box');
box.classList.add('box-' + board[i][j]);
box.innerText = board[i][j] > 0 ? board[i][j] : '';
container.appendChild(box);
}
}
document.querySelector('#score').innerText = score;
}
// 向左移动
function moveLeft() {
var hasMoved = false;
for (var i = 0; i < 4; i++) {
for (var j = 1; j < 4; j++) {
if (board[i][j] !== 0) {
for (var k = 0; k < j; k++) {
if (board[i][k] === 0 && noBlockHorizontal(i, k, j, board)) {
board[i][k] = board[i][j];
board[i][j] = 0;
hasMoved = true;
break;
} else if (board[i][k] === board[i][j] && noBlockHorizontal(i, k, j, board)) {
board[i][k] *= 2;
board[i][j] = 0;
score += board[i][k];
hasMoved = true;
break;
}
}
}
}
}
if (hasMoved) {
generateNumber();
updateBoard();
}
}
// 向右移动
function moveRight() {
var hasMoved = false;
for (var i = 0; i < 4; i++) {
for (var j = 2; j >= 0; j--) {
if (board[i][j] !== 0) {
for (var k = 3; k > j; k--) {
if (board[i][k] === 0 && noBlockHorizontal(i, j, k, board)) {
board[i][k] = board[i][j];
board[i][j] = 0;
hasMoved = true;
break;
} else if (board[i][k] === board[i][j] && noBlockHorizontal(i, j, k, board)) {
board[i][k] *= 2;
board[i][j] = 0;
score += board[i][k];
hasMoved = true;
break;
}
}
}
}
}
if (hasMoved) {
generateNumber();
updateBoard();
}
}
// 向上移动
function moveUp() {
var hasMoved = false;
for (var i = 1; i < 4; i++) {
for (var j = 0; j < 4; j++) {
if (board[i][j] !== 0) {
for (var k = 0; k < i; k++) {
if (board[k][j] === 0 && noBlockVertical(j, k, i, board)) {
board[k][j] = board[i][j];
board[i][j] = 0;
hasMoved = true;
break;
} else if (board[k][j] === board[i][j] && noBlockVertical(j, k, i, board)) {
board[k][j] *= 2;
board[i][j] = 0;
score += board[k][j];
hasMoved = true;
break;
}
}
}
}
}
if (hasMoved) {
generateNumber();
updateBoard();
}
}
// 向下移动
function moveDown() {
var hasMoved = false;
for (var i = 2; i >= 0; i--) {
for (var j = 0; j < 4; j++) {
if (board[i][j] !== 0) {
for (var k = 3; k > i; k--) {
if (board[k][j] === 0 && noBlockVertical(j, i, k, board)) {
board[k][j] = board[i][j];
board[i][j] = 0;
hasMoved = true;
break;
} else if (board[k][j] === board[i][j] && noBlockVertical(j, i, k, board)) {
board[k][j] *= 2;
board[i][j] = 0;
score += board[k][j];
hasMoved = true;
break;
}
}
}
}
}
if (hasMoved) {
generateNumber();
updateBoard();
}
}
// 判断水平方向上是否有障碍物
function noBlockHorizontal(row, col1, col2, board) {
for (var i = col1 + 1; i < col2; i++) {
if (board[row][i] !== 0) {
return false;
}
}
return true;
}
// 判断垂直方向上是否有障碍物
function noBlockVertical(col, row1, row2, board) {
for (var i = row1 + 1; i < row2; i++) {
if (board[i][col] !== 0) {
return false;
}
}
return true;
}
// 监听键盘事件
window.addEventListener('keydown', function(event) {
switch (event.keyCode) {
case 37: // 左箭头
event.preventDefault();
moveLeft();
break;
case 38: // 上箭头
event.preventDefault();
moveUp();
break;
case 39: // 右箭头
event.preventDefault();
moveRight();
break;
case 40: // 下箭头
event.preventDefault();
moveDown();
break;
}
});
// 初始化游戏
init();
</script>
</body>
</html>
```
在这个示例中,我们使用了 HTML、CSS 和 JavaScript 来构建一个简单的 2048 游戏。游戏面板是一个 4x4 的网格,每个格子里可以显示一个数字。游戏的目标是通过移动数字,使得相同数字的格子合并成一个更大的数字,直到达到 2048 为止。
在代码中,我们定义了一个 `board` 数组来存储游戏面板上每个格子的数字,以及一个 `score` 变量来记录当前得分。我们还定义了一些函数来初始化游戏、生成随机数、更新游戏面板、移动数字等。
在 `moveLeft`、`moveRight`、`moveUp` 和 `moveDown` 函数中,我们使用了 `noBlockHorizontal` 和 `noBlockVertical` 函数来判断水平方向和垂直方向上是否有障碍物。这些函数用于判断当前位置是否可以移动数字,以及数字是否可以合并。
最后,在页面加载完成后,我们调用 `init` 函数来初始化游戏。我们还监听了键盘事件,当用户按下左、右、上、下箭头键时,分别调用相应的移动函数来移动数字。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)