分别用Vue和Java来实现的风靡一时的2048 游戏

2048游戏的实现

2048是一款风靡全球的益智游戏，玩家在一个4x4的方块格中通过滑动数字方块，将相同数字的方块合并，最终目标是得到2048。本文将分别用Vue和Java来实现这个经典游戏。

Vue实现的2048游戏

Vue是一款渐进式的JavaScript框架，适合构建用户界面。以下是基本的2048游戏逻辑和布局的示例代码。

1. 项目结构

创建一个Vue项目，并建立如下结构：

src/
  ├── components/
  │   └── Game.vue
  ├── App.vue
  └── main.js

2. Game.vue代码

<template>
  <div id="game">
    <div class="grid">
      <div
        class="tile"
        v-for="(tile, index) in grid"
        :key="index"
        :style="{ width: size + 'px', height: size + 'px', lineHeight: size + 'px', backgroundColor: getTileColor(tile) }"
      >
        {{ tile === 0 ? '' : tile }}
      </div>
    </div>
    <button @click="resetGame">重置游戏</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      size: 100,
      grid: this.initializeGrid(),
    };
  },
  methods: {
    initializeGrid() {
      const grid = Array.from({ length: 4 }, () => Array(4).fill(0));
      this.addRandomTile(grid);
      this.addRandomTile(grid);
      return grid;
    },
    addRandomTile(grid) {
      const emptyTiles = [];
      for (let i = 0; i < grid.length; i++) {
        for (let j = 0; j < grid[i].length; j++) {
          if (grid[i][j] === 0) emptyTiles.push({ x: i, y: j });
        }
      }
      const { x, y } = emptyTiles[Math.floor(Math.random() * emptyTiles.length)];
      grid[x][y] = Math.random() < 0.9 ? 2 : 4;
    },
    resetGame() {
      this.grid = this.initializeGrid();
    },
    getTileColor(num) {
      const colors = {
        0: '#ccc0b3',
        2: '#eee4da',
        4: '#ede0c8',
        8: '#f2b179',
        16: '#f59c5f',
        32: '#f67c5f',
        64: '#f67c5f',
        128: '#edcf72',
        256: '#edcc61',
        512: '#edc850',
        1024: '#edc53f',
        2048: '#edc22a',
      };
      return colors[num] || '#3c3a32';
    },
  },
};
</script>

<style>
#game {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.tile {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 5px;
  font-size: 24px;
  font-weight: bold;
}
</style>

以上代码完成了一个简单的2048游戏界面和基本逻辑。你可以在此基础上进一步实现滑动、合并等更复杂的逻辑。

Java实现的2048游戏

在Java中，可以通过Swing库来实现图形用户界面。以下是Java实现的基本框架。

1. 项目结构

建立一个Java项目，并创建如下文件：

src/
  ├── GamePanel.java
  └── Game2048.java

2. Game2048.java代码

import javax.swing.*;
import java.awt.*;
import java.awt.event.KeyAdapter;
import java.awt.event.KeyEvent;
import java.util.Random;

public class Game2048 {

    public static void main(String[] args) {
        JFrame frame = new JFrame("2048 Game");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setSize(400, 400);
        frame.add(new GamePanel());
        frame.setVisible(true);
    }
}

class GamePanel extends JPanel {
    private int[][] grid;
    private Random random = new Random();

    public GamePanel() {
        grid = new int[4][4];
        addRandomTile();
        addRandomTile();
        setFocusable(true);
        addKeyListener(new KeyAdapter() {
            @Override
            public void keyPressed(KeyEvent e) {
                handleKeyPressed(e.getKeyCode());
            }
        });
    }

    private void handleKeyPressed(int keyCode) {
        // 处理按键逻辑
        // 调用合并和更新格子逻辑
    }

    private void addRandomTile() {
        // 在空格子上随机放置2或4
    }

    @Override
    protected void paintComponent(Graphics g) {
        super.paintComponent(g);
        // 绘制格子和数字
    }
}

在GamePanel类中，进一步实现游戏逻辑，如添加随机数字、管理按键响应、合并方块等。

总结

本文分别用Vue和Java实现了基本的2048游戏框架。Vue的优点在于快速构建网页应用，适合前端开发；而Java则可以创建桌面应用，适用于多种平台。通过这些代码示例，大家可以自行扩展更多功能，如分数统计、动画效果、游戏结束判断等等。希望你能在实现过程中得到乐趣和收获！