用SpringBoot和vue写一个2048小游戏

战族狼魂2024-08-22 17:58

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

目录

[1. 设置项目结构](#1. 设置项目结构)

[2. 后端 (Spring Boot)](#2. 后端 (Spring Boot))

项目依赖

编写游戏逻辑

GameController.java

Game.java

[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 Web
  • Spring 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 游戏。

相关推荐
青稞儿23 分钟前
面试题高频之token无感刷新（vue3+node.js）
vue.js·node.js
wn53133 分钟前
【Go - 类型断言】
服务器·开发语言·后端·golang
bjzhang7544 分钟前
SpringBoot开发——集成Tess4j实现OCR图像文字识别
spring boot·ocr·tess4j
flying jiang1 小时前
Spring Boot 入门面试五道题
spring boot
小菜yh1 小时前
关于Redis
java·数据库·spring boot·redis·spring·缓存
希冀1231 小时前
【操作系统】1.2操作系统的发展与分类
后端
程序员凡尘1 小时前
完美解决 Array 方法 (map/filter/reduce) 不按预期工作 的正确解决方法，亲测有效！！！
前端·javascript·vue.js
GoppViper1 小时前
golang学习笔记29——golang 中如何将 GitHub 最新提交的版本设置为 v1.0.0
笔记·git·后端·学习·golang·github·源代码管理
爱上语文2 小时前
Springboot的三层架构
java·开发语言·spring boot·后端·spring
荆州克莱2 小时前
springcloud整合nacos、sentinal、springcloud-gateway,springboot security、oauth2总结
spring boot·spring·spring cloud·css3·技术
热门推荐
01RAG 实践- Ollama+RagFlow 部署本地知识库02组基轨迹建模 GBTM的介绍与实现（Stata 或 R）032024年高教社杯数学建模国赛C题超详细解题思路分析04Coze扣子平台完整体验和实践（附国内和国际版对比）05苍穹外卖面试总结06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07yolov8实战第五天——yolov8+ffmpg实时视频流检测并进行实时推流——（推流，保姆教学）08CCF-CSP认证考试 202406-3 文本分词 100分题解09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10浏览器插件——ModHeader 的分享和学习