从微信小游戏截图到完整实现，一个抢地盘游戏的开发记录

前言

前几天在玩微信小游戏时，发现了一个简单有趣的抢地盘玩法：两个玩家在一个10x10的网格上移动，30秒内占领更多格子的人获胜。

觉得机制挺有意思，就截图给Trae，没想到很快就得到了一个完整的实现。

向Trae提问

Trae的游戏机制分析

• 10x10的网格地图
• 两个玩家分别控制，玩家1用WASD，玩家2用方向键
• 玩家移动经过的格子会被"占领"，显示对应颜色
• 30秒倒计时
• 最终统计占领格子数量决定胜负

最终的游戏效果

布局效果 30s游戏结束进行结算的画面 体验地址

Trae代码解析

Trae设计的HTML结构，整个游戏界面DOM分为几个部分,头部、网格、控制提示

<!-- 游戏头部：显示两个玩家的得分和倒计时 -->
<div class="game-header">
    <div class="player player-1">
        <div class="player-name">玩家1</div>
        <div class="player-score">得分: <span id="score-1">0</span></div>
    </div>
    <div class="timer">
        <div class="timer-value" id="timer">30</div>
    </div>
    <div class="player player-2">
        <div class="player-name">玩家2</div>
        <div class="player-score">得分: <span id="score-2">0</span></div>
    </div>
</div>

<!-- 游戏网格 -->
<div class="game-grid" id="gameGrid"></div>

<!-- 控制提示 -->
<div class="game-controls">
    <div class="control-hint">玩家1: WASD移动</div>
    <button id="startGame">开始游戏</button>
    <div class="control-hint">玩家2: ↑←↓→移动</div>
</div>

JavaScript核心逻辑,这个游戏的核心在TerritoryBattle类中实现：

class TerritoryBattle {
    constructor() {
        this.gridSize = 10;
        this.gameGrid = document.getElementById('gameGrid');
        this.timeLeft = 30;
        this.gameStarted = false;
        
        // 玩家初始位置
        this.players = {
            1: { x: 0, y: 0 },
            2: { x: 9, y: 9 }
        };
        
        this.initializeGame();
        this.setupEventListeners();
    }
    
    initializeGame() {
        // 创建10x10网格
        for (let y = 0; y < this.gridSize; y++) {
            this.cells[y] = [];
            for (let x = 0; x < this.gridSize; x++) {
                const cell = document.createElement('div');
                cell.className = 'grid-cell';
                this.gameGrid.appendChild(cell);
                this.cells[y][x] = cell;
            }
        }
    }
    
    movePlayer(playerNum, dx, dy) {
        const player = this.players[playerNum];
        const newX = player.x + dx;
        const newY = player.y + dy;
        
        // 边界检查
        if (newX >= 0 && newX < this.gridSize && newY >= 0 && newY < this.gridSize) {
            this.updatePlayerPosition(playerNum, newX, newY);
        }
    }
    
    updatePlayerPosition(playerNum, x, y) {
        // 更新格子状态
        const cell = this.cells[y][x];
        cell.classList.add(`player-${playerNum}`);
        cell.classList.add(`current-${playerNum}`);
        
        // 实时更新分数
        this.updateScores();
    }
    
    updateScores() {
        let score1 = 0, score2 = 0;
        for (let y = 0; y < this.gridSize; y++) {
            for (let x = 0; x < this.gridSize; x++) {
                const cell = this.cells[y][x];
                if (cell.classList.contains('player-1')) score1++;
                if (cell.classList.contains('player-2')) score2++;
            }
        }
        this.score1.textContent = score1;
        this.score2.textContent = score2;
    }
}

Trae使用CSS Grid布局创建游戏网格：

.game-grid {
    display: grid;
    grid-template-columns: repeat(10, 40px);
    grid-template-rows: repeat(10, 40px);
    gap: 2px;
}

.grid-cell {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    transition: all 0.3s ease;
}

.grid-cell.player-1 {
    background: #ff6b6b;
}

.grid-cell.player-2 {
    background: #4ecdc4;
}

.grid-cell.current-1 {
    animation: pulse 1s infinite;
}

键盘控制，通过监听键盘事件实现双玩家控制：

setupEventListeners() {
    document.addEventListener('keydown', (e) => {
        if (!this.gameStarted) return;
        
        // 玩家1: WASD
        if (e.key.toLowerCase() === 'w') this.movePlayer(1, 0, -1);
        if (e.key.toLowerCase() === 's') this.movePlayer(1, 0, 1);
        if (e.key.toLowerCase() === 'a') this.movePlayer(1, -1, 0);
        if (e.key.toLowerCase() === 'd') this.movePlayer(1, 1, 0);
        
        // 玩家2: 方向键
        if (e.key === 'ArrowUp') this.movePlayer(2, 0, -1);
        if (e.key === 'ArrowDown') this.movePlayer(2, 0, 1);
        if (e.key === 'ArrowLeft') this.movePlayer(2, -1, 0);
        if (e.key === 'ArrowRight') this.movePlayer(2, 1, 0);
    });
}

使用Trae的开发，整个过程比较顺利，Trae会先分析

1. 通过微信截图获取游戏界面参考
2. Trae快速理解了游戏规则和需求
3. 代码结构清晰，分为HTML布局、CSS样式、JS逻辑三部分

Trae实现了完整的游戏功能，包括倒计时、得分统计、胜负判定，效果还是非常的不错的，快乐的玩起来了，无聊可以打发时间

游戏现在可以正常运行，两个人可以分别用键盘控制角色，在30秒内争夺更多的地盘。界面简洁，操作响应及时，基本还原了微信小游戏的体验。