用SpringBoot和vue写一个2048小游戏 - IT评测·应用市场-qidao123.com技术社区

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();
}
}

复制代码

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

复制代码

npm install axios

复制代码

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

复制代码

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

复制代码