javascript - 如何在 Canvas 上使用函数

Question

var game = new Phaser.Game("100%", "100%", Phaser.CANVAS, 'game', { preload: preload, create: create, update: update, render: render });
var crosta;
var player;
var cursors;
var button;

function preload() {
    game.load.image('player','https://upload.wikimedia.org/wikipedia/en/thumb/2/22/Steven_Universe.png/220px-Steven_Universe.png');
    game.load.spritesheet('button', 'https://cdn.maxbuttons.com/wp-content/themes/maxbuttons-theme/images/icons/basic-buttons-pack.png', 193, 71);
}
function create() {
    crosta = game.add.tileSprite(0, 0, 3840, 2160);
    game.world.resize(3840, 2160);
    game.world.setBounds(0, 0, 3840, 2160);
    // game.add.text(20, 100, "- phaser -", { font: "32px Arial", fill: "#330088", align: "center" });
    
    player = game.add.sprite(game.world.centerX, game.world.centerY, 'player');
    button = game.add.button(game.world.centerX - 95, 400, 'button', actionOnClick, this, 2, 1, 0);

    game.physics.startSystem(Phaser.Physics.P2JS);
    game.physics.p2.enable(player);
    game.camera.follow(player);
    cursors = game.input.keyboard.createCursorKeys();
}
function update() {
    player.body.setZeroVelocity();
    if(cursors.up.isDown){ player.body.moveUp(3000) }
    else if (cursors.down.isDown){ player.body.moveDown(3000); }
    if (cursors.left.isDown){ player.body.velocity.x = -3000; }
    else if (cursors.right.isDown){ player.body.moveRight(3000); }
}
function render() {}
function actionOnClick () {
    player.body.moveRight(3000);
}

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.6.2/phaser.min.js"></script>

我的这段代码有问题。如何在按钮上添加键盘箭头的移动？如果我需要通过此操作

cursors.up.isDown

到这个函数

function actionOnClick () {

}

Answer 1

我不知道你到底想做什么，所以就像这样它只是使用你的代码

var game = new Phaser.Game(640, 480, Phaser.CANVAS, 'game', { preload: preload, create: create, update: update, render: render });
var crosta;
var player;
var cursors;
var button1, button2;
var bRight = false;

function preload() {
    game.load.image('player','https://upload.wikimedia.org/wikipedia/en/thumb/2/22/Steven_Universe.png/220px-Steven_Universe.png');
    game.load.spritesheet('button', 'https://cdn.maxbuttons.com/wp-content/themes/maxbuttons-theme/images/icons/basic-buttons-pack.png', 400, 400);
}
function create() {
    
    player = game.add.sprite(game.world.centerX, game.world.centerY, 'player');
    button1 = game.add.button(20, 20, 'button', actionClick, this, 0);
    button1.scale.setTo(0.25);
    button2 = game.add.button(150, 20, 'button');
    button2.scale.setTo(0.25);
    button2.inputEnabled = true;
    button2.events.onInputOver.add(()=>{bRight = true;});
    game.physics.startSystem(Phaser.Physics.P2JS);
    game.physics.p2.enable(player);
    game.camera.follow(player);
    cursors = game.input.keyboard.createCursorKeys();
}
function update() {
    player.body.setZeroVelocity();
    if(cursors.up.isDown){ player.body.moveUp(300) }
    if (cursors.down.isDown){ player.body.moveDown(300); }
    if (cursors.left.isDown){ player.body.velocity.x = -300; }
    if (cursors.right.isDown){ player.body.moveRight(300); }
    if (bRight == true){player.body.moveRight(300);bRight=false}
}
function render() {}
function actionClick(){
  console.log('clicked');
}

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/phaser-ce@2.10.0"></script>