html5 canvas模拟的小球躲避小游戏

最新推荐文章于 2022-06-26 20:34:13 发布

weixin_33862993

最新推荐文章于 2022-06-26 20:34:13 发布

阅读量559

点赞数

CC 4.0 BY-SA版权

文章标签：游戏前端 python ViewUI

原文链接：https://my.oschina.net/wizardpisces/blog/104956

本文探讨了游戏开发过程中的核心技巧与优化方法，包括如何使用Unity3D进行高效编程，实现流畅的用户交互体验，以及通过AI技术提升游戏的智能性和趣味性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html> 
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<meta charset="utf-8"> 
<title>刘泽的canvas游戏咯</title> 
</head> 
<body> 


<canvas id="canvas" style="position: absolute; left: 0px; top: 0px; background:black" width="1000" height="500"></canvas> 


<script> 
var player={ 


}; 
var vs={ 


}; 
var ball;//只是为了缩短变量访问时间 
var H=500; 
var W=1000; 
var L=0; 
var T=0; 
var mycanvas=$("canvas"); 
var ctx=mycanvas.getContext('2d'); 
function $(a){ 
return document.getElementById(a); 
} 
function init(){ 
var l=W/2-60,t=H/2-30,w=120,h=60;//按钮的左上角，以及宽度和高度 
vs={ 
id : 0 ,//球的号码 
ball : [],//保存所有的球对象 
num :0 
}; 
player={ 
x:0, 
y:0, 
r:30, 
score:0 
}; 
ball=vs.ball; 
ctx.fillStyle="#fff"; 
ctx.beginPath();//画开始按钮 
ctx.fillRect(l,t,w,h); 
ctx.closePath(); 
//ctx.fillStyle='cyan'; 
//ctx.fill(); 
ctx.font="40px Verdana";//写信息 
ctx.fillStyle="magenta"; 
var txt="开始"; 
ctx.fillText(txt,W/2-ctx.measureText(txt).width/2,H/2+15); 
canvas.onmousemove = function (e) {//绑定鼠标事件 
player.x = e.pageX; // grab mouse pixel coords 
player.y = e.pageY; 
player.r = 30; 
} 
canvas.onclick= function (e){ 
var x=e.pageX,y=e.pageY; 
if(x<=l+w && x>=l && y<=t+h && y>=t) run(); 
} 
} 
function createBall(id){ 
var ball={ 
id:id, 
x:500,//开始坐标 
y:40, 
r:30,//半径 
vx:20,//初始速度 
vy:20, 
ax:0,//默认加速度 
ay:0 
// g:10,//重力加速度 
// R:1,//阻力 
// d:1//1代表下落  ax=g-r，-1代表上升 ax=g+r(因为速度方向变反了，加速即是减速)    现假设x正方向是下落方向,这里假设的是弹性碰撞，而r是空气的阻力 


}; 
var d=Math.random()>0.5 ? -1 : 1;//随即产生球的方向 
ball.vx*=(Math.random(3-1)+1)*d; 
ball.vy*=(Math.random(3-1)+1)*d; 
return ball; 


} 
function check(){//检测 碰撞 
var x=player.x,y=player.y,r=player.r; 
var ball=vs.ball,length=ball.length,b; 
for(var i=0;i<length;i++){ 
b=ball[i]; 
if((b.r+r)*(b.r+r)>=(b.y-y)*(b.y-y)+(b.x-x)*(b.x-x)) {init();return false}//表示输了 

} 
return true; 
} 
function drawPlayer(){ 
var p=player, 
txt=p.score, 
x=p.x-ctx.measureText(txt).width/2, 
y=p.y+p.r/2; 
ctx.beginPath();//画玩家的圆 
ctx.arc(p.x,p.y,p.r,0,Math.PI*2); 
ctx.closePath(); 
ctx.fillStyle='cyan'; 
ctx.fill(); 
ctx.font="40px Verdana";//写信息 
ctx.fillStyle="#000"; 
ctx.fillText(txt,x,y); 
} 


function drawBall(b){ 



ctx.beginPath();//画圆 
ctx.arc(b.x,b.y,b.r,0,Math.PI*2); 
ctx.closePath(); 
ctx.fillStyle='#fff'; 
ctx.fill(); 


ctx.font="40px Verdana"; 
// 创建渐变 
var gradient=ctx.createLinearGradient(0,0,mycanvas.width,0);//在圆上写字 
gradient.addColorStop("0","magenta"); 
gradient.addColorStop("0.5","green"); 
gradient.addColorStop("1.0","red"); 
// 用渐变填色 
ctx.fillStyle=gradient; 
var txt=b.id; 
var x=b.x-ctx.measureText(txt).width/2; 
var y=b.y+b.r/2; 


ctx.fillText(txt,x,y); 


} 
function run(){ 

if(vs.num%10==0){ ball.push(createBall(vs.id++)); player.score++;}//每2秒增加一个球,同时加分 


vs.num++; 
// ctx.fillStyle='rgba(0,0,0,0.2)';//实现轨迹，更新画布 
ctx.fillStyle='rgba(0,0,0,1)'; 
ctx.fillRect(L,T,W,H); 
ctx.fill(); 


// vs.id= vs.id>12 ? 12 : vs.id;//限制动态产生的球个数 
drawPlayer();//画玩家的球 


for(var i=0;i<vs.id;i++){ 


// if(ball[i].d==-1 && ball[i].vx>=0) ball[i].d=1;//弹回来后开始下落 
// ball[i].ax= ball[i].d==1 ? ball[i].g-ball[i].R : ball[i].g+ball[i].R; 
// if(Math.abs(ball[i].vx)<0.5){ball[i].vx=0;return false;} 
ball[i].vx+=ball[i].ax; 
ball[i].vy+=ball[i].ay; 
ball[i].x+=ball[i].vx; 
ball[i].y+=ball[i].vy; 


if(ball[i].y<=T+ball[i].r){//检测球的碰撞 
ball[i].vy*=-1; 
// ball[i].vy*=-1*(Math.random()*4-2); //随即改变y速度 
// ball[i].y=2*(T+ball[i].r)-ball[i].y; 
ball[i].y=ball[i].r; 
}else if(ball[i].y>=H-ball[i].r){ 
ball[i].vy*=-1; 
// ball[i].y=2*(H-ball[i].r)-ball[i].y; 
ball[i].y=H-ball[i].r; 
}else if(ball[i].x<=L+ball[i].r){ 
// ball[i].vx*=-1*(Math.random()*4-2); 
ball[i].vx*=-1; 
// ball[i].x=2*(L+ball[i].r)-ball[i].x; 
ball[i].x=L+ball[i].r; 


}else if(ball[i].x>=W-ball[i].r){ 
ball[i].vx*=-1; 
// ball[i].x=2*(W-ball[i].r)-ball[i].x; 
ball[i].x=W-ball[i].r; 
ball[i].d=-ball[i].d;//弹回 
}else{} 
drawBall(ball[i]); 
} 
if(check()==false) return false;//判断球是否碰到了 
requestAnimFrame(run); 
} 
window.requestAnimFrame = (function(callback){ 
return function(callback){ 
window.setTimeout(callback, 100); 
}; 
})(); 


init(); 
//run(); 
//var o={author:"liuze"}; 
//alert(o.name); 
//var k=clone(o); 
//k.name="lz"; 
//alert(o.name); 
//添加声音 
//球的碰撞效果 
//开始结束 
// 
</script> 
</body></html> 



//那个球之间的碰撞效果还没有完善，希望各位高手给点建议（模拟球之间碰撞后的轨迹）

转载于:https://my.oschina.net/wizardpisces/blog/104956