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