这些小活动你都参加了吗?快来围观一下吧!>>
电子产品世界 » 论坛首页 » 综合技术 » 基础知识 » HTML5培训简述怎么用Canvas写一个桌球游戏

共3条 1/1 1 跳转至

HTML5培训简述怎么用Canvas写一个桌球游戏

助工
2020-11-25 10:52:57     打赏

这只是一个简单的DEMO。游戏性、游戏规则没怎么考虑,如果有兴趣细化的朋友可以细化一下,比如细化一下规则,游戏开关,加个声音,细化一下进球检测,更严谨甚至可以去查下击球力度、桌面真实摩擦力等来把游戏弄的更像游戏。我只是给个编程思路,做一个DEMO而已,玩起来估计还是会很爽快的~~



整个桌球游戏就两个类,一个是球,一个是辅助瞄准线。如果想把改游戏弄的更复杂,还可以再抽象一个形状类,用于检测球与边角的碰撞以及进球。我做的这个游戏采取了最简单的墙壁碰撞检测,所以没有进行球与不规则形状的碰撞检测,接下来就一步一步来:

【球】

varBall=function(x,y,ismine){

this.x=x;

this.y=y;

this.ismine=ismine;

this.oldx=x;

this.oldy=y;

this.vx=0;

this.vy=0;

this.radius=ballRadius;

this.inhole=false;this.moving=true;

}

Ball.prototype={

constructor:Ball,

_paint:function(){

varb=this.ismine?document.getElementById("wb"):document.getElementById("yb")

if(b.complete){

ctx.drawImage(b,this.x-this.radius,this.y-this.radius,2*this.radius,2*this.radius);

}

else{

b.onload=function(){

ctx.drawImage(b,this.x-this.radius,this.y-this.radius,2*this.radius,2*this.radius);

}

}

},

_run:function(t){

this.oldx=this.x;

this.oldy=this.y;

this.vx=Math.abs(this.vx)<0.1?0:(this.vx>0?this.vx-mcl*t:this.vx+mcl*t);

this.vy=Math.abs(this.vy)<0.1?0:(this.vy>0?this.vy-mcl*t:this.vy+mcl*t);

//this.vx+=this.vx>0?-mcl*t:mcl*t;

//this.vy+=this.vy>0?-mcl*t:mcl*t;

this.x+=t*this.vx*pxpm;

this.y+=t*this.vy*pxpm;

if((this.x<50&&this.y<50)||(this.x>370&&this.x<430&&this.y<50)||(this.x>758&&this.y<50)||(this.x<46&&this.y>490)||(this.x>377&&this.x<420&&this.y>490)||(this.x>758&&this.y>490)){

this.inhole=true;

if(this.ismine){

varthat=this;

setTimeout(function(){

that.x=202;

that.y=canvas.height/2;

that.vx=0;

that.vy=0;

that.inhole=false;

},500)

}

else{

document.getElementById("shotNum").innerHTML=parseInt(document.getElementById("shotNum").innerHTML)+1

}

}

else{

if(this.y>canvas.height-(ballRadius+tbw)||this.y<(ballRadius+tbw)){

this.y=this.y<(ballRadius+tbw)?(ballRadius+tbw):(canvas.height-(ballRadius+tbw));

this.derectionY=!this.derectionY;

this.vy=-this.vy*0.6;

}

if(this.x>canvas.width-(ballRadius+tbw)||this.x<(ballRadius+tbw)){

this.x=this.x<(ballRadius+tbw)?(ballRadius+tbw):(canvas.width-(ballRadius+tbw));

this.derectionX=!this.derectionX;

this.vx=-this.vx*0.6;

}

}

this._paint();

if(Math.abs(this.vx)<0.1&&Math.abs(this.vy)<0.1){

this.moving=false;

}

else{

this.moving=true;

}

}

}

球类的属性:x,y球的位置,vx,vy球的水平速度以及求得垂直速度,ismine代表是白球还是其他球(不同球在_paint方法中绘制的图片不一样),oldx,oldy用于保存球的上一帧位置,不过暂时还没用上,应该有用吧。_paint方法没什么好说的,_run方法就是跟踪小球位置,根据小球每一帧的时间来算出小球的位移增量以及速度增量,mcl和pxpm都是常量,mcl是摩擦力,pxpm是大概算个像素和现实转换比例。。。。然后就是碰撞检测,这个很容易理解了,就计算小球的位置有没有超过边界,超过了就反弹。不过这种碰撞检测很不严谨,如果真要做游戏建议用更复杂一些的。还有就是根据小球的速度来让小球静止。

【辅助线】

vardotLine=function(x0,y0,x1,y1){

this.x0=this.x0;

this.y0=this.y0;

this.x1=this.x1;

this.y1=this.y1;

this.dotlength=3;

this.display=false;

}

dotLine.prototype={

constructor:dotLine,

_ready:function(){

this.length=Math.sqrt(Math.pow(this.y1-this.y0,2)+Math.pow(this.x1-this.x0,2));

this.dotNum=Math.ceil(this.length/this.dotlength);

},

_paint:function(){

this._ready();

xadd=this.dotlength*(this.x1-this.x0)/this.length;

yadd=this.dotlength*(this.y1-this.y0)/this.length;

ctx.save();

ctx.beginPath();

for(vari=1;i<=this.dotNum;i++){

if(i%2!==0){

ctx.moveTo(this.x0+(i-1)*xadd,this.y0+(i-1)*yadd);

ctx.lineTo(this.x0+i*xadd,this.y0+i*yadd);

}

}

ctx.strokeStyle="#FFF";

ctx.stroke();

ctx.beginPath();

ctx.arc(this.x1,this.y1,ballRadius-2,0,2*Math.PI);

ctx.stroke();

ctx.restore();

}

}

就是画虚线,这个比较简单了,获取鼠标的位置和白球位置,然后在两者之间隔一段距离画条线,然后就成虚线了。

【多球碰撞检测】

functioncollision(){

for(vari=0;i<balls.length;i++){

for(varj=0;j<balls.length;j++){

varb1=balls,b2=balls[j];

if(b1!==b2&&!b1.inhole&&!b2.inhole){

varrc=Math.sqrt(Math.pow(b1.x-b2.x,2)+Math.pow(b1.y-b2.y,2));

if(Math.ceil(rc)<(b1.radius+b2.radius)){

if(!b1.moving&&!b2.moving)return;

//获取碰撞后的速度增量

varax=((b1.vx-b2.vx)*Math.pow((b1.x-b2.x),2)+(b1.vy-b2.vy)*(b1.x-b2.x)*(b1.y-b2.y))/Math.pow(rc,2)

varay=((b1.vy-b2.vy)*Math.pow((b1.y-b2.y),2)+(b1.vx-b2.vx)*(b1.x-b2.x)*(b1.y-b2.y))/Math.pow(rc,2)

//将速度增量赋给碰撞小球

b1.vx=b1.vx-ax;

b1.vy=b1.vy-ay;

b2.vx=b2.vx+ax;

b2.vy=b2.vy+ay;

//修正小球碰撞距离

varclength=((b1.radius+b2.radius)-rc)/2;

varcx=clength*(b1.x-b2.x)/rc;

varcy=clength*(b1.y-b2.y)/rc;

b1.x=b1.x+cx;

b1.y=b1.y+cy;

b2.x=b2.x-cx;

b2.y=b2.y-cy;

}

}

}

}

}

对所有小球进行遍历,计算两个小球的球心距离,如果小于两小球的半径和,则说明发生了碰撞。如果两个小球都是静止的,就不进行碰撞检测,否则进行计算碰撞后的速度增量,碰撞速度增量的求法可以直接看小球碰撞的算法设计,里面讲的挺详细的,综合起来就得出了上面那一串式子了。

将速度增量赋给碰撞小球。因为两个球碰撞那一帧,两个球是有部分重叠的,所以得进行位置修正,不然小球会一直处于碰撞然后就黏在一起了,位置修正的原理也简单,算出两球的球心距离,通过勾股定理计算出两球的重叠区域的宽度,然后把宽度除于2后赋给小球新的位置,新的位置就是两个球的半径刚好等于球心距。

【鼠标动作】

canvas.addEventListener("mousedown",function(){

if(balls[0].moving)return;

document.querySelector(".shotPower").style.display="block";

document.querySelector(".shotPower").style.top=balls[0].y-60+"px";

document.querySelector(".shotPower").style.left=balls[0].x-40+"px";

document.getElementById("pow").className="animate";

varx=event.clientX+document.body.scrollLeft+document.documentElement.scrollLeft-document.querySelector(".view").offsetLeft;

vary=event.clientY+document.body.scrollTop+document.documentElement.scrollTop-document.querySelector(".view").offsetTop;

dotline.display=true;

dotline.x0=balls[0].x;

dotline.y0=balls[0].y;

dotline.x1=x;

dotline.y1=y;

window.addEventListener("mouseup",muHandle,false);

window.addEventListener("mousemove",mmHandle,false);

functionmmHandle(){

varx=event.clientX+document.body.scrollLeft+document.documentElement.scrollLeft-document.querySelector(".view").offsetLeft;

vary=event.clientY+document.body.scrollTop+document.documentElement.scrollTop-document.querySelector(".view").offsetTop;

dotline.x1=x;

dotline.y1=y;

}

functionmuHandle(){

varx=event.clientX+document.body.scrollLeft+document.documentElement.scrollLeft-document.querySelector(".view").offsetLeft;

vary=event.clientY+document.body.scrollTop+document.documentElement.scrollTop-document.querySelector(".view").offsetTop;

varangle=Math.atan((y-balls[0].y)/(x-balls[0].x));

varh=document.getElementById("pow").offsetHeight/document.getElementById("powbar").offsetHeight;

varv=60*h;

document.getElementById("pow").style.height=h*100+"%"

balls[0].vx=x-balls[0].x>0?v*Math.abs(Math.cos(angle)):-v*Math.abs(Math.cos(angle));

balls[0].vy=y-balls[0].y>0?v*Math.abs(Math.sin(angle)):-v*Math.abs(Math.sin(angle));

document.getElementById("pow").className="";

window.removeEventListener("mouseup",muHandle,false);

window.removeEventListener("mousemove",muHandle,false);

dotline.display=false;

document.querySelector(".shotPower").style.display="none";

}

},false);

鼠标动作也比较简单,有js基础的基本上都没问题,就是鼠标按下后计算鼠标位置,然后产生辅助虚线,鼠标移动后修改辅助虚线的终点位置。鼠标按下的时候旁边产生一个力量计,我就只用用animation做动画了,然后鼠标按键抬起时通过计算力量计的大小来确定白球的速度,然后再分解成水平速度以及垂直速度赋给白球。同时取消鼠标移动以及鼠标抬起的事件绑定,把辅助虚线以及力量计隐藏。

【动画舞台】

functionanimate(){

ctx.clearRect(0,0,canvas.width,canvas.height)

vart1=newDate();

vart=(t1-t0)/1000;

collision();

balls.foreach(function(){

if(!this.inhole)this._run(t);

});

if(dotline.display){

dotline.x0=balls[0].x;

dotline.y0=balls[0].y;

dotline._paint();

}

t0=t1;

if(!animateStop){

if("requestAnimationFrame"inwindow){

requestAnimationFrame(animate);

}

elseif("webkitRequestAnimationFrame"inwindow){

webkitRequestAnimationFrame(animate);

}

elseif("msRequestAnimationFrame"inwindow){

msRequestAnimationFrame(animate);

}

elseif("mozRequestAnimationFrame"inwindow){

mozRequestAnimationFrame(animate);

}

else{

setTimeout(animate,16);

}

}

}

这个就是游戏每一帧的逻辑处理现场,如果小球进洞了,就不再进行绘制,如果辅助虚线的display属性设成false,就不进行辅助虚线的绘制,还有就是计算每一帧的时间。

【常量与初始化】

varcanvas=document.getElementById("cas");

varctx=canvas.getContext('2d');

varmcl=1,collarg=0.8,ballRadius=15,t0=0,balls=[],tbw=32,animateStop=true,powAnimation=false;

vardotline;

pxpm=canvas.width/20;

window.onload=function(){

varmyball=newBall(202,canvas.height/2,true);

balls.push(myball);

for(vari=0;i<6;i++){

for(varj=0;j<i;j++){

varother=newBall(520+i*(ballRadius-2)*2,(canvas.height-i*2*ballRadius)/2+ballRadius+2*ballRadius*j,false);

balls.push(other);

}

}

t0=newDate();

dotline=newdotLine(0,0,0,0);

animateStop=false;

animate();

}

底部的那两个方法是写两条线相交的判定和交点的获取,实例化所有小球,把小球全部按照规律摆好,然后获取当前时间,实例化辅助虚线,动画开始。

以上就是关于扣丁学堂HTML5培训之用Canvas写一个桌球游戏的详细介绍,最后想要工作不累就要不断的提升自己的技能,请关注扣丁学堂HTML5培训官网、微信等平台,扣丁学堂IT职业在线学习教育平台为您提供权威的HTML5视频教程系统,通过千锋扣丁学堂金牌讲师在线录制的第一套自适应HTML5在线视频课程系统,让你快速掌握HTML5从入门到精通开发实战技能。扣丁学堂H5技术交流群:751662650。



工程师
2020-11-26 21:29:24     打赏
2楼

十分感谢你的分享


工程师
2020-11-27 22:24:50     打赏
3楼

代码写的非常不错


共3条 1/1 1 跳转至

回复

匿名不能发帖!请先 [ 登陆 注册 ]