重温经典,让trae帮我们温习一下哪些年写的游戏之2048

你是否还记得前端初学时做过的H5小游戏,2048当之无愧是初学时遇到的最大困难,现在有ai辅助,你还能不能轻松实现并理解其中的原理。

下面就让Trae帮我们实现这一款经典的游戏吧,看看ai能不能无bug的实现~

首先先来看看实现的效果,可以通过键盘上的上下左右方向键来操控游戏,这也是初学时的js基础

实现的界面非常的好看,上面还有提示词,提示我们应该怎么玩这个经典的2048游戏、

可以看到页面的样式有间隙,让Trae自己把bug修复吧

引入眼帘,是非常经典的class类,

下面让Trae帮我们将各大方法的逻辑理清楚

1、初始化方法,是初始化游戏,包括初始化棋盘、分数、历史记录、以及绑定事件

js 复制代码
init() {
        this.board = Array(this.size).fill().map(() => Array(this.size).fill(0));
        this.score = 0;
        this.history = [];
        this.addRandomTile();
        this.addRandomTile();
        this.updateDisplay();
    }

2、然后是随机数,在棋盘上随机添加一个数字,数字为2或4,概率为9:1

ini 复制代码
 addRandomTile() {
        const emptyCells = [];
        for (let i = 0; i < this.size; i++) {
            for (let j = 0; j < this.size; j++) {
                if (this.board[i][j] === 0) {
                    emptyCells.push({ x: i, y: j });
                }
            }
        }

        if (emptyCells.length > 0) {
            const randomCell = emptyCells[Math.floor(Math.random() * emptyCells.length)];
            this.board[randomCell.x][randomCell.y] = Math.random() < 0.9 ? 2 : 4;
        }
    }

3、再然后是保存当前游戏状态,包括棋盘和分数,最多保存10个历史记录

kotlin 复制代码
saveState() {
        this.history.push({
            board: this.board.map(row => [...row]),
            score: this.score
        });
        if (this.history.length > 10) {
            this.history.shift();
        }
    }

4、更新显示的方法,包括更新棋盘和追加分数

javascript 复制代码
    updateDisplay() {
        this.updateBoardDisplay();
        this.updateScoreDisplay();
    }

5、撤销按钮的逻辑,撤销上一步操作,包括恢复棋盘和减掉刚刚上一步加上的分数

kotlin 复制代码
 undo() {
        if (this.history.length > 0) {
            const lastState = this.history.pop();
            this.board = lastState.board;
            this.score = lastState.score;
            this.updateDisplay();
        }
    }

6、移动棋子,遇到方向一致并且数字一致,就会合并相同数字的棋子,例如2和2,就会变成4,以此类推

如果数字到达2048,即为游戏胜利,这个时候就要提醒用户游戏胜利,如果所有的格子都满了,并且没有办法合并就要提示用户游戏失败,结束游戏,可以重新开始一局新的游戏

kotlin 复制代码
    move(direction) {
        this.saveState();
        const originalBoard = this.board.map(row => [...row]);
        let moved = false;

        switch (direction) {
            case 'up':
                moved = this.moveUp();
                break;
            case 'down':
                moved = this.moveDown();
                break;
            case 'left':
                moved = this.moveLeft();
                break;
            case 'right':
                moved = this.moveRight();
                break;
        }

        if (moved) {
            this.addRandomTile();
            this.updateDisplay();
            
            if (this.checkWin()) {
                this.showMessage('🎉 恭喜你达到2048,游戏胜利,太厉害了!');
            } else if (this.checkGameOver()) {
                this.showMessage('😅 游戏结束!');
            }
        } else {
            this.history.pop();
        }
    }

7、压缩行,合并相同数字的棋子,使其空白格子

js 复制代码
    compress(row) {
        let filtered = row.filter(val => val !== 0);
        let compressed = [];
        let scoreAdded = 0;

        for (let i = 0; i < filtered.length; i++) {
            if (i < filtered.length - 1 && filtered[i] === filtered[i + 1]) {
                const merged = filtered[i] * 2;
                compressed.push(merged);
                this.score += merged;
                i++;
            } else {
                compressed.push(filtered[i]);
            }
        }

        while (compressed.length < this.size) {
            compressed.push(0);
        }

        return compressed;
    }

8、检查是否胜利的逻辑,胜利条件为棋盘上存在2048,有这个数字就是游戏胜利

js 复制代码
    checkWin() {

        for (let i = 0; i < this.size; i++) {

            for (let j = 0; j < this.size; j++) {

                if (this.board[i][j] === 2048) {

                    return true;

                }

            }

        }

        return false;

    }

总结:

ai编程很强大,要适当利用,但是不能完全依赖,可以借助一下ai的能力将我们的逻辑理清晰,帮助我们更好的成长

相关推荐
用户4099322502124 小时前
PostgreSQL UPDATE语句怎么玩?从改邮箱到批量更新的避坑技巧你都会吗?
后端·ai编程·trae
用户4099322502124 天前
PostgreSQL 17安装总翻车?Windows/macOS/Linux避坑指南帮你搞定?
后端·ai编程·trae
用户4099322502125 天前
能当关系型数据库还能玩对象特性,能拆复杂查询还能自动管库存,PostgreSQL 凭什么这么香?
后端·ai编程·trae
豆包MarsCode6 天前
基于 TRAE 的自动化测试用例智能生成方案
trae
岛风风6 天前
你还在让ai这样解决编程问题?
程序员·trae
用户4099322502126 天前
给接口加新字段又不搞崩老客户端?FastAPI的多版本API靠哪三招实现?
后端·ai编程·trae
程序员爱钓鱼7 天前
Go语言100个实战案例-项目实战篇:股票行情数据爬虫
后端·go·trae
用户4099322502128 天前
FastAPI秒杀库存总变负数?Redis分布式锁能帮你守住底线吗
后端·ai编程·trae
豆包MarsCode8 天前
AI 工具站开发:3 小时 SOLO,全栈开发+自动部署
trae
用户4099322502129 天前
FastAPI的CI流水线怎么自动测端点,还能让Allure报告美到犯规?
后端·ai编程·trae