当前位置： 首页 > news >正文

Cursor结合Claude 3.7零基础开发愤怒的小鸟【深夜Claude 3.7系列发布，类似DeepSeek-R1和V3的合体？】

news 2025/9/13 11:59:15

文章目录

  • 前言
  • 介绍
  • “市面上唯一的混合模型”
  • 卓越的编程能力、精准控制思考时间
  • Cursor已接入
  • Cursor结合Claude 3.7快速编写游戏
  • 完整html代码

🍃作者介绍：双非本科大四网络工程专业在读，阿里云专家博主，前三年专注于Java领域学习，擅长web应用开发，目前专注于人工智能领域相关知识，欢迎订阅系列专栏🌹
🦅个人主页：@逐梦苍穹(5900粉丝；60万访问量)
✈ 您的一键三连，是我创作的最大动力🌹

前言

2月25日消息，人工智能初创公司Anthropic今天宣布推出Claude 3.7 Sonnet，称这是其迄今为止最智能的模型，也是市场上首款混合推理模型。该公司介绍，Claude 3.7 Sonnet仅用一个模型实现了两种思考方式，既能提供接近即时的响应，也能展示分步骤的详细思考过程。

该公司称，Claude 3.7 Sonnet这种“混合型”模型同时具备“推理模式”（停下来思考复杂答案）与传统模式（实时生成答案）的能力，并表示该模型是市面上唯一的此类“混合”模型。此外，Claude 3.7 Sonnet在编程领域的表现尤为突出，并且能精准控制思考时间。

介绍

大力吸引资金的初创企业与科技巨头们争夺AI领域领导权的战争已经白热化。Anthropic周一发布名为Claude 3.7 Sonnet的模型，该公司表示，这是其有史以来“最智能”的AI模型，称这种“混合型”模型同时具备“推理模式”（停下来思考复杂答案）与传统模式（实时生成答案）的能力。

在这里插入图片描述

Anthropic联合创始人兼首席科学官Jared
Kaplan在接受媒体采访时表示，“这个模型融合了所有功能——我们的目标是拥有一个统一的AI，能适用于各种场景。这样对我们的客户而言会更简单一些。”

“市面上唯一的混合模型”

Anthropic称，Claude 3.7 Sonnet是市面上唯一的此类“混合”模型，并将立即投入使用。
Kaplan将其比作人类大脑的运行方式：有的问题需要深度思考，有的问题需要快速作答。
但Anthropic希望将这两种能力整合在同一个模型中，而不是完全分开。

分析认为，这一举措或许能为Anthropic在与对手OpenAI以及那些投入巨资开发AI模型的大型科技公司的竞争中赢得急需的优势。
Anthropic的聊天机器人Claude与OpenAI的ChatGPT以及谷歌（Google）的Gemini竞争激烈。
另据媒体报道，Anthropic正与Lightspeed和谷歌洽谈一笔高达20亿美元的融资，估值将达到600亿美元。另外，亚马逊对该初创企业的投资约为80亿美元。
曾参与共同创立Instagram的Anthropic产品主管Mike Krieger对媒体表示，这种混合方法能简化聊天机器人的使用流程，让用户无需思考究竟哪种功能最适合。
他说，让用户也可以选择模型或者让模型思考多久，对普通用户有些复杂，他希望用户在使用时不必过多操心。
Krieger说，用户可以选择开启或关闭混合选项，来保持简单性，并根据自己的工作需求为模型设定一个“时间预算”。
Anthropic还计划于周一推出一款用于编程的代理工具。Anthropic近期在一些产品发布上赢得了先机。

卓越的编程能力、精准控制思考时间

Claude 3.7 Sonnet在编程领域的表现尤为突出。它在编码和前端网页开发方面展现了显著的改进，能够处理复杂的代码库，并在高级工具使用上表现出色。
在多个测试中，Claude 3.7 Sonnet都展现出了卓越的编码能力。
例如，Cursor指出Claude在现实编码任务中再次被评为最佳模型，特别是在处理复杂代码库和高级工具使用等方面有显著改进。
Cognition发现它在规划代码变更和处理全栈更新方面远胜其他模型。

Vercel强调了Claude在复杂代理工作流中的卓越精度，而Replit成功地部署了Claude来从零开始构建复杂的网络应用程序和仪表板，而其他模型则会停滞不前。在Canva的评估中，Claude始终能够生成具有卓越设计品味的生产就绪代码，并显著减少了错误。

在这里插入图片描述

Claude 3.7 Sonnet不仅能够产生近乎即时的回应，或进行可让用户看到的、逐步深入的思考，并且 API 用户可以精细控制模型思考的时间长短。
此外，用户还可以通过API控制思考的预算，告诉Claude思考不超过N个标记，N可以是任何值，最高可达其128K标记的输出限制。
这种灵活性使得用户可以在速度（和成本）与回答质量之间进行权衡。

Cursor已接入

马上发现新版cursor已经可以选择Claude 3.7系列了：
在这里插入图片描述
我的版本是：
在这里插入图片描述

Cursor结合Claude 3.7快速编写游戏

这次编写的是愤怒的小鸟。
提示词：
在这里插入图片描述
在这里插入图片描述

看看效果：

在这里插入图片描述
在这里插入图片描述

三个关卡如下：

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

完整html代码

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>愤怒的小鸟</title><style>body {margin: 0;padding: 0;display: flex;justify-content: center;align-items: center;height: 100vh;background-color: #87CEEB;font-family: Arial, sans-serif;}#game-container {width: 70vw;height: 70vh;position: relative;overflow: hidden;border-radius: 10px;box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);}#canvas {background: linear-gradient(to bottom, #87CEEB, #E0F7FA);width: 100%;height: 100%;}#score-panel {position: absolute;top: 10px;left: 10px;background-color: rgba(255, 255, 255, 0.7);padding: 10px;border-radius: 5px;font-size: 18px;font-weight: bold;}#level-info {position: absolute;top: 10px;right: 10px;background-color: rgba(255, 255, 255, 0.7);padding: 10px;border-radius: 5px;font-size: 18px;font-weight: bold;}#restart-btn {position: absolute;top: 60px;right: 10px;background-color: #FF5722;color: white;border: none;padding: 10px 15px;border-radius: 5px;cursor: pointer;font-size: 16px;display: none;}#message {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background-color: rgba(0, 0, 0, 0.8);color: white;padding: 20px;border-radius: 10px;font-size: 24px;text-align: center;display: none;}</style>
</head>
<body><div id="game-container"><canvas id="canvas"></canvas><div id="score-panel">分数: <span id="score">0</span></div><div id="level-info">关卡: <span id="level">1</span></div><button id="restart-btn">重新开始</button><div id="message"></div></div><script>// 游戏变量const canvas = document.getElementById('canvas');const ctx = canvas.getContext('2d');const scoreElement = document.getElementById('score');const levelElement = document.getElementById('level');const restartBtn = document.getElementById('restart-btn');const messageElement = document.getElementById('message');// 设置画布尺寸function resizeCanvas() {canvas.width = canvas.clientWidth;canvas.height = canvas.clientHeight;}window.addEventListener('resize', resizeCanvas);resizeCanvas();// 游戏状态let gameState = {score: 0,level: 1,birdsRemaining: 3,currentBird: null,slingshot: {x: canvas.width * 0.15,y: canvas.height * 0.7,width: 20,height: 100},birds: [],pigs: [],blocks: [],isGameOver: false,isLevelCompleted: false,isDragging: false,isFlying: false,trajectoryPoints: []};// 小鸟类class Bird {constructor(x, y, radius, color) {this.x = x;this.y = y;this.radius = radius;this.color = color;this.originalX = x;this.originalY = y;this.velocity = { x: 0, y: 0 };this.isResting = true;this.mass = 1;}draw() {ctx.beginPath();ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);ctx.fillStyle = this.color;ctx.fill();ctx.closePath();// 绘制鸟的眼睛ctx.beginPath();ctx.arc(this.x + this.radius * 0.3, this.y - this.radius * 0.2, this.radius * 0.15, 0, Math.PI * 2);ctx.fillStyle = "white";ctx.fill();ctx.closePath();ctx.beginPath();ctx.arc(this.x + this.radius * 0.3, this.y - this.radius * 0.2, this.radius * 0.05, 0, Math.PI * 2);ctx.fillStyle = "black";ctx.fill();ctx.closePath();// 绘制喙ctx.beginPath();ctx.moveTo(this.x + this.radius * 0.5, this.y);ctx.lineTo(this.x + this.radius * 1.2, this.y);ctx.lineTo(this.x + this.radius * 0.5, this.y + this.radius * 0.3);ctx.fillStyle = "#FF9800";ctx.fill();ctx.closePath();}update() {if (!this.isResting) {// 应用重力this.velocity.y += 0.2;// 应用空气阻力this.velocity.x *= 0.99;// 更新位置this.x += this.velocity.x;this.y += this.velocity.y;// 每5帧记录一次轨迹点if (gameState.isFlying && frameCount % 5 === 0) {gameState.trajectoryPoints.push({ x: this.x, y: this.y });}// 检查小鸟是否超出边界if (this.x > canvas.width + 100 || this.x < -100 || this.y > canvas.height + 100) {this.isResting = true;gameState.isFlying = false;nextBird();}// 检查与猪和方块的碰撞checkCollisions(this);}}launch(force, angle) {this.isResting = false;this.velocity.x = Math.cos(angle) * force * 0.2;this.velocity.y = Math.sin(angle) * force * 0.2;gameState.isFlying = true;gameState.trajectoryPoints = [];}}// 猪类class Pig {constructor(x, y, radius) {this.x = x;this.y = y;this.radius = radius;this.isDestroyed = false;this.health = 100;this.mass = 2;}draw() {if (!this.isDestroyed) {ctx.beginPath();ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);ctx.fillStyle = "#7CB342";ctx.fill();ctx.closePath();// 绘制猪的眼睛ctx.beginPath();ctx.arc(this.x - this.radius * 0.3, this.y - this.radius * 0.2, this.radius * 0.15, 0, Math.PI * 2);ctx.fillStyle = "white";ctx.fill();ctx.closePath();ctx.beginPath();ctx.arc(this.x + this.radius * 0.3, this.y - this.radius * 0.2, this.radius * 0.15, 0, Math.PI * 2);ctx.fillStyle = "white";ctx.fill();ctx.closePath();ctx.beginPath();ctx.arc(this.x - this.radius * 0.3, this.y - this.radius * 0.2, this.radius * 0.05, 0, Math.PI * 2);ctx.fillStyle = "black";ctx.fill();ctx.closePath();ctx.beginPath();ctx.arc(this.x + this.radius * 0.3, this.y - this.radius * 0.2, this.radius * 0.05, 0, Math.PI * 2);ctx.fillStyle = "black";ctx.fill();ctx.closePath();// 绘制鼻子ctx.beginPath();ctx.arc(this.x, this.y + this.radius * 0.1, this.radius * 0.3, 0, Math.PI * 2);ctx.fillStyle = "#FFCCBC";ctx.fill();ctx.closePath();ctx.beginPath();ctx.arc(this.x - this.radius * 0.1, this.y + this.radius * 0.1, this.radius * 0.1, 0, Math.PI * 2);ctx.fillStyle = "black";ctx.fill();ctx.closePath();ctx.beginPath();ctx.arc(this.x + this.radius * 0.1, this.y + this.radius * 0.1, this.radius * 0.1, 0, Math.PI * 2);ctx.fillStyle = "black";ctx.fill();ctx.closePath();}}takeDamage(damage) {this.health -= damage;if (this.health <= 0) {this.destroy();}}destroy() {this.isDestroyed = true;gameState.score += 500;scoreElement.textContent = gameState.score;// 检查是否所有猪都被消灭const allPigsDestroyed = gameState.pigs.every(pig => pig.isDestroyed);if (allPigsDestroyed) {gameState.isLevelCompleted = true;showMessage("恭喜！关卡完成！");restartBtn.style.display = "block";restartBtn.textContent = "下一关";}}}// 方块类class Block {constructor(x, y, width, height, type) {this.x = x;this.y = y;this.width = width;this.height = height;this.type = type; // wood, stone, glassthis.isDestroyed = false;this.health = type === "wood" ? 150 : type === "stone" ? 300 : 100;this.mass = type === "wood" ? 2 : type === "stone" ? 4 : 1;}draw() {if (!this.isDestroyed) {ctx.beginPath();ctx.rect(this.x - this.width / 2, this.y - this.height / 2, this.width, this.height);if (this.type === "wood") {ctx.fillStyle = "#8D6E63";} else if (this.type === "stone") {ctx.fillStyle = "#78909C";} else { // glassctx.fillStyle = "rgba(200, 230, 255, 0.8)";}ctx.fill();ctx.strokeStyle = "#000";ctx.lineWidth = 1;ctx.stroke();ctx.closePath();// 为木块绘制纹理线条if (this.type === "wood") {for (let i = 1; i < 4; i++) {ctx.beginPath();ctx.moveTo(this.x - this.width / 2, this.y - this.height / 2 + i * (this.height / 4));ctx.lineTo(this.x + this.width / 2, this.y - this.height / 2 + i * (this.height / 4));ctx.strokeStyle = "#5D4037";ctx.lineWidth = 1;ctx.stroke();ctx.closePath();}}// 为石块绘制裂纹if (this.type === "stone") {ctx.beginPath();ctx.moveTo(this.x - this.width / 4, this.y - this.height / 4);ctx.lineTo(this.x + this.width / 6, this.y + this.height / 6);ctx.strokeStyle = "#546E7A";ctx.lineWidth = 1;ctx.stroke();ctx.closePath();ctx.beginPath();ctx.moveTo(this.x + this.width / 4, this.y - this.height / 3);ctx.lineTo(this.x - this.width / 5, this.y + this.height / 5);ctx.stroke();ctx.closePath();}// 为玻璃绘制光泽if (this.type === "glass") {ctx.beginPath();ctx.moveTo(this.x - this.width / 3, this.y - this.height / 3);ctx.lineTo(this.x - this.width / 6, this.y - this.height / 6);ctx.strokeStyle = "white";ctx.lineWidth = 2;ctx.stroke();ctx.closePath();}}}takeDamage(damage) {this.health -= damage;if (this.health <= 0) {this.destroy();}}destroy() {this.isDestroyed = true;if (this.type === "wood") {gameState.score += 100;} else if (this.type === "stone") {gameState.score += 200;} else { // glassgameState.score += 50;}scoreElement.textContent = gameState.score;}isCollidingWith(bird) {// 检查小鸟是否与方块碰撞return (bird.x + bird.radius > this.x - this.width / 2 &&bird.x - bird.radius < this.x + this.width / 2 &&bird.y + bird.radius > this.y - this.height / 2 &&bird.y - bird.radius < this.y + this.height / 2);}}// 弹弓类class Slingshot {constructor(x, y) {this.x = x;this.y = y;this.width = 20;this.height = 100;}draw() {// 弹弓底座ctx.beginPath();ctx.rect(this.x - this.width / 2, this.y - this.height / 2, this.width, this.height);ctx.fillStyle = "#5D4037";ctx.fill();ctx.closePath();// 弹弓顶部左侧ctx.beginPath();ctx.moveTo(this.x - this.width / 2, this.y - this.height / 2);ctx.quadraticCurveTo(this.x - this.width * 2,this.y - this.height / 2 - 20,this.x - this.width * 1.5,this.y - this.height / 2 - 40);ctx.lineWidth = 10;ctx.strokeStyle = "#8D6E63";ctx.stroke();ctx.closePath();// 弹弓顶部右侧ctx.beginPath();ctx.moveTo(this.x + this.width / 2, this.y - this.height / 2);ctx.quadraticCurveTo(this.x + this.width * 2,this.y - this.height / 2 - 20,this.x + this.width * 1.5,this.y - this.height / 2 - 40);ctx.lineWidth = 10;ctx.strokeStyle = "#8D6E63";ctx.stroke();ctx.closePath();// 如果有小鸟在弹弓上，绘制弹弓皮筋if (gameState.currentBird && !gameState.isFlying) {// 左侧皮筋ctx.beginPath();ctx.moveTo(this.x - this.width * 1.5, this.y - this.height / 2 - 40);ctx.lineTo(gameState.currentBird.x, gameState.currentBird.y);ctx.lineWidth = 5;ctx.strokeStyle = "#795548";ctx.stroke();ctx.closePath();// 右侧皮筋ctx.beginPath();ctx.moveTo(this.x + this.width * 1.5, this.y - this.height / 2 - 40);ctx.lineTo(gameState.currentBird.x, gameState.currentBird.y);ctx.lineWidth = 5;ctx.strokeStyle = "#795548";ctx.stroke();ctx.closePath();} else {// 静止状态的皮筋ctx.beginPath();ctx.moveTo(this.x - this.width * 1.5, this.y - this.height / 2 - 40);ctx.lineTo(this.x, this.y - this.height / 2 - 20);ctx.lineTo(this.x + this.width * 1.5, this.y - this.height / 2 - 40);ctx.lineWidth = 5;ctx.strokeStyle = "#795548";ctx.stroke();ctx.closePath();}}}// 初始化关卡function initLevel(level) {gameState.birds = [];gameState.pigs = [];gameState.blocks = [];gameState.isLevelCompleted = false;gameState.isGameOver = false;// 重置鸟的数量gameState.birdsRemaining = level === 1 ? 3 : level === 2 ? 4 : 5;// 创建弹弓gameState.slingshot = new Slingshot(canvas.width * 0.15, canvas.height * 0.7);// 根据关卡创建不同的布局if (level === 1) {// 关卡 1 - 简单布局gameState.pigs.push(new Pig(canvas.width * 0.7, canvas.height * 0.7, 25));gameState.blocks.push(new Block(canvas.width * 0.6, canvas.height * 0.75, 30, 100, "wood"));gameState.blocks.push(new Block(canvas.width * 0.8, canvas.height * 0.75, 30, 100, "wood"));gameState.blocks.push(new Block(canvas.width * 0.7, canvas.height * 0.65, 150, 20, "wood"));} else if (level === 2) {// 关卡 2 - 中等布局gameState.pigs.push(new Pig(canvas.width * 0.65, canvas.height * 0.7, 25));gameState.pigs.push(new Pig(canvas.width * 0.8, canvas.height * 0.7, 25));// 第一层gameState.blocks.push(new Block(canvas.width * 0.55, canvas.height * 0.75, 30, 100, "stone"));gameState.blocks.push(new Block(canvas.width * 0.9, canvas.height * 0.75, 30, 100, "stone"));// 第二层gameState.blocks.push(new Block(canvas.width * 0.65, canvas.height * 0.65, 30, 100, "wood"));gameState.blocks.push(new Block(canvas.width * 0.8, canvas.height * 0.65, 30, 100, "wood"));// 顶层gameState.blocks.push(new Block(canvas.width * 0.725, canvas.height * 0.55, 200, 20, "glass"));} else {// 关卡 3 - 复杂布局gameState.pigs.push(new Pig(canvas.width * 0.65, canvas.height * 0.7, 25));gameState.pigs.push(new Pig(canvas.width * 0.75, canvas.height * 0.6, 25));gameState.pigs.push(new Pig(canvas.width * 0.85, canvas.height * 0.7, 25));// 第一个结构gameState.blocks.push(new Block(canvas.width * 0.55, canvas.height * 0.75, 30, 100, "stone"));gameState.blocks.push(new Block(canvas.width * 0.65, canvas.height * 0.65, 100, 20, "wood"));// 中间结构gameState.blocks.push(new Block(canvas.width * 0.75, canvas.height * 0.75, 30, 100, "glass"));gameState.blocks.push(new Block(canvas.width * 0.75, canvas.height * 0.65, 30, 100, "glass"));gameState.blocks.push(new Block(canvas.width * 0.75, canvas.height * 0.55, 100, 20, "wood"));// 第三个结构gameState.blocks.push(new Block(canvas.width * 0.95, canvas.height * 0.75, 30, 100, "stone"));gameState.blocks.push(new Block(canvas.width * 0.85, canvas.height * 0.65, 100, 20, "wood"));}// 创建小鸟prepareNextBird();// 更新UIscoreElement.textContent = gameState.score;levelElement.textContent = gameState.level;restartBtn.style.display = "none";}// 准备下一只小鸟function prepareNextBird() {if (gameState.birdsRemaining > 0) {const birdColors = ["#E53935", "#FDD835", "#43A047"];const birdType = (gameState.level + gameState.birdsRemaining) % 3;gameState.currentBird = new Bird(gameState.slingshot.x,gameState.slingshot.y - gameState.slingshot.height / 2 - 20,20,birdColors[birdType]);gameState.birds.push(gameState.currentBird);} else {gameState.currentBird = null;// 检查是否还有猪存活const anyPigAlive = gameState.pigs.some(pig => !pig.isDestroyed);if (anyPigAlive) {gameState.isGameOver = true;showMessage("游戏结束！");restartBtn.style.display = "block";restartBtn.textContent = "重新开始";}}}// 启动下一只鸟function nextBird() {gameState.birdsRemaining--;gameState.trajectoryPoints = [];prepareNextBird();}// 检查碰撞function checkCollisions(bird) {// 检查与地面的碰撞if (bird.y + bird.radius > canvas.height * 0.95) {bird.y = canvas.height * 0.95 - bird.radius;bird.velocity.y *= -0.5;bird.velocity.x *= 0.8;// 如果速度很小，停止鸟的运动if (Math.abs(bird.velocity.y) < 0.5 && Math.abs(bird.velocity.x) < 0.5) {bird.isResting = true;gameState.isFlying = false;nextBird();}}// 检查与猪的碰撞for (let pig of gameState.pigs) {if (!pig.isDestroyed) {const dx = pig.x - bird.x;const dy = pig.y - bird.y;const distance = Math.sqrt(dx * dx + dy * dy);if (distance < bird.radius + pig.radius) {// 计算碰撞伤害，与速度相关const speed = Math.sqrt(bird.velocity.x * bird.velocity.x + bird.velocity.y * bird.velocity.y);const damage = speed * bird.mass * 20;pig.takeDamage(damage);// 改变鸟的速度const angle = Math.atan2(dy, dx);const targetX = pig.x - Math.cos(angle) * (bird.radius + pig.radius);const targetY = pig.y - Math.sin(angle) * (bird.radius + pig.radius);bird.x = targetX;bird.y = targetY;// 反弹bird.velocity.x = -bird.velocity.x * 0.5;bird.velocity.y = -bird.velocity.y * 0.5;}}}// 检查与方块的碰撞for (let block of gameState.blocks) {if (!block.isDestroyed && block.isCollidingWith(bird)) {// 计算碰撞伤害，与速度相关const speed = Math.sqrt(bird.velocity.x * bird.velocity.x + bird.velocity.y * bird.velocity.y);const damage = speed * bird.mass * 15;block.takeDamage(damage);// 反弹计算// 找出碰撞点的最近边const left = bird.x - (block.x - block.width / 2);const right = (block.x + block.width / 2) - bird.x;const top = bird.y - (block.y - block.height / 2);const bottom = (block.y + block.height / 2) - bird.y;const min = Math.min(left, right, top, bottom);if (min === left) {bird.x = block.x - block.width / 2 - bird.radius;bird.velocity.x = -Math.abs(bird.velocity.x) * 0.5;} else if (min === right) {bird.x = block.x + block.width / 2 + bird.radius;bird.velocity.x = Math.abs(bird.velocity.x) * 0.5;} else if (min === top) {bird.y = block.y - block.height / 2 - bird.radius;bird.velocity.y = -Math.abs(bird.velocity.y) * 0.5;} else if (min === bottom) {bird.y = block.y + block.height / 2 + bird.radius;bird.velocity.y = Math.abs(bird.velocity.y) * 0.5;}}}}// 显示消息function showMessage(msg) {messageElement.textContent = msg;messageElement.style.display = "block";setTimeout(() => {messageElement.style.display = "none";}, 3000);}// 绘制背景function drawBackground() {// 天空ctx.fillStyle = "#87CEEB";ctx.fillRect(0, 0, canvas.width, canvas.height);// 太阳ctx.beginPath();ctx.arc(canvas.width * 0.9, canvas.height * 0.1, 40, 0, Math.PI * 2);ctx.fillStyle = "#FDD835";ctx.fill();ctx.closePath();// 云朵drawCloud(canvas.width * 0.2, canvas.height * 0.15, 1);drawCloud(canvas.width * 0.5, canvas.height * 0.2, 1.2);drawCloud(canvas.width * 0.8, canvas.height * 0.25, 0.8);// 地面ctx.beginPath();ctx.rect(0, canvas.height * 0.95, canvas.width, canvas.height * 0.05);ctx.fillStyle = "#8D6E63";ctx.fill();ctx.closePath();// 草地ctx.beginPath();ctx.rect(0, canvas.height * 0.93, canvas.width, canvas.height * 0.02);ctx.fillStyle = "#7CB342";ctx.fill();ctx.closePath();}// 绘制云朵function drawCloud(x, y, scale) {ctx.beginPath();ctx.arc(x, y, 25 * scale, 0, Math.PI * 2);ctx.arc(x + 25 * scale, y - 10 * scale, 25 * scale, 0, Math.PI * 2);ctx.arc(x + 50 * scale, y, 20 * scale, 0, Math.PI * 2);ctx.arc(x + 25 * scale, y + 10 * scale, 25 * scale, 0, Math.PI * 2);ctx.fillStyle = "white";ctx.fill();ctx.closePath();}// 绘制弹道轨迹function drawTrajectory() {if (gameState.trajectoryPoints.length > 1) {ctx.beginPath();ctx.moveTo(gameState.trajectoryPoints[0].x, gameState.trajectoryPoints[0].y);for (let i = 1; i < gameState.trajectoryPoints.length; i++) {ctx.lineTo(gameState.trajectoryPoints[i].x, gameState.trajectoryPoints[i].y);}ctx.strokeStyle = "rgba(255, 255, 255, 0.5)";ctx.lineWidth = 2;ctx.stroke();ctx.closePath();}}// 更新游戏状态和绘制let frameCount = 0;function gameLoop() {frameCount++;ctx.clearRect(0, 0, canvas.width, canvas.height);// 绘制背景drawBackground();// 绘制弹弓gameState.slingshot.draw();// 绘制轨迹drawTrajectory();// 更新并绘制所有方块for (let block of gameState.blocks) {block.draw();}// 更新并绘制所有猪for (let pig of gameState.pigs) {pig.draw();}// 更新并绘制所有鸟for (let bird of gameState.birds) {bird.update();bird.draw();}// 显示剩余鸟的数量for (let i = 0; i < gameState.birdsRemaining - 1; i++) {ctx.beginPath();ctx.arc(50 + i * 30, canvas.height * 0.9, 10, 0, Math.PI * 2);ctx.fillStyle = "#E53935";ctx.fill();ctx.closePath();}requestAnimationFrame(gameLoop);}// 处理鼠标事件canvas.addEventListener('mousedown', (e) => {if (!gameState.isFlying && gameState.currentBird && !gameState.isGameOver && !gameState.isLevelCompleted) {const rect = canvas.getBoundingClientRect();const mouseX = e.clientX - rect.left;const mouseY = e.clientY - rect.top;const dx = mouseX - gameState.currentBird.x;const dy = mouseY - gameState.currentBird.y;const distance = Math.sqrt(dx * dx + dy * dy);if (distance < gameState.currentBird.radius) {gameState.isDragging = true;}}});canvas.addEventListener('mousemove', (e) => {if (gameState.isDragging && !gameState.isFlying && gameState.currentBird) {const rect = canvas.getBoundingClientRect();const mouseX = e.clientX - rect.left;const mouseY = e.clientY - rect.top;// 限制拖动范围const dx = mouseX - gameState.slingshot.x;const dy = mouseY - (gameState.slingshot.y - gameState.slingshot.height / 2 - 20);const distance = Math.sqrt(dx * dx + dy * dy);if (distance < 100) {gameState.currentBird.x = mouseX;gameState.currentBird.y = mouseY;} else {const angle = Math.atan2(dy, dx);gameState.currentBird.x = gameState.slingshot.x + Math.cos(angle) * 100;gameState.currentBird.y = (gameState.slingshot.y - gameState.slingshot.height / 2 - 20) + Math.sin(angle) * 100;}}});canvas.addEventListener('mouseup', () => {if (gameState.isDragging && !gameState.isFlying && gameState.currentBird) {gameState.isDragging = false;// 计算发射力量和角度const dx = gameState.currentBird.originalX - gameState.currentBird.x;const dy = gameState.currentBird.originalY - gameState.currentBird.y;const distance = Math.sqrt(dx * dx + dy * dy);if (distance > 10) {const angle = Math.atan2(dy, dx);gameState.currentBird.launch(distance, angle);} else {// 如果拖动距离太短，将鸟放回原位gameState.currentBird.x = gameState.currentBird.originalX;gameState.currentBird.y = gameState.currentBird.originalY;}}});// 重新开始按钮点击事件restartBtn.addEventListener('click', () => {if (gameState.isLevelCompleted) {gameState.level++;initLevel(gameState.level);} else {initLevel(gameState.level);}});// 初始化第一关initLevel(1);// 开始游戏循环gameLoop();</script>
</body>
</html>

相关文章：

Cursor结合Claude 3.7零基础开发愤怒的小鸟【深夜Claude 3.7系列发布，类似DeepSeek-R1和V3的合体？】

文章目录 前言介绍“市面上唯一的混合模型”卓越的编程能力、精准控制思考时间Cursor已接入Cursor结合Claude 3.7快速编写游戏完整html代码 &#x1f343;作者介绍&#xff1a;双非本科大四网络工程专业在读&#xff0c;阿里云专家博主&#xff0c;前三年专注于Java领域学习&am…...

编程日记 2025/2/26 6:07:38

基于 Python 的天气数据分析与可视化

基于 Python 的天气数据分析与可视化 1. 项目背景 天气数据分析与可视化项目旨在通过爬取天气数据并进行分析&#xff0c;生成可视化图表&#xff0c;帮助用户了解天气变化趋势。通过该项目&#xff0c;学生可以掌握 Python 的数据爬取、数据分析和可视化技能。该项目适用于气…...

编程日记 2025/2/26 6:06:30

Bybit事件技术分析

事件概述 2025年2月21日UTC时间下午02:16:11&#xff0c;Bybit的以太坊冷钱包&#xff08;0x1db92e2eebc8e0c075a02bea49a2935bcd2dfcf4&#xff09;因恶意合约升级遭到资金盗取。根据Bybit CEO Ben Zhou的声明&#xff0c;攻击者通过钓鱼攻击诱骗冷钱包签名者错误签署恶意交易…...

编程日记 2025/2/26 6:04:23

JavaWeb-在idea中配置Servlet项目

文章目录 在idea中进行Servlet项目的配置(较新的idea版本)创建一个空的JavaSE项目(Project)创建一个普通的JavaSE板块(module)添加Web项目的配置定义一个对象模拟实现接口在web.xml中配置路径映射配置项目到Tomcat服务器启动Tomcat服务器进行测试 在idea中进行Servlet项目的配置…...

编程日记 2025/2/26 6:03:16

redis小记

redis小记 下载redis sudo apt-get install redis-server redis基本命令 ubuntu16下的redis没有protected-mode属性&#xff0c;就算sudo启动&#xff0c;也不能往/var/spool/cron/crontabs写计划任务&#xff0c;感觉很安全 #连接到redis redis-cli -h 127.0.0.1 -p 6379 …...

编程日记 2025/2/26 6:02:04

垂类大模型微调（一）：认识LLaMA-Factory

LlamaFactory 是一个专注于 高效微调大型语言模型（LLMs） 的开源工具框架，尤其以支持 LLaMA（Meta 的大型语言模型系列）及其衍生模型（如 Chinese-LLaMA、Alpaca 等）而闻名。它的目标是简化模型微调流程，降低用户使用门槛； 官方文档 一、介绍 高效微调支持 支持多种微调…...

编程日记 2025/2/26 6:00:57

企业为什么要选择软件测试外包公司?湖南软件测试公司有哪些?

在当今快速发展的技术背景下&#xff0c;软件测试已成为软件开发生命周期的重要一环。随着企业对软件质量要求的不断提高&#xff0c;软件测试外包公司逐渐被越来越多的企业所青睐。 软件测试外包公司通过将软件测试从内部团队外包出去&#xff0c;帮助企业减少开发成本、提升…...

编程日记 2025/2/26 5:59:51

数据保护API（DPAPI）深度剖析与安全实践

Windows DPAPI 安全机制解析 在当今数据泄露与网络攻击日益频繁的背景下&#xff0c;Windows 提供的 DPAPI&#xff08;Data Protection API&#xff09;成为开发者保护本地敏感数据的重要工具。本文将从 双层密钥体系、加密流程、跨上下文加密、已知攻击向量与防御措施、企业…...

编程日记 2025/2/26 5:58:43

java23种设计模式-桥接模式

桥接模式&#xff08;Bridge Pattern&#xff09;学习笔记 &#x1f31f; 定义 桥接模式属于结构型设计模式&#xff0c;将抽象部分与实现部分分离&#xff0c;使它们可以独立变化。通过组合代替继承的方式&#xff0c;解决多维度的扩展问题&#xff0c;防止类爆炸。 &#x…...

编程日记 2025/2/26 5:56:28

3D Web轻量化引擎HOOPS Communicator如何赋能航空航天制造？

在当今航空航天制造领域&#xff0c;精确度、效率和协作是推动行业发展的关键要素。随着数字化技术的飞速发展&#xff0c;3D Web可视化开发包HOOPS Communicator 为航空航天制造带来了革命性的变化。它凭借强大的功能和灵活的应用&#xff0c;助力企业在设计、生产、培训等各个…...

编程日记 2025/2/26 5:55:16

iOS手机App爬虫- (1) Mac安装Appium真机运行环境

iOS手机App爬虫 一、环境准备与工具安装1. 开发基础环境配置1.1 Node.js环境1.2 Xcode套件1.3 Java环境 2. 核心测试工具链2.1 Appium主程序2.2 辅助工具集 3. 可视化工具 二、设备与环境验证1. 设备信息获取2. 环境健康检查 三、WebDriverAgent编译部署1. 设备端准备2. 项目配…...

编程日记 2025/2/26 5:54:05

android s下make otapackage编译失败

[DESCRIPTION] android s上&#xff0c;我司推荐使用split build的方式进行编译&#xff0c;但是部分客户依旧会采用AOSP full build的方式进行编译。而我司在这块release的时候&#xff0c;并未进行验证。因此执行make otapackage的时候&#xff0c;会出现如下报错。 [0312/…...

编程日记 2025/2/26 5:50:56

《Elasticsearch实战：从零开始构建高效全文搜索引擎》

内容概览&#xff1a; Elasticsearch简介 Elasticsearch的定义与应用场景 Elasticsearch的核心特性 环境搭建与安装 安装Elasticsearch 启动与配置Elasticsearch 索引设计与映射 创建索引 定义映射&#xff08;Mapping&#xff09; 字段类型与分析器的选择 数据导入与管理…...

编程日记 2025/2/26 5:48:51

【Linux网络】认识协议（TCP/UDP）、Mac/IP地址和端口号、网络字节序、socket套接字

⭐️个人主页&#xff1a;小羊 ⭐️所属专栏&#xff1a;Linux 很荣幸您能阅读我的文章&#xff0c;诚请评论指点&#xff0c;欢迎欢迎 ~ 目录 1、初识协议2、UDP、TCP3、Mac、IP地址4、端口号5、网络字节序6、socket 1、初识协议 协议就是一种约定。如何让不同厂商生产的计…...

编程日记 2025/2/26 5:47:47

12、数据库、Sql单表多表

文章目录 一、数据库简介二、单表三、多表四、等值连接五、内联结六、inner join on、left join on、right join on区别七、模糊查找八、作业 一、数据库简介 数据在内存&#xff1a; 优点&#xff1a;读写速度快缺点&#xff1a;程序结束后数据丢失 保存到文件 优点&#…...

编程日记 2025/2/26 5:46:42

Spring Boot 实现图片上传并生成缩略图功能

在实际开发中&#xff0c;上传图片并生成缩略图是一项常见需求&#xff0c;例如在电商平台、社交应用等场景中&#xff0c;缩略图可以有效提高页面加载速度&#xff0c;优化用户体验。本文将介绍如何在 Spring Boot 项目中实现上传图片并生成缩略图的功能。 &#x1f4e6; 1. …...

编程日记 2025/2/26 5:45:39

洛谷B3664[语言月赛202209] 零食售卖点

B3664 [语言月赛202209] 零食售卖点 - 洛谷 代码区&#xff1a; #include<bits/stdc.h>using namespace std;int main(){int n;cin >> n;int arry[n],dp[n];for(int i0;i<n;i){cin >> arry[i];}dp[0]0;sort(arry,arryn);for(int i1;i<n;i){dp[i]arry…...

编程日记 2025/2/26 5:43:36

贪心算法：JAVA从理论到实践的探索

在计算机科学领域，贪心算法是一种简单而高效的算法设计策略，广泛应用于优化问题的求解。它通过在每一步选择中都采取当前状态下最优的选择，以期望最终得到全局最优解。本文将深入探讨贪心算法的原理、应用场景，并通过具体代码示例，帮助读者更好地理解和掌握这一算法。 一…...

编程日记 2025/2/26 5:41:33

线程池10种常见坑

1. 直接使用 Executors 创建线程池 直接使用 Executors 提供的快捷方法&#xff1a; ExecutorService executor Executors.newFixedThreadPool(10);问题 无界队列&#xff1a;newFixedThreadPool 使用的队列是 LinkedBlockingQueue&#xff0c;它是无界队列&#xff0c;任务…...

编程日记 2025/2/26 5:40:27

鸿蒙ArkTs如何实现pdf预览功能？

鸿蒙ArkTs如何实现pdf预览功能&#xff1f; 前言PDFKit运行示例代码报错真机运行先看效果一、预览本地pdf文件二、预览线上的pdf文件三、预览沙箱目录中pdf的文件(重点)效果中的整体代码总结 Harmony OS NEXT版本&#xff08;接口及解决方案兼容API12版本或以上版本) 前言 在开…...

编程日记 2025/2/26 5:39:23

java 实现excel文件转pdf | 无水印 | 无限制

文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具，自己手写的难度，恐怕高级程序员花费一年的事件，也…...

编程新知 2025/7/18 10:35:00

LLM基础1_语言模型如何处理文本

基于GitHub项目&#xff1a;https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken&#xff1a;OpenAI开发的专业"分词器" torch&#xff1a;Facebook开发的强力计算引擎&#xff0c;相当于超级计算器 理解词嵌入&#xff1a;给词语画"…...

编程新知 2025/9/1 17:51:59

学习STC51单片机32（芯片为STC89C52RCRC）OLED显示屏2

每日一言 今天的每一份坚持&#xff0c;都是在为未来积攒底气。 案例&#xff1a;OLED显示一个A 这边观察到一个点&#xff0c;怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 &#xff1a; 如果代码里信号切换太快&#xff08;比如 SDA 刚变&#xff0c;SCL 立刻变&#…...

编程新知 2025/9/7 8:51:23

GC1808高性能24位立体声音频ADC芯片解析

1. 芯片概述 GC1808是一款24位立体声音频模数转换器&#xff08;ADC&#xff09;&#xff0c;支持8kHz~96kHz采样率&#xff0c;集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器&#xff0c;适用于高保真音频采集场景。 2. 核心特性 高精度&#xff1a;24位分辨率&#xff0c…...

编程新知 2025/9/9 10:11:23

SQL慢可能是触发了ring buffer

简介 最近在进行 postgresql 性能排查的时候，发现 PG 在某一个时间并行执行的 SQL 变得特别慢。最后通过监控监观察到并行发起得时间 buffers_alloc 就急速上升，且低水位伴随在整个慢 SQL，一直是 buferIO 的等待事件，此时也没有其他会话的争抢。SQL 虽然不是高效 SQL ，但…...

编程新知 2025/7/27 0:38:54

Python训练营-Day26-函数专题1：函数定义与参数

题目1&#xff1a;计算圆的面积 任务&#xff1a; 编写一个名为 calculate_circle_area 的函数&#xff0c;该函数接收圆的半径 radius 作为参数&#xff0c;并返回圆的面积。圆的面积 π * radius (可以使用 math.pi 作为 π 的值)要求&#xff1a;函数接收一个位置参数 radi…...

编程新知 2025/9/9 10:05:55

【若依】框架项目部署笔记

参考【SpringBoot】【Vue】项目部署_no main manifest attribute, in springboot-0.0.1-sn-CSDN博客 多一个redis安装 准备工作&#xff1a; 压缩包下载&#xff1a;http://download.redis.io/releases 1. 上传压缩包&#xff0c;并进入压缩包所在目录&#xff0c;解压到目标…...

编程新知 2025/9/2 18:36:38

StarRocks 全面向量化执行引擎深度解析

StarRocks 全面向量化执行引擎深度解析 StarRocks 的向量化执行引擎是其高性能的核心设计&#xff0c;相比传统行式处理引擎&#xff08;如MySQL&#xff09;&#xff0c;性能可提升 5-10倍。以下是分层拆解&#xff1a; 1. 向量化 vs 传统行式处理 维度行式处理向量化处理数…...

编程新知 2025/7/9 6:16:19

【多线程初阶】单例模式 指令重排序问题

文章目录 1.单例模式1)饿汉模式2)懒汉模式①.单线程版本②.多线程版本 2.分析单例模式里的线程安全问题1)饿汉模式2)懒汉模式懒汉模式是如何出现线程安全问题的 3.解决问题进一步优化加锁导致的执行效率优化预防内存可见性问题 4.解决指令重排序问题 1.单例模式 单例模式确保某…...

编程新知 2025/9/7 8:41:35

GC1808：高性能音频ADC的卓越之选

在音频处理领域&#xff0c;高质量的音频模数转换器&#xff08;ADC&#xff09;是实现精准音频数字化的关键。GC1808&#xff0c;一款96kHz、24bit立体声音频ADC&#xff0c;以其卓越的性能和高性价比脱颖而出&#xff0c;成为众多音频设备制造商的理想选择。 GC1808集成了64倍…...

编程新知 2025/9/5 12:58:54