【Phaser】Phaser监听键盘WASD按下事件

应开发一个简单的H5小游戏需要,使用了H5游戏框架Phaser,如果手写各种效果代码,怕是要写到头秃,因此必须借用网上开源的引擎了。

Phaser GitHub地址:https://github.com/photonstorm/phaser

Phaser 国内粉丝文档、论坛小站:https://www.phaser-china.com/

根据官方Demo案例接星星(collectStar)改编代码

源代码在:https://github.com/channingbreeze/games

个人需求:

1.需要两个精灵进行对战

2.两个精灵分别使用WASD 和 ↑←↓→进行控制

遇到问题:

1.因为刚刚接触Phaser,Demo中使用的

game.input.keyboard.createCursorKeys()

仅能获取到 up/left/down/right 的按键事件

2.因为代码问题,需要监听按下事件和取消按下事件,否则精灵不是一帧一帧的动,而是会滑行

解决方式:

1.方向键的监听方式没有改动,仍然使用

            //创建按键方向 ↑←↓→
            cursors=game.input.keyboard.createCursorKeys();

而WASD则使用

            //创建WASD按键
            A = game.input.keyboard.addKey(Phaser.Keyboard.A);
            D = game.input.keyboard.addKey(Phaser.Keyboard.D);

2.将player1和player2的监听判断分开,都进行如果没按下的控制

详细script代码为(部分已省略)

    <script>
        var game = new Phaser.Game(800,600,Phaser.CANVAS,'parent',{
            preload:preload,//资源预加载
            create:create,//创建场景
            update:update//逻辑实现
        });
        function preload() {
            console.log('资源加载');
            。。。
        }
        var player1;//用户一
        var player2;//用户二
        var cursors;//输入
        var A;//键盘A
        var D;//键盘D
        function create() {
            console.log('创建场景')
            。。。
            //创建按键方向 ↑←↓→
            cursors=game.input.keyboard.createCursorKeys();
            //创建WASD按键
            A = game.input.keyboard.addKey(Phaser.Keyboard.A);
            D = game.input.keyboard.addKey(Phaser.Keyboard.D);
        }
        function update() {
            console.log('游戏循环');
            。。。
            //player1使用上下左右
            if (cursors.left.isDown) {
                player1.body.velocity.x=-150;
                player1.animations.play('left');
            } else if (cursors.right.isDown) {
                player1.body.velocity.x=150;
                player1.animations.play('right');
            } else {
                player1.bame=4;//精灵图第4帧
                player1.body.velocity.x=0;//加上这个判断则每按一次运动一次否则直接滑翔
            }
            //player2操作:AD
            if (A.isDown) {
                player2.body.velocity.x=-150;
                player2.animations.play('left');
            } else if (D.isDown) {
                player2.body.velocity.x=150;
                player2.animations.play('right');
            } else {
                player2.body.velocity.x=0;//加上这个判断每没按一次运动一次否则直接滑翔
                player2.frame=4;//精灵图第4帧
            }

        }
    </script>

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值