用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

1. package com.example.game;
3. import org.springframework.web.bind.annotation.GetMapping;
4. import org.springframework.web.bind.annotation.PostMapping;
5. import org.springframework.web.bind.annotation.RequestBody;
6. import org.springframework.web.bind.annotation.RestController;
8. @RestController
9. public class GameController {
11.     private Game game = new Game();
13.     @GetMapping("/game")
14.     public int[][] getGameState() {
15.         return game.getBoard();
16.     }
18.     @PostMapping("/move")
19.     public int[][] makeMove(@RequestBody String direction) {
20.         switch (direction) {
21.             case "up":
22.                 game.moveUp();
23.                 break;
24.             case "down":
25.                 game.moveDown();
26.                 break;
27.             case "left":
28.                 game.moveLeft();
29.                 break;
30.             case "right":
31.                 game.moveRight();
32.                 break;
33.         }
34.         game.addRandomTile();
35.         return game.getBoard();
36.     }
37. }

复制代码

Game.java

1. package com.example.game;
3. import java.util.Random;
5. public class Game {
6.     private int[][] board = new int[4][4];
7.     private Random random = new Random();
9.     public Game() {
10.         addRandomTile();
11.         addRandomTile();
12.     }
14.     public int[][] getBoard() {
15.         return board;
16.     }
18.     public void moveUp() {
19.         for (int col = 0; col < 4; col++) {
20.             int[] column = new int[4];
21.             int index = 0;
22.             for (int row = 0; row < 4; row++) {
23.                 if (board[row][col] != 0) {
24.                     column[index++] = board[row][col];
25.                 }
26.             }
27.             merge(column);
28.             for (int row = 0; row < 4; row++) {
29.                 board[row][col] = column[row];
30.             }
31.         }
32.     }
34.     public void moveDown() {
35.         for (int col = 0; col < 4; col++) {
36.             int[] column = new int[4];
37.             int index = 0;
38.             for (int row = 3; row >= 0; row--) {
39.                 if (board[row][col] != 0) {
40.                     column[index++] = board[row][col];
41.                 }
42.             }
43.             merge(column);
44.             for (int row = 0; row < 4; row++) {
45.                 board[3 - row][col] = column[row];
46.             }
47.         }
48.     }
50.     public void moveLeft() {
51.         for (int row = 0; row < 4; row++) {
52.             int[] newRow = new int[4];
53.             int index = 0;
54.             for (int col = 0; col < 4; col++) {
55.                 if (board[row][col] != 0) {
56.                     newRow[index++] = board[row][col];
57.                 }
58.             }
59.             merge(newRow);
60.             board[row] = newRow;
61.         }
62.     }
64.     public void moveRight() {
65.         for (int row = 0; row < 4; row++) {
66.             int[] newRow = new int[4];
67.             int index = 0;
68.             for (int col = 3; col >= 0; col--) {
69.                 if (board[row][col] != 0) {
70.                     newRow[index++] = board[row][col];
71.                 }
72.             }
73.             merge(newRow);
74.             for (int col = 0; col < 4; col++) {
75.                 board[row][3 - col] = newRow[col];
76.             }
77.         }
78.     }
80.     private void merge(int[] row) {
81.         for (int i = 0; i < 3; i++) {
82.             if (row[i] != 0 && row[i] == row[i + 1]) {
83.                 row[i] *= 2;
84.                 row[i + 1] = 0;
85.                 i++;
86.             }
87.         }
88.         int[] newRow = new int[4];
89.         int index = 0;
90.         for (int num : row) {
91.             if (num != 0) {
92.                 newRow[index++] = num;
93.             }
94.         }
95.         System.arraycopy(newRow, 0, row, 0, 4);
96.     }
98.     public void addRandomTile() {
99.         int emptyTiles = 0;
100.         for (int[] row : board) {
101.             for (int tile : row) {
102.                 if (tile == 0) {
103.                     emptyTiles++;
104.                 }
105.             }
106.         }
107.         if (emptyTiles == 0) {
108.             return;
109.         }
110.         int randomTile = random.nextInt(emptyTiles);
111.         int value = random.nextInt(10) < 9 ? 2 : 4;
112.         for (int i = 0; i < 4; i++) {
113.             for (int j = 0; j < 4; j++) {
114.                 if (board[i][j] == 0) {
115.                     if (randomTile == 0) {
116.                         board[i][j] = value;
117.                         return;
118.                     }
119.                     randomTile--;
120.                 }
121.             }
122.         }
123.     }
124. }

复制代码

3. 前端 (Vue.js)

创建一个新的 Vue 项目，你可以利用 Vue CLI 或者 Vite 等工具。
设置 Vue 项目

安装 Axios 以便与后端进行通讯：

1. npm install axios

复制代码

创建游戏界面

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

1. <template>
2.   <div class="game">
3.     <div class="board">
4.       <div v-for="(row, rowIndex) in board" :key="rowIndex" class="row">
5.         <div v-for="(cell, colIndex) in row" :key="colIndex" class="cell">
6.           {{ cell || '' }}
7.         </div>
8.       </div>
9.     </div>
10.     <div class="controls">
11.       <button @click="move('up')">Up</button>
12.       <button @click="move('down')">Down</button>
13.       <button @click="move('left')">Left</button>
14.       <button @click="move('right')">Right</button>
15.     </div>
16.   </div>
17. </template>
19. <script>
20. import axios from 'axios';
22. export default {
23.   data() {
24.     return {
25.       board: [[0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0]]
26.     };
27.   },
28.   mounted() {
29.     this.getBoard();
30.   },
31.   methods: {
32.     async getBoard() {
33.       const response = await axios.get('/game');
34.       this.board = response.data;
35.     },
36.     async move(direction) {
37.       const response = await axios.post('/move', direction);
38.       this.board = response.data;
39.     }
40.   }
41. };
42. </script>
44. <style>
45. .game {
46.   text-align: center;
47. }
49. .board {
50.   display: inline-block;
51. }
53. .row {
54.   display: flex;
55. }
57. .cell {
58.   width: 50px;
59.   height: 50px;
60.   background-color: #ccc;
61.   margin: 5px;
62.   display: flex;
63.   justify-content: center;
64.   align-items: center;
65.   font-size: 18px;
66.   font-weight: bold;
67. }
69. .controls {
70.   margin-top: 20px;
71. }
72. </style>

复制代码

在 App.vue 中导入 Game.vue

1. <template>
2.   <div id="app">
3.     <Game />
4.   </div>
5. </template>
7. <script>
8. import Game from './components/Game.vue';
10. export default {
11.   name: 'App',
12.   components: {
13.     Game
14.   }
15. };
16. </script>
18. <style>
19. #app {
20.   font-family: Avenir, Helvetica, Arial, sans-serif;
21.   -webkit-font-smoothing: antialiased;
22.   -moz-osx-font-smoothing: grayscale;
23.   text-align: center;
24.   margin-top: 60px;
25. }
26. </style>

复制代码

4. 运行和调试

• 启动 Spring Boot 项目。
  
• 启动 Vue 前端项目。
  

确保 Spring Boot 的默认端口（8080）与 Vue 的默认端口（通常是8081）不会冲突。
你现在应该可以或许在浏览器中访问 Vue 前端，并与 Spring Boot 后端进行交互，从而玩 2048 游戏。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。