当前位置：网站首页 > IT知识 > 正文

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

liuian 2025-05-08 02:49 95 浏览

最近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 编辑器么？

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

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

vscode 切换分支

上一篇：ChatGPT深度集成于苹果Mac软件编码能力得到提升
下一篇：idea版的cursor:Windsurf Wave 7（ideawalk）

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

一、Cursor 前世今生

二、Cursor 安装

1. Cursor安装和登录

2. Cursor配置

二、Cursor 界面布局介绍

三、Cursor 收费版本区别

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

五、编写代码

1. HTML 结构 (index.html)

2. CSS 样式 (style.css)

3. JavaScript 逻辑 (game.js)

六、运行游戏

七、总结

相关推荐

飞牛OS入门安装遇到问题，如何解决?

C++ std::vector 简介

系统C盘清理:微信PC端文件清理，扩大C盘可用空间步骤

如何在 iPhone 和 Android 上恢复已删除的抖音消息

Boost高性能并发无锁队列指南:boost::lockfree::queue

大模型手册: 保姆级用CherryStudio知识库

西门子博途中如何输入读取和编辑date and time变量

用什么工具在Win中查看8G大的log文件?

我的Excel打开后是一堆乱码，如何解决?

威联通NAS安装阿里云盘WebDAV服务并添加到Infuse

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

一、Cursor 前世今生

二、Cursor 安装

1. Cursor安装 和登录

2. Cursor配置

二、Cursor 界面布局介绍

三、Cursor 收费版本区别

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

五、编写代码

1. HTML 结构 (index.html)

2. CSS 样式 (style.css)

3. JavaScript 逻辑 (game.js)

六、运行游戏

七、总结

相关推荐

飞牛OS入门安装遇到问题，如何解决?

C++ std::vector 简介

系统C盘清理:微信PC端文件清理，扩大C盘可用空间步骤

如何在 iPhone 和 Android 上恢复已删除的抖音消息

Boost高性能并发无锁队列指南:boost::lockfree::queue

大模型手册: 保姆级用CherryStudio知识库

西门子博途中如何输入读取和编辑date and time变量

用什么工具在Win中查看8G大的log文件?

我的Excel打开后是一堆乱码，如何解决?

威联通NAS安装阿里云盘WebDAV服务并添加到Infuse

1. Cursor安装和登录