大家好，我是程序员寒山(CxyHanShan)。

最近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官网（Cursor - The AI Code Editor ），下载与自己系统对应的版本，支持Windows、MacOS、Linux系统。安装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 = [
            [
                ['#', '#', '#', '#', '#'],
                ['#','', '', '', '#'],
                ['#','', '@','', '#'],
                ['#','', '$', '.', '#'],
                ['#', '#', '#', '#', '#']
            ],
            [
                ['#', '#', '#', '#', '#'],
                ['#', '.','', '', '#'],
                ['#','', '@', '$', '#'],
                ['#','', '$', '.', '#'],
                ['#', '#', '#', '#', '#']
            ]
        ];
        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] === '$' || this.level[newY][newX] === '*') {
            const nextX = newX + dx;
            const nextY = newY + dy;
            
            if (this.level[nextY][nextX] === '#' || 
                this.level[nextY][nextX] === '$' || 
                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? '*' : '$';
    }

    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] === '$') 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 '$': 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，即可开始玩推箱子小游戏。

八、总结

希望通过这个实战演练，你能掌握更多编程技巧。如果有任何问题，欢迎随时提问！

# 人工智能 # 编辑器
Logo
DeepSeek技术社区

欢迎加入DeepSeek 技术社区。在这里，你可以找到志同道合的朋友，共同探索AI技术的奥秘。

更多推荐

cover

企业微信如何使用deepseek-最简单的方法

avatar DeepSeek技术社区
cover

第38次CCF-CSP认证——月票发行（chatgpt5 vs deepseekv3.1）

avatar DeepSeek技术社区

deepseek v3.1 特性，UE8M0 FP8 的详解和意义

本文介绍deepseek v3.1 的意义，对于国产芯片来说，未来可以更好地支持deepseek

avatar DeepSeek技术社区