Question

我有一个基本游戏，使用Quintus html5游戏在地图上移动精灵。我有精灵从正方形移动到方形（64px），按键很精细。我希望玩家在网页上点击按钮时移动一个方格。

我不确定如何通过点击按钮调用Quintus中的step方法。

在画布外面我有<button id="move-player">Move Player One Square</button>

document.getElementById("move-player").addEventListener("click", function( event ) {
  //move player one square by possibly calling PlayerControls step 

});

Quintus播放器代码

Q.component("PlayerControls", {
    // default properties to add onto our entity
    defaults: {speed: 32, direction: 'null'},

    // called when the component is added to
    // an entity
    added: function () {
        var p = this.entity.p;

        // adding default properties
        Q._defaults(p, this.defaults);

        // every time our entity steps, call its step method
        this.entity.on("step", this, "step");
    },

    step: function (dt) {
        // entity's properties
        var p = this.entity.p;

        var total_points = Q.state.get("points");
        if (total_points >= 4) {
            Q.state.set("points", 4);
            Q.stageScene("GameOverMsg", 2);//display game over message
        }//inner if

        // direction from the input will help in animation
        p.direction =   Q.inputs['left'] ? 'left' :
                        Q.inputs['right'] ? 'right' :
                        Q.inputs['up'] ? 'up' :
                        Q.inputs['down'] ? 'down' : null;


        window.onkeyup = function (e) {
            if (e.keyCode == 37)//left
            {
                p.x -= p.speed;
                move_collision = "left";
            }
            else if (e.keyCode == 38)//up
            {
                if (!(p.y <= 36)) {
                    p.y -= p.speed;
                    move_collision = "up";
                }
            }
            else if (e.keyCode == 39)//right
            {
                p.x += p.speed;
                move_collision = "right";
            }
            else if (e.keyCode == 40)//down
            {
                if (!(p.y >= 480)) {
                    p.y += p.speed;
                    move_collision = "down";
                }
            }
        };

        // movement
        switch (move_collision) {
            case "left":
                p.x -= p.speed;
                move_collision = "";
                break;
            case "right":
                p.x += p.speed;
                move_collision = "";
                break;
            case "up":
                p.y -= p.speed;
                move_collision = "";
                break;
            case "down":
                if (!(p.y >= 480)) {
                    p.y += p.speed;
                }
                move_collision = "";
                break;
            default:
                break;
        }
    }
});

//Player Sprite
Q.Sprite.extend("Player",
    {
        init: function (properties) {
            properties.sheet = "snailspritesheet";
            properties.sprite = "snail";
            properties.frame = 4;
            this._super(properties);
            this.add("2d,PlayerControls,animation,tween");

Answer 1

考虑step函数是一种回调函数。定时调用该函数。

所以，有两种移动玩家的方法

制作状态机：单击按钮时更改状态并将代码交错到step移动播放器的功能

制作触发器功能以移动具有全局变量的播放器：例如，

var player;
Q.scene("start",function(stage) {
    stage.insert(new Q.UI.Button({
        asset: 'move.png',
        x: Q.width/2,
        scale: 0.5,
        y: 370
     }, function() {
        player.x += 10;
        player.y -= 10;
     })
  );
}

我希望它对你有用。

HTML5游戏按下按钮移动精灵

1 个答案: