H5 游戏开发_ 决胜三分球_前端开发者

前端开发者丨HTML5   H5游戏

H5 游戏开发： 决胜三分球前言本次是与腾讯手机充值合作推出的活动， 用户通过氪金充值话费或者分享来获得更多的投篮机会， 根据最终的进球数排名来发放奖品。

用户可以通过滑动拉出一条辅助线， 根据辅助线长度和角度的不同将球投出， 由于本次活动的开发周期短， 在物理特性实现方面使用了物理引擎， 所有本文的分享内容是如何结合物理引擎去实现一款投篮小游戏， 如下图所示。

准备此次我使用的游戏引擎是 LayaAir， 你也可以根据你的爱好和实际需求选择合适的游戏引擎进行开发， 为什么选择该引擎进行开发， 总的来说有以下几个原因： LayaAir 官方文档、 API、 示例学习详细、 友好， 可快速上手除了支持 2 D 开发， 同时还支持 3 D 和 VR 开发， 支持 AS、 TS、 js 三种语言开发在开发者社区中提出的问题， 官方能及时有效的回复提供 IDE 工具， 内置功能有打包 APP、 骨骼动画转换、 图集打包、 SWF转换、 3 D 转换等等物理引擎方面采用了 Matter.js， 篮球、 篮网的碰撞弹跳都使用它来实现， 当然， 还有其他的物理引擎如 planck.js、 p2.js 等等， 具体没有太深入的了解， Matter.js 相比其他引擎的优势在于： 轻量级， 性能不逊色于其他物理引擎官方文档、 Demo 例子非常丰富， 配色有爱API 简单易用， 轻松实现弹跳、 碰撞、 重力、 滚动等物理效果Github Star 数处于其他物理引擎之上， 更新频率更高开始一、 初始化游戏引擎首先对 LayaAir 游戏引擎进行初始化设置， Laya.init 创建一个 1334× 750 的画布以 WebGL 模式去渲染， 渲染模式下有 WebGL 和 Canvas， 使用 WebGL 模式下会出现锯齿的问题， 使用 Config.isAntialias 抗锯齿可以解决此问题， 并且使用引擎中自带的多种屏幕适配 screenMode。

如果你使用的游戏引擎没有提供屏幕适配， 欢迎阅读另一位同事所写的文章【 H5游戏开发： 横屏适配】。

…Config.isAntialias=true;

抗锯齿 Laya.init(1334, 750, Laya.WebGL);

初始化一个画布， 使用 WebGL 渲染， 不支持时会自动切换为 Canvas Laya.stage.alignV = ‘top’;

适配垂直对齐方式 Laya.stage.alignH = ‘middle’;

适配水平对齐方式 Laya.stage.screenMode = this.Stage.SCREEN_HORIZONTAL;

始终以横屏展示 Laya.stage.scaleMode = \”fixedwidth\”; 宽度不变，高度根据屏幕比例缩放，还有 noscale、exactfit、showall、noborder、full、fixedheight 等适配模式 … 1 2 3 4 5 6 7 8 . . . Config . isAntialias = true ; 抗锯齿 Laya . init ( 1334 , 750 , Laya . WebGL ) ; 初始化一个画布，使用 WebGL 渲染，不支持时会自动切换为 Canvas Laya . stage . alignV = ‘top’ ; 适配垂直对齐方式 Laya . stage . alignH = ‘middle’ ; 适配水平对齐方式 Laya . stage . screenMode = this . Stage . SCREEN_HORIZONTAL ; 始终以横屏展示 Laya . stage . scaleMode = \”fixedwidth\” ; 宽度不变，高度根据屏幕比例缩放，还有 noscale、exactfit、showall、noborder、full、fixedheight 等适配模式 . . .二、初始化物理引擎、加入场景然后对 Matter.js 物理引擎进行初始化， Matter.Engine 模块包含了创建和处理引擎的方法，由引擎运行这个世界， engine.world 则包含了用于创建和操作世界的方法，所有的物体都需要加入到这个世界中， Matter.Render 是将实例渲染到 Canvas 中的渲染器。

enableSleeping 是开启刚体处于静止状态时切换为睡眠状态， 减少物理运算提升性能， wireframes 关闭用于调试时的线框模式， 再使用 LayaAir 提供的 Laya.loading、 new Sprite 加载、 绘制已简化的场景元素。

…this.engine;

var world;

this.engine = Matter.Engine.create({

enableSleeping: true 开启睡眠

});

world = this.engine.world;

Matter.Engine.run(this.engine);

Engine 启动

var render = LayaRender.create({

engine: this.engine,

options: {

wireframes: false,

background: \ “#000\” } }); LayaRender.run(render); Render 启动 … 1 2 3 4 5 6 7 8 9 10 11 12 13 14 . . . this . engine ; var world ; this . engine = Matter . Engine . create ( { enableSleeping : true 开启睡眠 } ) ; world = this . engine . world ; Matter . Engine . run ( this . engine ) ; Engine 启动 var render = LayaRender . create ( { engine : this . engine , options : { wireframes : false , background : \”#000\” } } ) ; LayaRender . run ( render ) ; Render 启动 . . …. 加入背景、篮架、篮框 var bg = new this.Sprite(); Laya.stage.addChild(bg); bg.pos(0, 0); bg.loadImage(‘images/bg.jpg’); … 1 2 3 4 5 6 7 . . . 加入背景、篮架、篮框 var bg = new this . Sprite ( ) ; Laya . stage . addChild ( bg ) ; bg . pos ( 0 , 0 ) ; bg . loadImage ( ‘images/bg.jpg’ ) ; . . .三、画出辅助线，计算长度、角度投球的力度和角度是根据这条辅助线的长短角度去决定的，现在我们加入手势事件 MOUSE_DOWN 、 MOUSE_MOVE 、 MOUSE_UP 画出辅助线，通过这条辅助线起点和终点的 X、Y 坐标点再结合两个公式： getRad 、 getDistance 计算出距离和角度。

…

varline=newthis.Sprite();Laya.stage.addChild(line);Laya.stage.on(this.Event.MOUSE_DOWN,this,function(e){…

});Laya.stage.on(this.Event.MOUSE_MOVE,this,function(e){…

});Laya.stage.on(this.Event.MOUSE_UP,this,function(e){…

});…1234567…varline=newthis.Sprite();Laya.stage.addChild(line);Laya.stage.on(this.Event.MOUSE_DOWN,this,function(e){…

});Laya.stage.on(this.Event.MOUSE_MOVE,this,function(e){…

});Laya.stage.on(this.Event.MOUSE_UP,this,function(e){…

});……getRad: function(x1,y1,x2,y2){

返回两点之间的角度

varx=x2-x1;

vary=y2-x2;

varHypotenuse=Math.sqrt(Math.pow(x,2) +Math.pow(y,2));

varangle=x/Hypotenuse;

varrad=Math.acos(angle);

if (y2<y1) {

rad=-rad;

}

returnrad;

},

getDistance:function(x1,y1,x2,y2){

计算两点间的距离

returnMath.sqrt(Math.pow(x1-x2,2) +Math.pow(y1-y2,2));

}…12345678910111213…getRad: function(x1,y1,x2,y2){

返回两点之间的角度

varx=x2-x1;

vary=y2-x2;

varHypotenuse=Math.sqrt(Math.pow(x,2) +Math.pow(y,2));

varangle=x/Hypotenuse;

varrad=Math.acos(angle);

if (y2<y1) {

rad=-rad;

}

returnrad;

},

getDistance:function(x1,y1,x2,y2){

计算两点间的距离

returnMath.sqrt(Math.pow(x1-x2,2) +Math.pow(y1-y2,2));

}…四、 生成篮球施加力度大致初始了一个简单的场景， 只有背景和篮框， 接下来是加入投篮。

每次在MOUSE_UP事件的时候我们就生成一个圆形的刚体， isStatic: false我们要移动所以不固定篮球， 并且设置density密度、 restitution弹性、 刚体的背景sprite等属性。

将获得的两个值： 距离和角度， 通过applyForce方法给生成的篮球施加一个力， 使之投出去。

…addBall: function(x,y){

varball=Matter.Bodies.circle(500,254,28,{

x,

y,

半径 isStatic: false,

不固定 density: 0.68,

密度 restitution: 0.8,

弹性 render: {

visible: true,

开启渲染 sprite: {

texture: ‘images/ball.png’,

设置为篮球图 xOffset: 28,

x 设置为中心点 yOffset: 28 y 设置为中心点

}

}

});

}

Matter.Body.applyForce(ball,ball.position,{

x: x,

y: y

});施加力Matter.World.add(this.engine.world, [ball]);添加到世界…12345678910111213141516171819…addBall: function(x,y){

varball=Matter.Bodies.circle(500,254,28,{

x,

y,

半径 isStatic: false,

不固定 density: 0.68,

密度 restitution: 0.8,

弹性 render: {

visible: true,

开启渲染 sprite: {

texture: ‘images/ball.png’,

设置为篮球图 xOffset: 28,

x 设置为中心点 yOffset: 28 y 设置为中心点

}

}

});

}

Matter.Body.applyForce(ball,ball.position,{

x: x,

y: y

});施加力Matter.World.add(this.engine.world, [ball]);添加到世界…五、 加入其他刚体、 软体现在， 已经能顺利的将篮球投出， 现在我们还需要加入一个篮球网、 篮框、 篮架。

通过Matter.js加入一些刚体和软体并且赋予物理特性firction摩擦力、 frictionAir空气摩擦力等， visible: false表示是否隐藏， collisionFilter是过滤碰撞让篮球网之间不产生碰撞。

…addBody: function(){

vargroup=Matter.Body.nextGroup(true);

varnetBody=Matter.Composites.softBody(1067,164,6,4,0,0,false,8.5,{

篮球网 firction: 1,

摩擦力 frictionAir: 0.08,

空气摩擦力 restitution: 0,

弹性 render: {

visible: false

},

collisionFilter: {

group: group

}

},{

render: {

lineWidth: 2,

strokeStyle: \ “#fff\” } }); netBody.bodies[0].isStatic = netBody.bodies[5].isStatic = true; 将篮球网固定起来 var backboard = Matter.Bodies.rectangle(1208, 120, 50, 136, { 篮板刚体 isStatic: true, render: { visible: true } }); var backboardBlock = Matter.Bodies.rectangle(1069, 173, 5, 5, { 篮框边缘块 isStatic: true, render: { visible: true } }); Matter.World.add(this.engine.world, [ 四周墙壁 … Matter.Bodies.rectangle(667, 5, 1334, 10, { x, y, w, h isStatic: true }), … ]); Matter.World.add(this.engine.world, [netBody, backboard, backboardBlock]); } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 . . . addBody : function ( ) { var group = Matter . Body . nextGroup ( true ) ; var netBody = Matter . Composites . softBody ( 1067 , 164 , 6 , 4 , 0 , 0 , false , 8.5 , { 篮球网 firction : 1 , 摩擦力 frictionAir : 0.08 , 空气摩擦力 restitution : 0 , 弹性 render : { visible : false } , collisionFilter : { group : group } } , { render : { lineWidth : 2 , strokeStyle : \”#fff\” } } ) ; netBody . bodies [ 0 ] . isStatic = netBody . bodies [ 5 ] . isStatic = true ; 将篮球网固定起来 var backboard = Matter . Bodies . rectangle ( 1208 , 120 , 50 , 136 , { 篮板刚体 isStatic : true , render : { visible : true } } ) ; var backboardBlock = Matter . Bodies . rectangle ( 1069 , 173 , 5 , 5 , { 篮框边缘块 isStatic : true , render : { visible : true } } ) ; Matter . World . add ( this . engine . world , [ 四周墙壁 . . . Matter . Bodies . rectangle ( 667 , 5 , 1334 , 10 , { x, y, w, h isStatic : true } ) , . . . ] ) ; Matter . World . add ( this . engine . world , [ netBody , backboard , backboardBlock ] ) ; }六、判断进球、监听睡眠状态通过开启一个 tick 事件不停的监听球在运行时的位置，当到达某个位置时判定为进球。

另外太多的篮球会影响性能， 所以我们使用sleepStart事件监听篮球一段时间不动后， 进入睡眠状态时删除。

…Matter.Events.on(this.engine,’tick’,function(){

countDown++;

if (ball.position.x >1054&&ball.position.x <1175&&ball.position.y >170&&ball.position.y <180&&countDown>2) {

countDown=0;

console.log(‘球进了！’);

}

});Matter.Events.on(ball,’sleepStart’,function(){

Matter.World.remove(This.engine.world,ball);

});…123456789101112…Matter.Events.on(this.engine,’tick’,function(){

countDown++;

if (ball.position.x >1054&&ball.position.x <1175&&ball.position.y >170&&ball.position.y <180&&countDown>2) {

countDown=0;

console.log(‘球进了！’);

}

});Matter.Events.on(ball,’sleepStart’,function(){

Matter.World.remove(This.engine.world,ball);

});…到此为止， 通过借助物理引擎所提供的碰撞、 弹性、 摩擦力等特性， 一款简易版的投篮小游戏就完成了， 也推荐大家阅读另一位同事的文章【 H5游戏开发】 推金币， 使用了CreateJS+Matter.js的方案， 相信对你仿3D和Matter.js的使用上有更深的了解。