html5战斗游戏中的角色移动释放技能示例

比如可以让两个骑士移动，让指定的骑士进行攻击等动作，并适时显示移动或攻击时的画板坐标：(74.5:633) 骑士坐标：(80:300) 说明：按钮可以控制士兵 提示： 测试：8:7。编写HTML5游戏时，对初学者是个参考。
相关js代码
cnGame.init("flght_ctx", { width: 960, height: 600 });
    var srcObj = { run_ruight_knight_01: "static/images/knight/action_run.png", attack_knight_01: "static/images/knight/attack_action.png", skill_action_01: "static/images/skill/skill_action_01.png", skill_move_01: "static/images/skill/skill_move_01.png" };
    var gameObject = {
        action: null,
        initialize: function () {
            //添加两个骑士
            this.knight1 = new Role(0, 300).knight_01;
            this.knight1.initialize();
            this.knight2 = new Role(0, 400).knight_01;
            this.knight2.initialize();



        },

        update: function () {
            this.knight1.update();
            this.knight2.update();
            if (this.action != null) {
                this.action();
            }
            if (this.knight1.skill != null) {
                
                this.knight1.skill.update();
            }
            if (this.knight2.skill != null) {
                this.knight2.skill.update();
            }
        },
        draw: function () {
            $("#k_pos").html("(" + Math.floor(this.knight1.x) + ":" + Math.floor(this.knight1.y) + ")");
            this.knight1.draw();
            this.knight2.draw();
            if (this.knight1.skill != null) {
                this.knight1.skill.draw();
            }
            if (this.knight2.skill != null) {
                this.knight2.skill.draw();
            }
        }

    };
    cnGame.loader.start(gameObject, { srcArray: srcObj });
    $("#btn").click(function () {
        gameObject.action = function () {
            //这里执行动作
            gameObject.knight1.attack();
            gameObject.action = null;
        }

    });
    $("#btn2").click(function () {
        gameObject.knight2.attack();
        //停止动作
        gameObject.action = null;
    });
    $("#btn3").click(function () {
        gameObject.knight1.moveRight();
        gameObject.action = null;
    });
    $("#btn4").click(function () {
        gameObject.knight2.moveRight();
        gameObject.action = null;
    });
    $("#btn5").click(function () {
        if (gameObject.knight1.skill == null) {
            gameObject.knight1.attack();
            gameObject.knight1.skill = new SkillFactory(gameObject.knight1.x + 50, gameObject.knight1.y - 20, gameObject.knight1).skill_01;
            gameObject.action = null;
        } else {
            $("#msg").html("骑兵1的技能正在冷却中.");
        }

    });
    $("#btn6").click(function () {
        if (gameObject.knight2.skill == null) {
            gameObject.knight2.attack();
            gameObject.knight2.skill = new SkillFactory(gameObject.knight2.x + 50, gameObject.knight2.y-20, gameObject.knight2).skill_01;
            gameObject.action = null;
        } else {
            $("#msg").html("骑兵2的技能正在冷却中.");
         
        }
    });