用SpringBoot和vue写一个2048小游戏

创建一个基于 Java Spring Boot 后端和 Vue 前端的 2048 游戏，可以按照以下步骤进行。这个项目将包括后端（用来处理游戏逻辑）和前端（用来显示游戏界面和与用户交互）。

1. 设置项目结构

2. 后端 (Spring Boot)

项目依赖

编写游戏逻辑

GameController.java

Game.java

3. 前端 (Vue.js)

设置 Vue 项目

创建游戏界面

在 App.vue 中导入 Game.vue

4. 运行和调试

1. 设置项目结构

你需要创建一个包含两个部分的项目：

后端 (Java Spring Boot)
前端 (Vue.js)

2. 后端 (Spring Boot)

首先，创建一个新的 Spring Boot 项目。你可以使用 Spring Initializr 或者任何其他你喜欢的方式。

项目依赖

确保添加以下依赖：

Spring Web
Spring Boot DevTools

编写游戏逻辑

在 src/main/java 下创建一个用于处理游戏逻辑的包，例如 com.example.game.

GameController.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

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 以便与后端进行通信：

npm install axios

创建游戏界面

在 src/components 目录下创建一个 Game.vue 组件：

<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`

<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>