用Claude 3.5 写了一个小游戏,编程小白狂感动
原创 Bob新视界 Bob的AI视界
大家好，我是Bob。
一个想和大家一起慢慢变富的AI程序员
热爱分享AI前瞻思考、项目经验、面试技巧。
欢迎关注我，一起探索，一起破圈！
激动人心的更新！ 我刚刚用Claude 3.5开发了一个超有趣的网页小游戏，快来一探究竟！ 🐶🦴
🚀 游戏特色：
-
一只会飞的狗，追逐空中飘过的骨头，越吃越快！
-
动态调整速度，分数越高，骨头飞得越快，挑战你的反应极限！
-
每得10分，队伍壮大，增加一只新狗，让你的团队更加强大！
-
优化后的流畅体验，解决了之前的卡顿问题，让游戏更加顺滑。
🔧 修复与增强：
-
修复了狗不跟随鼠标的bug，现在它将更加精准地捕捉到你的每一个指令。
-
新增自动模式，让游戏自己玩自己，看看AI能得多少分！
🌐 游戏代码已经发在下方了
👀 见证Claude 3.5的强大理解力和代码能力，即使是编程小白也能轻松上手。感动不已，快来体验吧！
提示词
query：
设计一个网页小游戏，一只飞着的狗，吃空中飞过的骨头
骨头飞的太快了，要根据我的得分动态调整速度。分数越多，速度越快。
我在玩的过程中有一些卡顿，请检查一下原因
增加道具，每得10分，就增加一只狗
这个版本有bug，狗不跟鼠标
增加自动模式，让狗自己移动吃骨头
代码展示
<!DOCTYPE html>
<html>
<head>
<title>飞狗吃骨头</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="800" height="600"></canvas>
<button id="autoModeButton">启用自动模式</button>
<script>
const canvas =document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const buffer =document.createElement('canvas').getContext('2d');
buffer.canvas.width= canvas.width;
buffer.canvas.height= canvas.height;
// 游戏对象
const dogs =[];
const bones =[];
const bonePool =[];
// 游戏状态
let score =0;
let boneSpeed =3;
let autoMode =false;
let dogSpacing =30;// 狗之间的间距
// 鼠标位置
let mouseY =0;
// 初始化狗
functioninitDogs(){
const dog ={
x:50,
y: canvas.height/2,
width:40,
height:20,
speed:5,
sections:1
};
dogs.push(dog);
}
// 生成骨头
functionspawnBone(){
let bone;
if(bonePool.length>0){
bone = bonePool.pop();
}else{
bone ={
width:20,
height:20
};
}
bone.x= canvas.width;
bone.y=Math.random()*(canvas.height- bone.height);
bone.speed= boneSpeed;
bones.push(bone);
}
// 寻找最近的骨头
functionfindNearestBone(dog){
let nearestBone =null;
let minDistance =Infinity;
for(const bone of bones){
const distance =Math.sqrt((dog.x- bone.x)**2+(dog.y-(dog.y+ dog.height/2))**2);
if(distance < minDistance){
minDistance = distance;
nearestBone = bone;
}
}
return nearestBone;
}
// 游戏循环
functiongameLoop(){
// 清空缓冲区
buffer.clearRect(0,0, canvas.width, canvas.height);
// 设置背景颜色
buffer.fillStyle='lightblue';
buffer.fillRect(0,0, canvas.width, canvas.height);
// 移动狗
if(autoMode){
for(const dog of dogs){
const nearestBone =findNearestBone(dog);
if(nearestBone){
if(nearestBone.y> dog.y+ dog.height/2){
dog.y+= dog.speed;
}else{
dog.y-= dog.speed;
}
}
}
}else{
const totalHeight = dogs.length*(20+ dogSpacing);
const startY =Math.max(0,Math.min(mouseY - totalHeight /2, canvas.height- totalHeight));
for(let i =0; i < dogs.length; i++){
dogs[i].y= startY + i *(20+ dogSpacing);
}
}
// 绘制狗
buffer.fillStyle='brown';
for(let i =0; i < dogs.length; i++){
const dog = dogs[i];
const sectionHeight = dog.height/ dog.sections;
for(let j =0; j < dog.sections; j++){
buffer.fillRect(dog.x, dog.y+ j * sectionHeight, dog.width, sectionHeight);
}
}
// 生成和移动骨头
if(Math.random()<0.01){
spawnBone();
}
for(let i =0; i < bones.length; i++){
const bone = bones[i];
bone.x-= bone.speed;
buffer.fillStyle='white';
buffer.fillRect(bone.x, bone.y, bone.width, bone.height);
// 检测碰撞
for(const dog of dogs){
for(let j =0; j < dog.sections; j++){
const dogSection ={
x: dog.x,
y: dog.y+ j *(dog.height/ dog.sections),
width: dog.width,
height: dog.height/ dog.sections
};
if(
bone.x< dogSection.x+ dogSection.width&&
bone.x+ bone.width> dogSection.x&&
bone.y< dogSection.y+ dogSection.height&&
bone.y+ bone.height> dogSection.y
){
// 增加分数
score +=10;
// 调整骨头速度
boneSpeed =3+Math.floor(score /100);
// 增加狗的长度和数量
if(score %200===0){
dog.sections++;
addNewDog();
}
// 归还骨头对象到对象池
bonePool.push(bones.splice(i,1)[0]);
i--;
break;
}
}
}
}
// 绘制分数
buffer.fillStyle='black';
buffer.font='24px Arial';
buffer.fillText(`Score: ${score}`,10,30);
// 将缓冲区绘制到画布上
ctx.drawImage(buffer.canvas,0,0);
// 请求下一帧动画
requestAnimationFrame(gameLoop);
}
// 添加新狗
functionaddNewDog(){
const newDog ={
x:50,
y:0,// 初始Y位置将在游戏循环中设置
width:40,
height:20,
speed:5,
sections:1
};
dogs.push(newDog);
}
// 切换自动模式
functiontoggleAutoMode(){
autoMode =!autoMode;
autoModeButton.textContent= autoMode ?'禁用自动模式':'启用自动模式';
}
// 初始化
initDogs();
// 获取自动模式按钮
const autoModeButton =document.getElementById('autoModeButton');
// 添加按钮事件监听
autoModeButton.addEventListener('click', toggleAutoMode);
// 添加鼠标事件监听
canvas.addEventListener('mousemove',(e) =>{
mouseY = e.clientY- canvas.offsetTop;
});
// 开始游戏循环
gameLoop();
</script>
</body>
</html>
