【Phaser】开发一个H5踢毽子游戏

(*￣︶￣) 微笑第三个1024

外网部署地址（不确定会存在多久）：https://damionew.top/nezha/index.html

GitHub源码地址（下载下来打开index.html即可）：https://github.com/Damionew/nezha.git

设计思路：主旨是-还记得那天夕阳下海边三太子们真挚的友情吗

取材于《魔童哪吒》那场毽子赛

首页是大战后魔丸灵珠CP的对视

游戏场景人物是抠出来的火尖枪混天绫哪吒和刚刚出世的龙王三太子

背景的冰山不太符合场景。

实现方式：

代码都过三次大的版本改动：

第一版：仅仅做出了精灵的对战画面，而且毽子的轨迹也是使用坐标轴进行强行干涉，导致bug频出；

第二版：画出了首页的对战开始画面，但是用第一版的方式没办法加载进去，所以果断将结构改成当前的boot、start、main的方式；

第三版：优化了毽子的运动轨迹，全部使用Phaser的物理属性，重力、速度不再进行坐标轴上点的干涉；

使用Phaser物理引擎，可以参考Phaser官网Demo的做法，具体代码在GitHub可以参考。

//调用的main3.js文件可以看到是整体使用的一个function，所有的功能代码都在里面
//以下是游戏的各种状态，boot/start/main，都各对应了一个方法
//还有一个end结束的方法，被放在了main里面
    //游戏加载
    game.state.add('boot',bootState);
    //开始游戏页面
    game.state.add('start',startState);
    //游戏对战页面
    game.state.add('main',mainState);
    //游戏初始化
    game.state.start('boot')

游戏加载的时候需要将游戏的各种资源load进去，在这种写法中尤其要注意一个：加载完成后再开始游戏（进入开始游戏页面），否则可能导致打开游戏开始页面图片等资源都加载不出来

    //游戏加载
    var bootState = function (game) {
        this.init = function () {
            //背景设置
            game.stage.backgroundColor = "#1b2436";
        }
        this.preload = function () {
            //资源加载
            game.load.image("loadingBg", 'assets/img/loadingBg2.png');
            。。。。。
            //注意，先onFileComplete后，再开始 start  方法
            game.load.onFileComplete.add(function(progress) {
                if(progress == 100) {
                    game.state.start('start');
                }
            });
            //这种直接开始的方式会导致资源加载不出来
            // game.state.start('start');
        }

    }

游戏开始画面没啥好说的，就是点击开始按钮，进行一个点击事件，然后开启对战

    //游戏开始画面
    var startState = function (game) {
        this.create = function () {
            。。。。。
            function actionOnClick () {
                game.state.start('main');
            }
        }
    }

重点是对战阶段了：

1.人物的移动

2.人物与毽子的碰撞

3.毽子的斜抛与下落轨迹

4.判断输赢

解决方案：

1.在上篇 Phaser监听键盘WASD按下事件 中有了详细叙述

2.使用物理引擎

//判断是否为true，如果是，则ball的轨迹则重新设置x为来的反方向
game.physics.arcade.overlap(player2, ball)

3.对战阶段有两版的修改，主要是在毽子的运动轨迹上面

第一版是使用 ball 的坐标系进行轨迹的绘制

                ball.x += ball.xSpeed;
                ball.y -= ball.ySpeed;

第二版使用的Phaser的物理引擎可以完美的解决这些事情

            //球---------
            ball = game.add.sprite(550,500,"ball");
            game.physics.arcade.enable(ball);//创建球的物理属性
            ball.body.collideWorldBounds=true;//设置球碰撞世界范围
            ball.body.gravity.y=300;//设置ball的重力
            ball.body.velocity.x=200;//设置ball的x轴速度
            ball.body.velocity.y=-350;//设置ball的y轴速度

另外有点需要注意：在使用Phaser物理引擎后不要再对ball.x这种坐标系进行干涉，因为会与ball的物理属性冲突，导致重力等都无法使用，而且只需要在create方法中设置一次ball本身的x,y速度即可，除了碰撞后x方向上的负方向变化外，其他地方不需要进行干涉

4.判断输赢

目前判断机制比较简单，仅仅使用球的y轴高度和一个from标志进行判断，每一次碰撞后，from的值都会变化，因此必须将from设置为全局变量

            if(ball.y > 600 && from == 1 ){
                ball.kill();
                //获胜场景
                game.player2Win = game.add.sprite(0,0,'player1Win');//将资源sky添加入场景
                game.player2Win.x = 0.13*gameW;
                game.player2Win.y = 0.2*gameH;
                //场景上铺一个button，点击重新开始
                var button2 = game.add.button(gameW/2.5, gameH*0.71, 'btn_start', actionOnClick, this, 2, 1, 0);
                button2.anchor.setTo(0.5, 0.5);
                button2.scale.setTo(0.5*DPR);
                function actionOnClick () {
                    game.state.start('main');
                }
            }

未来改进：

1.没有BGM真的难受w(ﾟДﾟ)w

2.目前使用固定角度对ball进行斜抛，后期会修改人物踢毽子动作，对球的角度进行调整

3.会给毽子设置一个加速度，更具备挑战性，强哥说，这也太不刺激了

加油，1024！