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

桓瀚
2023-12-01

应开发一个简单的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>

 

 类似资料: