基于SpringBoot和Vue写一个2048小游戏_Java

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>