Phaserjs基础教程第三节：鼠标、触屏和按键事件
本来这一节是要讲加载音频和视频文件的，不过由于其中涉及到了一些交互操作，所以先放到下一节，本节主要介绍下如何实现这些互动。
Phaserjs框架毕竟是用于游戏开发的，所以除了鼠标、键盘、触屏这些常规操作外，还有手柄、控制器等设备，不过这些设备我们暂时不涉及，只学习基本的操作。
一、鼠标
说到鼠标，也就是Phaserjs中的game.input.mouse，很多时候我们不会使用它，因为我们经常不能访问到它，比如你定义它的onMouseDown、onMouseWheel、onMouseMove三个事件，分别打印down、wheel、move三个单词，进行相应操作后，你会发现，wheel和move可以打印出来，而down却不会出现，所以很多时候，我们都会使用mousePointer或者activePointer对象来操作鼠标。
比如我们要判断鼠标左键是否被按下，就可以使用game.debug.text("Left Button Is Down: " +game.input.activePointer.leftButton.isDown, 300, 132);这句代码来显示，这句代码的作用就是在300,132这个位置输出一串文本，参考以下代码：
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, render: render });
function preload() {
game.load.image('mouse', 'assets/sprites/mouse_jim_sachs.png');
}
function create() {
game.stage.backgroundColor = '#943021';
game.add.sprite(0, 100, 'mouse');
//阻止事件冒泡
game.input.mouse.capture = true;
game.input.mouse.onMouseDown = function(){
console.log("down");
}
game.input.mouse.onMouseWheel = function(){
console.log("wheel");
}
game.input.mouse.onMouseMove = function(){
console.log("move");
}
}
function render() {
game.debug.text("Is Mouse: " + game.input.activePointer.isMouse, 300, 72);
game.debug.text("Left Button Is Down: " + game.input.activePointer.leftButton.isDown, 300, 132);
game.debug.text("Middle Button Is Down: " + game.input.activePointer.middleButton.isDown, 300, 196);
game.debug.text("Right Button Is Down: " + game.input.activePointer.rightButton.isDown, 300, 260);
}鼠标的事件，鼠标的事件，除了上面所说的按下、移动、滚轮之外，我们熟知的还有悬浮、离开、按下、弹起等，下面我们就添加一个sprite，然后绑定各种鼠标事件查看下效果：
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, render: render });
function preload() {
//加载一张图片，按193x71像素分割
game.load.spritesheet('button', 'assets/buttons/button_sprite_sheet.png', 193, 71);
}
var button;
function create() {
game.stage.backgroundColor = '#4b0049';
//添加一个按钮：new Button(game, x, y, key, callback, callbackContext, overFrame, outFrame, downFrame, upFrame)
//参数：当前游戏对象（使用默认，忽略），x，y，背景关键字，单击事件，绑定元素，图片分割后画面的序号
//以下三种方式均可
// button = game.add.button(game.world.centerX - 95, 460, 'button');
// button = game.add.button(game.world.centerX - 95, 460, 'button', click, this);
button = game.add.button(game.world.centerX - 95, 460, 'button', click, this, 2, 1, 0);
//使用手型指针
button.input.useHandCursor = true;
//绑定事件button.events.onInputDown.add(down, this);
button.events.onInputUp.add(up, this);
button.events.onInputOver.add(over, this);
button.events.onInputOut.add(out, this);
}
function click(){
console.log("点击坐标：" + game.input.activePointer.x + ',' + game.input.activePointer.y);
console.log("click");
}
function down(){
console.log("down");
}
function up(){
console.log("up");
}
function over(){
console.log("over");
}
function out(){
console.log("out");
}
function render() {
game.debug.text("测试鼠标事件", 32, 32);
}使用点击事件需要注意一点：这里的点击是不区分左中右键的，所以如果你需要区分的话，还是需要结合上面的按键状态进行区分。
二、触屏
触屏的状态和点击也差不多，有down、hold、up、tap四种，查看下面代码：var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create });
function preload() {
game.load.image('TheEnd', 'assets/pics/TheEnd_by_Iloe_and_Made.jpg');
game.load.image('BountyHunter', 'assets/pics/Bounty_Hunter_by_Anathematixs_Desire.png');
}
var pic;
function create() {
pic = game.add.sprite(game.world.centerX, game.world.centerY, 'TheEnd');
pic.alpha = 0.5;
pic.anchor.set(0.5);
pic.scale.set(0.6);
game.add.text(16, 16, "tap or double-tap the image", { font: "32px Arial", fill: "#ffffff" });
game.input.onDown.add(function() {
console.log('DOWN');
console.log(Date.now());
});
game.input.onHold.add(function() {
console.log('Hold');
console.log(Date.now());
});
game.input.onUp.add(function() {
console.log('UP');
});
game.input.onTap.add(function() {
console.log('TAP');
});
game.input.onTap.add(onTap, this);
}
function onTap(pointer, doubleTap) {
// doubleTap返回一个boolean值，告诉我们是否双击
console.log(doubleTap);
if (doubleTap)
{
// 双击时，切换sprite图片
if (pic.key === 'TheEnd')
{ pic.loadTexture('BountyHunter');
}
else
{
pic.loadTexture('TheEnd');
}
}
else
{
// 单击时，切换透明度
pic.alpha = (pic.alpha === 0.5) ? 1 : 0.5;
}
}这里注意下hold这个状态，我特别加入了触发时的时间戳显示，通过时间戳我们可以看到，是在down下去两秒钟之后才会触发onhold事件。
三、按键
这里的按键事件指的是键盘触发事件，那么我们要做的就是给需要的按键绑定上事件，在下面的例子中，绑定了键盘上下左右四个方向键，并添加了一个小的洋葱头在游戏中，通过四个方向键可以移动洋葱头的位置：var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update });
function preload() {
game.load.image('phaser', 'assets/sprites/phaser-dude.png');
}
var sprite;
var upKey;
var downKey;
var leftKey;
var rightKey;
function create() {
game.stage.backgroundColor = '#736357';
sprite = game.add.sprite(300, 300, 'phaser');
// 获得键盘的四个方向键
upKey = game.input.keyboard.addKey(Phaser.Keyboard.UP);
downKey = game.input.keyboard.addKey(Phaser.Keyboard.DOWN);
leftKey = game.input.keyboard.addKey(Phaser.Keyboard.LEFT);
rightKey = game.input.keyboard.addKey(Phaser.Keyboard.RIGHT);
}
function update() {
//判断按键是否被按下
if (upKey.isDown)
{
sprite.y--;
}
else if (downKey.isDown)
{
sprite.y++;
}
if (leftKey.isDown)
{
sprite.x--;
}
else if (rightKey.isDown)
{
sprite.x++;
}
}当然，除了方向键，你也可以选择绑定其他的按键，比如Phaser.Keyboard.ONE（数字1键）、Phaser.Keyboard.SHIFT（shift键）等，下面列出了所有支持的按键（来自：http://phaser.io/docs/2.6.2/Phaser.KeyCode.html）：
另外，游戏中所有可见的对象，几乎都是有x、y属性的，这两个属性固定了对象的位置，所以，改变对象的xy属性，就可以实现移动的操作。
好了，这一节先到这里，下一节继续讲加载音频和视频文件。