创建一个基于 Java Spring Boot 后端和 Vue 前端的 2048 游戏，可以按照以下步骤进行。这个项目将包括后端（用来处理游戏逻辑）和前端（用来显示游戏界面和与用户交互）。
目录
[1. 设置项目结构](#1. 设置项目结构)
[2. 后端 (Spring Boot)](#2. 后端 (Spring Boot))
[3. 前端 (Vue.js)](#3. 前端 (Vue.js))
[设置 Vue 项目](#设置 Vue 项目)
[在 App.vue 中导入 Game.vue](#在 App.vue 中导入 Game.vue)
[4. 运行和调试](#4. 运行和调试)
1. 设置项目结构
你需要创建一个包含两个部分的项目：
- 后端 (Java Spring Boot)
- 前端 (Vue.js)
2. 后端 (Spring Boot)
首先，创建一个新的 Spring Boot 项目。你可以使用 Spring Initializr 或者任何其他你喜欢的方式。
项目依赖
确保添加以下依赖：
Spring WebSpring Boot DevTools
编写游戏逻辑
在 src/main/java 下创建一个用于处理游戏逻辑的包，例如 com.example.game.
GameController.java
java
package com.example.game;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class GameController {
private Game game = new Game();
@GetMapping("/game")
public int[][] getGameState() {
return game.getBoard();
}
@PostMapping("/move")
public int[][] makeMove(@RequestBody String direction) {
switch (direction) {
case "up":
game.moveUp();
break;
case "down":
game.moveDown();
break;
case "left":
game.moveLeft();
break;
case "right":
game.moveRight();
break;
}
game.addRandomTile();
return game.getBoard();
}
}Game.java
java
package com.example.game;
import java.util.Random;
public class Game {
private int[][] board = new int[4][4];
private Random random = new Random();
public Game() {
addRandomTile();
addRandomTile();
}
public int[][] getBoard() {
return board;
}
public void moveUp() {
for (int col = 0; col < 4; col++) {
int[] column = new int[4];
int index = 0;
for (int row = 0; row < 4; row++) {
if (board[row][col] != 0) {
column[index++] = board[row][col];
}
}
merge(column);
for (int row = 0; row < 4; row++) {
board[row][col] = column[row];
}
}
}
public void moveDown() {
for (int col = 0; col < 4; col++) {
int[] column = new int[4];
int index = 0;
for (int row = 3; row >= 0; row--) {
if (board[row][col] != 0) {
column[index++] = board[row][col];
}
}
merge(column);
for (int row = 0; row < 4; row++) {
board[3 - row][col] = column[row];
}
}
}
public void moveLeft() {
for (int row = 0; row < 4; row++) {
int[] newRow = new int[4];
int index = 0;
for (int col = 0; col < 4; col++) {
if (board[row][col] != 0) {
newRow[index++] = board[row][col];
}
}
merge(newRow);
board[row] = newRow;
}
}
public void moveRight() {
for (int row = 0; row < 4; row++) {
int[] newRow = new int[4];
int index = 0;
for (int col = 3; col >= 0; col--) {
if (board[row][col] != 0) {
newRow[index++] = board[row][col];
}
}
merge(newRow);
for (int col = 0; col < 4; col++) {
board[row][3 - col] = newRow[col];
}
}
}
private void merge(int[] row) {
for (int i = 0; i < 3; i++) {
if (row[i] != 0 && row[i] == row[i + 1]) {
row[i] *= 2;
row[i + 1] = 0;
i++;
}
}
int[] newRow = new int[4];
int index = 0;
for (int num : row) {
if (num != 0) {
newRow[index++] = num;
}
}
System.arraycopy(newRow, 0, row, 0, 4);
}
public void addRandomTile() {
int emptyTiles = 0;
for (int[] row : board) {
for (int tile : row) {
if (tile == 0) {
emptyTiles++;
}
}
}
if (emptyTiles == 0) {
return;
}
int randomTile = random.nextInt(emptyTiles);
int value = random.nextInt(10) < 9 ? 2 : 4;
for (int i = 0; i < 4; i++) {
for (int j = 0; j < 4; j++) {
if (board[i][j] == 0) {
if (randomTile == 0) {
board[i][j] = value;
return;
}
randomTile--;
}
}
}
}
}3. 前端 (Vue.js)
创建一个新的 Vue 项目，你可以使用 Vue CLI 或者 Vite 等工具。
设置 Vue 项目
安装 Axios 以便与后端进行通信：
bash
npm install axios创建游戏界面
在 src/components 目录下创建一个 Game.vue 组件：
html
<template>
<div class="game">
<div class="board">
<div v-for="(row, rowIndex) in board" :key="rowIndex" class="row">
<div v-for="(cell, colIndex) in row" :key="colIndex" class="cell">
{{ cell || '' }}
</div>
</div>
</div>
<div class="controls">
<button @click="move('up')">Up</button>
<button @click="move('down')">Down</button>
<button @click="move('left')">Left</button>
<button @click="move('right')">Right</button>
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
board: [[0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0]]
};
},
mounted() {
this.getBoard();
},
methods: {
async getBoard() {
const response = await axios.get('/game');
this.board = response.data;
},
async move(direction) {
const response = await axios.post('/move', direction);
this.board = response.data;
}
}
};
</script>
<style>
.game {
text-align: center;
}
.board {
display: inline-block;
}
.row {
display: flex;
}
.cell {
width: 50px;
height: 50px;
background-color: #ccc;
margin: 5px;
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
font-weight: bold;
}
.controls {
margin-top: 20px;
}
</style>在 App.vue 中导入 Game.vue
javascript
<template>
<div id="app">
<Game />
</div>
</template>
<script>
import Game from './components/Game.vue';
export default {
name: 'App',
components: {
Game
}
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
margin-top: 60px;
}
</style>4. 运行和调试
- 启动 Spring Boot 项目。
- 启动 Vue 前端项目。
确保 Spring Boot 的默认端口（8080）与 Vue 的默认端口（通常是8081）不会冲突。
你现在应该能够在浏览器中访问 Vue 前端，并与 Spring Boot 后端进行交互，从而玩 2048 游戏。