政安晨【零基础玩转各类开源AI项目】探索Cursor-AI Coder的应用实例

政安晨2024-11-27 17:14

目录

Cusor的主要特点

Cusor实操

政安晨的个人主页：************政安晨****************

欢迎 👍点赞✍评论⭐收藏

希望政安晨的博客能够对您有所裨益，如有不足之处，欢迎在评论区提出指正！

Cursor 是 Visual Studio Code 的一个分支。这使我们能够专注于创造使用人工智能进行编码的最佳方式，同时提供熟悉的文本编辑体验。

Cusor的主要特点

Cursor 编辑器是一款功能强大的代码编辑器，主要有以下特点：

一、编程辅助功能

  • 智能代码补全

    • 它能够根据编程语言的语法规则和上下文，自动补全代码片段。例如，在编写 Python 程序时，当你输入一个函数的开头几个字母，如 "pri"，它会自动提示 "print ()" 这个函数，这大大提高了编码效率，减少了手动输入代码的时间和出错的概率。

  • 代码生成

    • Cursor 可以根据自然语言描述生成代码。比如，你输入 "写一个函数来计算两个数的和"，它能够生成类似以下 Python 代码：

      def add_numbers(a, b):
      return a + b

  • 对于复杂的算法或者特定的编程任务，这种代码生成功能可以为程序员提供一个很好的起点，他们可以在生成代码的基础上进行修改和完善。

二、支持多种编程语言

  • 它支持广泛的编程语言，包括但不限于 Python、Java、JavaScript、C++、C# 等。
    • 对于 Web 开发人员，他们可以使用 Cursor 编写前端的 JavaScript 和 CSS 代码，同时也能处理后端的 Python（如使用 Flask 或 Django 框架）或者 Java 代码。对于游戏开发者，在编写 C++ 或 C# 游戏逻辑代码时，也能借助 Cursor 来提高开发效率。

三、界面和使用体验

  • 简洁直观的界面
    • 其界面设计简洁，易于新手学习和上手。工具栏和菜单布局合理，代码编辑区域清晰，能够让用户专注于代码编写。例如，代码的语法高亮显示可以让不同类型的代码元素（如变量、函数、关键字等）以不同的颜色区分开来，增强了代码的可读性。
  • 方便的文件管理
    • 可以方便地在编辑器中打开、保存和管理文件。用户能够轻松地在不同的项目文件夹之间切换，并且可以快速地查找和打开特定的代码文件。

这是官网：https://www.cursor.com/

安装工具后，进行。

Cusor实操

使用AI编程一个3D骰子的H5程序：

描述：

基于three.js框架开发一个支持鼠标和触屏的科幻风3D骰子程序，支持屏幕缩放，骰子落入地面后，与地面齐平，符合物理规律，朝上的面随机显示数字，两个骰子朝上面的数字不能总是完全一样，骰子在空中旋转时速度适中，不能太慢，但可以让玩家看到数字变化的过程。

生成代码如下：

复制代码 
<!DOCTYPE html>
<html>
<head>
    <title>3D 科幻骰子</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
        #info {
            position: absolute;
            top: 10px;
            width: 100%;
            text-align: center;
            color: white;
        }
    </style>
</head>
<body>
    <div id="info">点击骰子进行投掷，滚轮或双指缩放</div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script>
        let scene, camera, renderer;
        let dice1, dice2;
        let isRolling = false;
        let floor;

        init();
        animate();

        function init() {
            // 场景设置
            scene = new THREE.Scene();
            scene.background = new THREE.Color(0x000000);

            // 相机设置
            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
            camera.position.z = 10;
            camera.position.y = 5;
            camera.lookAt(0, 0, 0);

            // 渲染器设置
            renderer = new THREE.WebGLRenderer({ antialias: true });
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.shadowMap.enabled = true;
            document.body.appendChild(renderer.domElement);

            // 灯光设置
            const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
            scene.add(ambientLight);
            const pointLight = new THREE.PointLight(0xffffff, 1);
            pointLight.position.set(10, 10, 10);
            pointLight.castShadow = true;
            scene.add(pointLight);

            // 创建地面
            const floorGeometry = new THREE.PlaneGeometry(20, 20);
            const floorMaterial = new THREE.MeshPhongMaterial({ 
                color: 0x404040,
                side: THREE.DoubleSide
            });
            floor = new THREE.Mesh(floorGeometry, floorMaterial);
            floor.rotation.x = -Math.PI / 2;
            floor.position.y = -2;
            floor.receiveShadow = true;
            scene.add(floor);

            // 创建骰子
            createDice();

            // 添加点击事件
            renderer.domElement.addEventListener('click', rollDice);

            // 添加缩放事件
            renderer.domElement.addEventListener('wheel', onZoom);
            renderer.domElement.addEventListener('touchstart', onTouchStart);
            renderer.domElement.addEventListener('touchmove', onTouchMove);

            // 窗口大小调整
            window.addEventListener('resize', onWindowResize, false);
        }

        let touchStartDistance = 0;
        function onTouchStart(event) {
            if (event.touches.length === 2) {
                const dx = event.touches[0].pageX - event.touches[1].pageX;
                const dy = event.touches[0].pageY - event.touches[1].pageY;
                touchStartDistance = Math.sqrt(dx * dx + dy * dy);
            }
        }

        function onTouchMove(event) {
            if (event.touches.length === 2) {
                const dx = event.touches[0].pageX - event.touches[1].pageX;
                const dy = event.touches[0].pageY - event.touches[1].pageY;
                const distance = Math.sqrt(dx * dx + dy * dy);
                
                const delta = distance - touchStartDistance;
                camera.position.z = Math.max(5, Math.min(15, camera.position.z - delta * 0.01));
                touchStartDistance = distance;
            }
        }

        function onZoom(event) {
            const delta = event.deltaY;
            camera.position.z = Math.max(5, Math.min(15, camera.position.z + delta * 0.01));
        }

        function createDice() {
            const geometry = new THREE.BoxGeometry(2, 2, 2);
            const materials = [];
            
            // 创建骰子材质
            for (let i = 0; i < 6; i++) {
                const canvas = document.createElement('canvas');
                canvas.width = 128;
                canvas.height = 128;
                const context = canvas.getContext('2d');
                
                context.fillStyle = '#000000';
                context.fillRect(0, 0, 128, 128);
                
                context.fillStyle = '#00ffff';
                context.font = '80px Arial';
                context.textAlign = 'center';
                context.textBaseline = 'middle';
                context.fillText(i + 1, 64, 64);
                
                const texture = new THREE.CanvasTexture(canvas);
                materials.push(new THREE.MeshPhongMaterial({ 
                    map: texture, 
                    transparent: true,
                    emissive: 0x00ffff,
                    emissiveIntensity: 0.2
                }));
            }

            // 创建两个骰子
            dice1 = new THREE.Mesh(geometry, materials);
            dice2 = new THREE.Mesh(geometry, materials);
            
            dice1.position.set(-2, 3, 0);
            dice2.position.set(2, 3, 0);
            
            dice1.castShadow = true;
            dice2.castShadow = true;
            
            // 添加点光源作为骰子的光晕效果
            const dice1Light = new THREE.PointLight(0x00ffff, 0.5, 3);
            const dice2Light = new THREE.PointLight(0x00ffff, 0.5, 3);
            dice1Light.position.copy(dice1.position);
            dice2Light.position.copy(dice2.position);
            scene.add(dice1Light);
            scene.add(dice2Light);
            
            scene.add(dice1);
            scene.add(dice2);
        }

        function rollDice() {
            if (isRolling) return;
            isRolling = true;

            // 重置骰子位置
            dice1.position.y = 3;
            dice2.position.y = 3;

            // 为每个骰子生成随机的最终旋转角度
            const finalRotation1 = {
                x: Math.floor(Math.random() * 4) * (Math.PI / 2),
                y: Math.floor(Math.random() * 4) * (Math.PI / 2),
                z: Math.floor(Math.random() * 4) * (Math.PI / 2)
            };
            
            const finalRotation2 = {
                x: Math.floor(Math.random() * 4) * (Math.PI / 2),
                y: Math.floor(Math.random() * 4) * (Math.PI / 2),
                z: Math.floor(Math.random() * 4) * (Math.PI / 2)
            };

            const duration = 2000;
            const start = Date.now();
            const gravity = -9.8;
            const initialVelocity = 2;
            let velocity = initialVelocity;

            function animate() {
                const elapsed = Date.now() - start;
                const progress = elapsed / duration;

                if (progress < 1) {
                    // 应用重力
                    velocity += gravity * 0.016;
                    dice1.position.y = Math.max(-1, dice1.position.y + velocity * 0.016);
                    dice2.position.y = Math.max(-1, dice2.position.y + velocity * 0.016);

                    // 旋转 - 速度增加3倍
                    if (dice1.position.y > -1) {
                        dice1.rotation.x += 0.6;
                        dice1.rotation.y += 0.9;
                        dice1.rotation.z += 0.3;
                    }
                    if (dice2.position.y > -1) {
                        dice2.rotation.x += 0.9;
                        dice2.rotation.y += 0.6;
                        dice2.rotation.z += 0.45;
                    }

                    // 碰撞检测
                    if (dice1.position.y <= -1) {
                        velocity = Math.abs(velocity) * 0.5;
                        dice1.rotation.x = finalRotation1.x;
                        dice1.rotation.y = finalRotation1.y;
                        dice1.rotation.z = finalRotation1.z;
                        dice2.rotation.x = finalRotation2.x;
                        dice2.rotation.y = finalRotation2.y;
                        dice2.rotation.z = finalRotation2.z;
                    }

                    requestAnimationFrame(animate);
                } else {
                    // 停止时确保骰子是平放的
                    dice1.position.y = -1;
                    dice2.position.y = -1;
                    dice1.rotation.x = finalRotation1.x;
                    dice1.rotation.y = finalRotation1.y;
                    dice1.rotation.z = finalRotation1.z;
                    dice2.rotation.x = finalRotation2.x;
                    dice2.rotation.y = finalRotation2.y;
                    dice2.rotation.z = finalRotation2.z;
                    isRolling = false;
                }
            }

            animate();
        }

        function animate() {
            requestAnimationFrame(animate);
            renderer.render(scene, camera);
        }

        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        }
    </script>
</body>
</html>

效果图如下：

增加修改为：

请更改骰子中的数字颜色为科技红色。

全选代码，Ctrl+K，输入提示，Ctrl+回车，接受预览。

不满意？修改！

把骰子的颜色再变得对比强烈一些

复制代码 
            const floorMaterial = new THREE.MeshPhongMaterial({ 
                color: 0x202020,  // 地面颜色调暗

魔化了，嘻嘻。

OK，产品经理的春天来了，世界仿佛一下子变得安静了。

相关推荐
溯源0063 小时前
vscode调试python（transformers库的llama为例）
vscode·python·llama
Eiceblue6 小时前
Python 在Word中查找并替换文本
vscode·python·word·pip
落淼喵_G9 小时前
【windows搭建lvgl模拟环境（一）之VSCode】
ide·windows·vscode
爱趣五科技11 小时前
H5DS编辑器教程——H5页面触发动画实战指南
编辑器
AI产品黄叔11 小时前
10分钟搞定高德地图MCP！我用AI解决了约会地点选择难题
前端·ai编程·mcp
小溪彼岸11 小时前
【Cursor】Cursor Rules、NotePads、Project Rules的区别
cursor
小溪彼岸11 小时前
【Cursor】Cursor中的Project Rules是什么？
cursor
小猪皮蛋粥12 小时前
VScode配置默认终端为Anaconda Prompt
ide·vscode·prompt
正宗咸豆花12 小时前
利用 VSCode 配置提升 vibe coding 开发效率
ide·vscode·编辑器
草梅友仁12 小时前
GPT-4o 多模态图像生成功能解析 | 2025 年第 13 周草梅周报
aigc·openai·ai编程
热门推荐
01PyTorch量化技术教程：第四章 PyTorch在量化交易中的应用02RAG 实践- Ollama+RagFlow 部署本地知识库03DeepSeek各版本说明与优缺点分析04RAG生成中的多文档动态融合及去重加权策略探讨05本地化部署AI知识库：基于Ollama+DeepSeek+AnythingLLM保姆级教程06从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑07[OpenHarmony RK3568] (三)蓝牙芯片适配08苍穹外卖面试总结09如何在WPS和Word/Excel中直接使用DeepSeek功能10PixelSNAIL论文代码学习（2）——门控残差网络的实现