当前位置：网站首页 > 技术分类 > 正文

Ai 编辑器 Cursor 零基础教程:推箱子小游戏实战演练

ztj100 2025-07-09 18:39 4 浏览 0 评论

最近Ai火的同时，Ai编辑器Cursor同样火了一把。

今天我们就白漂一下Cursor，使用免费版本搞一个零基础教程，并实战演练一个“网页版的推箱子小游戏”。

通过这篇文章，让你真正了解cursor是什么？同时让你将掌握 Cursor 的一些基本功能，并学会如何利用 AI 辅助编写代码。

一、Cursor 前世今生

Cursor 是 VS Code 的一个分支。它专注于使用 AI 进行编码，同时提供VScode熟悉的文本编辑体验。

Cursor 会定期同步 VS Code 的最新版本，所以不用担心和VScode脱节。

这样做的优点就是Cursor 对编辑器的 UI 拥有更多控制权，从而实现更好的 AI 集成。它的某些功能（如 Cursor Tab 和 CMD-K）无法作为现有编码环境的插件。

二、Cursor 安装

1. Cursor安装和登录

访问 Cursor 官网（https://www.cursor.com/）下载和自己系统对于的版本，Windows、MacOS、Linux都支持。
安装 Cursor 编辑器、
打开 Cursor，注册或登录账号。

2. Cursor配置

设置 API Key：如果你需要使用 Cursor 的高级功能（如 GPT-4），需要配置 API Key。而我们这里使用的免费功能，不需要配置，它自动使用默认的。
选择模型：在设置中，你可以选择使用的 AI 模型。免费版本默认就行。

二、Cursor 界面布局介绍

Cursor 的界面简洁直观，主要分为以下几个区域：

左侧边栏： 文件资源管理器：显示项目文件和文件夹。
AI 助手面板：提供代码生成、解释、优化等功能。
编辑器区域：代码编辑的主要区域，支持语法高亮、代码补全等功能。
终端：集成终端，可以直接运行命令和脚本。

三、Cursor 收费版本区别

Cursor 提供免费版和付费版（Pro），主要区别如下：

功能	免费版	付费版（Pro）
AI 模型	Preminu	Preminu
代码生成速度	较慢	更快
代码解释与优化	支持	支持
多语言支持	支持	支持
次数	50次慢模型调用 2000次代码补全	500次快模型调用其它没有限制
价格	免费	$20/月

免费版每月50次模型调用配额，拿来偶尔用一下还是可以的。

四、项目实战：推箱子小游戏

1，首先输入提示语：创建一个网页版的推箱子小游戏

在项目中创建以下文件：

执行完后的界面如下：

我们经过几次对话和优化后的效果：

效果还是不错的。

五、编写代码

1. HTML 结构 (index.html)

在 index.html 中编写游戏的基本结构：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>推箱子游戏</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="game-container">
        <h1>推箱子</h1>
        <div class="game-info">
            <span>当前关卡: <span id="level-number">1</span></span>
            <span>移动步数: <span id="moves-count">0</span></span>
        </div>
        <div id="game-board"></div>
        <div class="controls">
            <button id="prev-level">上一关</button>
            <button id="restart">重新开始</button>
            <button id="next-level">下一关</button>
        </div>
        <div class="mobile-controls">
            <button id="up">↑</button>
            <div>
                <button id="left">←</button>
                <button id="right">→</button>
            </div>
            <button id="down">↓</button>
        </div>
    </div>
    <script src="game.js"></script>
</body>
</html>

2. CSS 样式 (style.css)

在 style.css 中编写游戏的样式：

.game-container {
    text-align: center;
    padding: 20px;
}

#game-board {
    display: inline-block;
    margin: 20px;
}

.row {
    display: flex;
}

.cell {
    width: 40px;
    height: 40px;
    border: 1px solid #ccc;
}

.wall {
    background-color: #666;
}

.box {
    background-color: #8B4513;
}

.target {
    background-color: #90EE90;
}

.player {
    background-color: #4169E1;
}

.box-on-target {
    background-color: #32CD32;
}

button {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}

3. JavaScript 逻辑 (game.js)

在 game.js 中编写游戏的逻辑代码：

class Sokoban {
    constructor() {
        this.levels = [
            [
                ['#', '#', '#', '#', '#'],
                ['#', ' ', ' ', ' ', '#'],
                ['#', ' ', '@', ' ', '#'],
                ['#', ' ', '#39;, '.', '#'],
                ['#', '#', '#', '#', '#']
            ],
            [
                ['#', '#', '#', '#', '#'],
                ['#', '.', ' ', ' ', '#'],
                ['#', ' ', '@', '#39;, '#'],
                ['#', ' ', '#39;, '.', '#'],
                ['#', '#', '#', '#', '#']
            ]
        ];
        this.currentLevel = 0;
        this.moves = 0;
        this.initGame();
    }

    initGame() {
        this.level = JSON.parse(JSON.stringify(this.levels[this.currentLevel]));
        this.findPlayer();
        this.gameBoard = document.getElementById('game-board');
        this.setupControls();
        this.updateUI();
        this.renderBoard();
    }

    findPlayer() {
        for (let y = 0; y < this.level.length; y++) {
            for (let x = 0; x < this.level[y].length; x++) {
                if (this.level[y][x] === '@' || this.level[y][x] === '+') {
                    this.playerPos = { x, y };
                    return;
                }
            }
        }
    }

    setupControls() {
        document.addEventListener('keydown', (e) => {
            let dx = 0, dy = 0;
            
            switch (e.key) {
                case 'ArrowUp': dy = -1; break;
                case 'ArrowDown': dy = 1; break;
                case 'ArrowLeft': dx = -1; break;
                case 'ArrowRight': dx = 1; break;
                default: return;
            }
            
            e.preventDefault();
            this.move(dx, dy);
        });

        document.getElementById('up').addEventListener('click', () => this.move(0, -1));
        document.getElementById('down').addEventListener('click', () => this.move(0, 1));
        document.getElementById('left').addEventListener('click', () => this.move(-1, 0));
        document.getElementById('right').addEventListener('click', () => this.move(1, 0));
        
        document.getElementById('restart').addEventListener('click', () => this.resetLevel());
        document.getElementById('prev-level').addEventListener('click', () => this.changeLevel(-1));
        document.getElementById('next-level').addEventListener('click', () => this.changeLevel(1));
    }

    move(dx, dy) {
        const newX = this.playerPos.x + dx;
        const newY = this.playerPos.y + dy;
        
        if (this.level[newY][newX] === '#') return;
        
        if (this.level[newY][newX] === '#39; || this.level[newY][newX] === '*') {
            const nextX = newX + dx;
            const nextY = newY + dy;
            
            if (this.level[nextY][nextX] === '#' || 
                this.level[nextY][nextX] === '#39; || 
                this.level[nextY][nextX] === '*') return;
            
            this.moveBox(newX, newY, nextX, nextY);
        }
        
        this.movePlayer(newX, newY);
        this.moves++;
        this.updateUI();
        this.renderBoard();
        this.checkWin();
    }

    moveBox(fromX, fromY, toX, toY) {
        const isFromTarget = this.level[fromY][fromX] === '*';
        const isToTarget = this.level[toY][toX] === '.';
        
        this.level[fromY][fromX] = isFromTarget ? '.' : ' ';
        this.level[toY][toX] = isToTarget ? '*' : '#39;;
    }

    movePlayer(newX, newY) {
        const isOnTarget = this.level[this.playerPos.y][this.playerPos.x] === '+';
        this.level[this.playerPos.y][this.playerPos.x] = isOnTarget ? '.' : ' ';
        
        const isNewTarget = this.level[newY][newX] === '.';
        this.level[newY][newX] = isNewTarget ? '+' : '@';
        
        this.playerPos = { x: newX, y: newY };
    }

    updateUI() {
        document.getElementById('level-number').textContent = this.currentLevel + 1;
        document.getElementById('moves-count').textContent = this.moves;
    }

    checkWin() {
        for (let y = 0; y < this.level.length; y++) {
            for (let x = 0; x < this.level[y].length; x++) {
                if (this.level[y][x] === '#39;) return;
            }
        }
        alert(`恭喜你通过第 ${this.currentLevel + 1} 关！\n共移动 ${this.moves} 步`);
        if (this.currentLevel < this.levels.length - 1) {
            this.changeLevel(1);
        }
    }

    resetLevel() {
        this.level = JSON.parse(JSON.stringify(this.levels[this.currentLevel]));
        this.findPlayer();
        this.moves = 0;
        this.updateUI();
        this.renderBoard();
    }

    changeLevel(delta) {
        const newLevel = this.currentLevel + delta;
        if (newLevel >= 0 && newLevel < this.levels.length) {
            this.currentLevel = newLevel;
            this.moves = 0;
            this.resetLevel();
        }
    }

    renderBoard() {
        this.gameBoard.innerHTML = '';
        for (let y = 0; y < this.level.length; y++) {
            const row = document.createElement('div');
            row.className = 'row';
            
            for (let x = 0; x < this.level[y].length; x++) {
                const cell = document.createElement('div');
                cell.className = 'cell';
                
                switch (this.level[y][x]) {
                    case '#': cell.classList.add('wall'); break;
                    case '#39;: cell.classList.add('box'); break;
                    case '.': cell.classList.add('target'); break;
                    case '@': cell.classList.add('player'); break;
                    case '*': cell.classList.add('box-on-target'); break;
                    case '+': cell.classList.add('player'); cell.classList.add('target'); break;
                }
                
                row.appendChild(cell);
            }
            this.gameBoard.appendChild(row);
        }
    }
}

window.onload = () => {
    new Sokoban();
};

六、运行游戏

打开浏览器，访问 index.html，即可开始玩推箱子小游戏。

七、总结

好了，那么现在你学会了如何使用 Cursor 编辑器么？

希望你能通过这个实战演练，掌握更多编程技巧！

如果有任何问题，欢迎随时提问！

appendchild

上一篇：19年前司机被沉尸水库!凶手落网，竟已是身家千万的大老板
下一篇：JavaScript 强制回流问题及优化方案

Ai 编辑器 Cursor 零基础教程:推箱子小游戏实战演练

一、Cursor 前世今生

二、Cursor 安装

1. Cursor安装和登录

2. Cursor配置

二、Cursor 界面布局介绍

三、Cursor 收费版本区别

四、项目实战：推箱子小游戏

五、编写代码

1. HTML 结构 (index.html)

2. CSS 样式 (style.css)

3. JavaScript 逻辑 (game.js)

六、运行游戏

七、总结

相关推荐

取消回复欢迎你发表评论:

Vue-实现自定义插件弹窗（vue 实现弹窗）

Vue自定义Hook示例:useUrlState（vue中的自定义指令如何使用）

MySQL中这14个小玩意，让人眼前一亮!

旗舰机新标杆 OPPO Find X2系列正式发布售价5499元起

什么是幂等?分布式锁如何实现业务幂等?

手把手教你搞定菜单权限设计，精确到按钮级别，建议收藏

详解MySQL 字符串拼接之concat\concat_ws\group_concat

如何快速切换node版本?利用n包快速切换nodejs版本

如何发个 npm 包?

【Python机器学习系列】建立多层感知机模型预测心脏疾病

Ai 编辑器 Cursor 零基础教程:推箱子小游戏实战演练

一、Cursor 前世今生

二、Cursor 安装

1. Cursor安装 和登录

2. Cursor配置

二、Cursor 界面布局介绍

三、Cursor 收费版本区别

四、项目实战：推箱子小游戏

五、编写代码

1. HTML 结构 (index.html)

2. CSS 样式 (style.css)

3. JavaScript 逻辑 (game.js)

六、运行游戏

七、总结

相关推荐

取消回复欢迎 你 发表评论:

Vue-实现自定义插件弹窗（vue 实现弹窗）

Vue自定义Hook示例:useUrlState（vue中的自定义指令如何使用）

MySQL中这14个小玩意，让人眼前一亮!

旗舰机新标杆 OPPO Find X2系列正式发布 售价5499元起

什么是幂等?分布式锁如何实现业务幂等?

手把手教你搞定菜单权限设计，精确到按钮级别，建议收藏

详解MySQL 字符串拼接之concat\concat_ws\group_concat

如何快速切换node版本?利用n包快速切换nodejs版本

如何发个 npm 包?

【Python机器学习系列】建立多层感知机模型预测心脏疾病

1. Cursor安装和登录

取消回复欢迎你发表评论:

旗舰机新标杆 OPPO Find X2系列正式发布售价5499元起