Write a 2048 mini game based on SpringBoot and Vue

1. Set up the project structure

You need to create a project with two parts:

Backend (Java Spring Boot)
front end ()

2. Backend (Spring Boot)

First, create a new Spring Boot project. You can use Spring Initializr or any other way you like.

Project dependency

Make sure to add the following dependencies:

Spring Web
Spring Boot DevTools

Write game logic

existsrc/main/javaCreate a package for processing game logic, e.g..

package ;
 
import ;
import ;
import ;
import ;
 
@RestController
public class GameController {
 
    private Game game = new Game();
 
    @GetMapping("/game")
    public int[][] getGameState() {
        return ();
    }
 
    @PostMapping("/move")
    public int[][] makeMove(@RequestBody String direction) {
        switch (direction) {
            case "up":
                ();
                break;
            case "down":
                ();
                break;
            case "left":
                ();
                break;
            case "right":
                ();
                break;
        }
        ();
        return ();
    }
}

package ;
 
import ;
 
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;
            }
        }
        (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 = (emptyTiles);
        int value = (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. Front-end ()

Create a new Vue project, you can use tools such as Vue CLI or Vite.

Setting up Vue Projects

Install Axios to communicate with the backend:

npm install axios

Create a game interface

existsrc/componentsCreate a directoryComponents:

<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() {
    ();
  },
  methods: {
    async getBoard() {
      const response = await ('/game');
       = ;
    },
    async move(direction) {
      const response = await ('/move', direction);
       = ;
    }
  }
};
</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>

Import in

<template>
  <div >
    <Game />
  </div>
</template>
 
<script>
import Game from './components/';
 
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. Run and debug

Start the Spring Boot project.
Start the Vue front-end project.

Make sure that Spring Boot's default port (8080) does not conflict with Vue's default port (usually 8081).

You should now be able to access the Vue front-end in your browser and interact with the Spring Boot back-end to play the 2048 game.

This is all about writing a 2048 mini game based on SpringBoot and Vue. For more related SpringBoot Vue 2048 game content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!