使用konvajs三步实现一个小球游戏

记得以前玩过一个很简单的游戏，一个球在移动，然后底板就是接住它，如果没接住撞到底部，游戏结束了，虽然我忘记了它叫什么名字，但我一直在想它，一直在做梦。刚好是过年前需求还没有饱和。我只是想做，但我没有做。这两天刚学konvajs。我刚刚看到这篇小文章。非常简单，只需三步，三分钟让你学会。konvajs简介konvajs就像jquery之于DOM，Snap.svg之于canvas，还有Snap。各种事件、动画效果等等，妈妈再也不用担心我自己检测鼠标位置了。文档：https://konvajs.org/。使用konvajs基本上分为三步。第一步是创建一个“舞台”：import{Stage}from'konva'conststage=newStage({container:'container',//containerelementidwidth:500,height:500})第二步是创建一个“图层”并将其添加到“舞台”：import{Layer}from'konva'constlayer=newLayer()stage.add(layer)图层对应于画布元素。第三步，制作各种图形，添加到“图层”中。第一步是一个小球和一个挡板。直接从官方文档中复制圆形和矩形的示例代码，小球：import{Circle}from'konva'createCircle(){//小球的中心坐标this.centerX=this.stage.width()/2这个。centerY=100this.circle=newCircle({x:this.centerX,y:this.centerY,radius:this.radius,fill:'red',stroke:'black',strokeWidth:4})this.layer.add(this.circle)this.layer.draw()//重绘，每次修改后需要调用此方法}Baffle:import{Rect}from'konva'createRect(){this.rect=newRect({x:(this.stage.width()-100)/2,y:this.height-50,width:100,height:10,fill:'green',stroke:'black',strokeWidth:4,可拖动：true,//允许拖动dragBoundFunc:function(pos){//控件只能水平拖动return{x:pos.x,y:this.absolutePosition().y//获取y的绝对位置}}})this.layer.add(this.rect)this.layer.draw()}第二步让小球动起来，给小球一个初速度和一个加速度，撞墙后速度反转，速度逐渐增加，用于增加游戏难度：这个.speedX=Math.random()*3this.speedY=Math.random()*3this.speedStep=0.01runCircle(){//修改球的位置this.centerX+=this.speedXthis.centerY+=this.speedYthis.circle.x(this.centerX)this.circle.y(this.centerY)//墙壁碰撞检测if(this.centerX-this.radius<=0||this.centerX+this.radius>=this.width){//左右墙this.speedX=-this.speedX//水平速度反转}if(this.centerY-this.radius<=0){//只判断上墙，下墙wall用于结束游戏this.speedY=-this.speedY}//碰撞板检测，说第三步this.collisionCheck()//游戏结束检测if(this.centerY+this.radius>=this...)0?this.speedX+=this.speedStep:this.speedX-=this.speedStep}if(Math.abs(this.speedY)0?这个.speedY+=这个。速度步骤：this.speedY-=this.speedStep}}然后使用requestAnimationFrame不断刷新：update(){window.requestAnimationFrame(()=>{this.runCircle()this.update()this.layer.draw()})}第三步是检测小球是否与挡板碰撞，碰撞时速度反转。原理是在矩形周围找到离球心最近的点，然后判断这个点到球心的距离是否小于球的半径。如何确定这一点？很简单，如果圆心在矩形的左边，那么这个点一定在矩形的左边，点x的值就是rect.x，如果在矩形的右边矩形，x点的值必须在矩形的右侧，即rect.x+rect.width，如果在矩形之间，因为最近点和中心的连线圆必须重新设置到矩形的边上，所以x点的值就是圆心的x，y点的计算同xcollisionCheck(){让minx=0让miny=0让rectX=this.rect.x()让rectY=this.rect.y()让rectWidth=this.rect.width()letrectHeight=this.rect.height()//确定矩形上离球最近的点的x坐标if(this.centerXrectX+rectWidth){//在矩形的右侧minx=rectX+rectWidth}else{//在矩形的左右两侧之间minx=this.centerX}//确定矩形上最靠近球的点的y坐标if(this.centerYrectY+rectHeight){//矩形下方miny=rectY+rectHeight}else{//矩形顶部和底部之间miny=this.centerY}//如果距离小于半径，则表示发生了碰撞if(this.getTwoPointDistance(minx,miny,this.centerX,this.centerY)<=this.radius){//如果它击中左侧或右侧，则水平速度x反转if(minx===rectX||minx===rectX+rectWidth){this.speedX=-this.speedX}//如果它碰到矩形，垂直速度y反转if(miny===rectY){this.speedY=-this.speedY}}}就到这里了，可以尽情的玩了：示例代码：https://github.com/wanglin2/BallGame