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

server/2024/11/27 19:14: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，产品经理的春天来了，世界仿佛一下子变得安静了。


http://www.ppmy.cn/server/145411.html

相关文章

十九：HTTP包体的传输方式（2）：不定长包体

十九：HTTP包体的传输方式（2）：不定长包体

在网络通信中，HTTP协议是最常用的协议之一，它被广泛应用于Web浏览器与Web服务器之间的数据交换。在HTTP中，数据传输的核心内容之一就是包体（Body），即请求或响应中的负载部分。根据包体的大小和传输方式，HTTP包体的传输可以分为定长包体和不定长包体两种形式。在本文中，…
阅读更多...
Redis进阶Redission实现分布式锁

Redis进阶Redission实现分布式锁

Redis进阶Redission实现分布式锁 基于Redis实现的各种问题怎么解决这些问题redisson实现1、导入依赖2.注册成Bean3、代码实现 基于Redis实现的各种问题 基于Redis实现的分布式锁还具有其他问题 不可重入&#xff1a;按照以上的逻辑&#xff0c;我们一个线程只能获取一次锁&am…
阅读更多...
wend看源码-APISJON

wend看源码-APISJON

项目地址 腾讯APIJSON官方网站 简介 APIJSON 可以定义为一个面向HTTP 协议的JSON 规范&#xff0c;一个面向数据访问层的ORM 框架。其主要工作流程包括&#xff1a;前端按照既定格式组装 JSON 请求报文&#xff0c;通过 APIJSON-ORM 将这些报文直接转换为 SQL 语句&#xff0c…
阅读更多...
修复HIve表乱码问题

修复HIve表乱码问题

修改数据库编码 # 修改已存在的hive元数据库&#xff0c;字符编码格式为utf8mb4 mysql> alter database hive character set utf8mb4; # 进入hive元数据库 mysql> use hive;# 查看元数据库字符编码格式 mysql> show variables like character_set_database; 修改…
阅读更多...
金铲铲S13双城之战自动拿牌助手

金铲铲S13双城之战自动拿牌助手

金铲铲S13双城之战自动拿牌助手 基于python&#xff0c;pyautogui和金铲铲自带备战助手实现 B站视频演示效果 shuangcheng.py import timeimport pyautogui import datetimeprint(请关注您的分辨率&#xff0c;此程序需要配合thumbs_x_y.txt文件同时使用) print(简介&#x…
阅读更多...
vue 判断mp3是否加载成功

vue 判断mp3是否加载成功

一、需求 vue MP3加载时&#xff0c;有可能遇到后端没有MP3&#xff0c;但是返回有链接。要求获取MP3失败提示用户&#xff0c;MP3获取失败。 二、代码 canPlayAudio(url) { // 判断录音是否加载const audio new Audio(url)return new Promise((resolve, reject) > {audio.…
阅读更多...
51单片机从入门到精通：理论与实践指南（一）

51单片机从入门到精通：理论与实践指南（一）

单片机在智能控制领域的应用已非常普遍&#xff0c;发展也很迅猛&#xff0c;学习和使用单片机的人员越来越多。虽然新型微控制器在不断推出&#xff0c;但51单片机价格低廉、易学易用、性能成熟&#xff0c;在家电和工业控制中有一定的应用&#xff0c;而且学好了51单片机&…
阅读更多...
GaussianDreamer: Fast Generation from Text to 3D Gaussians——点云论文阅读（11）

GaussianDreamer: Fast Generation from Text to 3D Gaussians——点云论文阅读（11）

此内容是论文总结&#xff0c;重点看思路&#xff01;&#xff01; 文章概述 本文提出了一种快速从文本生成3D资产的新方法&#xff0c;通过结合3D高斯点表示、3D扩散模型和2D扩散模型的优势&#xff0c;实现了高效生成。该方法利用3D扩散模型生成初始几何&#xff0c;通过噪声…
阅读更多...
最新文章

Copyright @ 2022~2023