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

app手机网站制作创建网站要钱吗

news 2025/7/5 5:54:35

app手机网站制作,创建网站要钱吗,如何用网站做苹果app,网站开发和app开发哪个难文章目录前言介绍“市面上唯一的混合模型”卓越的编程能力、精准控制思考时间Cursor已接入Cursor结合Claude 3.7快速编写游戏完整html代码 🍃作者介绍：双非本科大四网络工程专业在读，阿里云专家博主，前三年专注于Java领域学习&am…

文章目录

前言
介绍
“市面上唯一的混合模型”
卓越的编程能力、精准控制思考时间
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>