enchantjsでキーボード同時押しするとkeyupの挙動がおかしくなる。

Question

A連打やBボタンを押しつづけている状態で横移動をするとA、Bのボタンのactive時の状態から戻らず直し方が分かりません。
また、Aボタンを押した際攻撃モーションを振る動作をつけているのですが、たまに終わった時のフレームの値がundefinedが帰って来てしまうため、すぐさまifで値を入れる処理をしているのですが、どうしてもチラツキが出てしまいます。
こちらも解決できないでしょうか？
以下のコードは必要そうな箇所だけ抜き出しています。
一応、テストurlはこちらになります。解答宜しくおねがいします。
http://www.xblog.shop/test/

//定数
const SCREEN_WIDTH = 414;
const SCREEN_HEIGHT = 736;


//スタート画面画像
const START = "images/start/start.png";
const START_SKY = "images/start/start_sky.jpg";
const START_CLOUD01 = "images/start/start_cloud01.png";
const START_CLOUD02 = "images/start/start_cloud02.png";

//スタートタイトル
const START_TITLE = "images/start/start_title.png";
const START_DORAGON = "images/start/start_doragon.png";
const START_GAME = "images/start/start_game.png";
const START_ICON = "images/start/start_icon.png";

//ミュージックボタン
const MUSIC_BTN = "images/music_btn.png";

//音楽素材
const OP_BGM = "images/music/op.mp3";


//プレイシーン画像
const PLAY_BG = "images/play/background.jpg";

const PLAY_CHARA = "images/play/chara.png";

const PLAY_MAP = "images/play/map.png";

const PLAY_BTN = "images/play/btn.png";

//アセット
const START_BG_ASSETS = [
  START_SKY, START_CLOUD01, START_CLOUD02, START
];

const START_TITLE_ASSETS = [
  START_DORAGON, START_ICON, START_TITLE, START_GAME
];

const ASSETS = [
  MUSIC_BTN, OP_BGM, PLAY_BG, PLAY_CHARA, PLAY_MAP, PLAY_BTN
];


//パラメータ関連
const TITLE_PARAMETER = [
  [102, 113, 21, 295], //START_DORAGON
  [101, 143, 182, 290], //START_ICON
  [360, 87, 28, 325], //START_TITLE
  [135, 23, 142, 445] //START_GAME
];

const PLAY_BG_WIDTH = 414;
const PLAY_BG_HEIGHT = 5152;

const PLAYER_WIDTH = 32;
const PLAYER_HEIGHT = 32;

const PLAY_MAP_WIDTH = 16;
const PLAY_MAP_HEIGHT = 16;

const PLAY_CHARA_ACTION = {
  "walk": [27, 28, 29],
  "attack": [30, 31, 32, 33, 34, 35]
};
const MAP_PARAMETER = [178, 199, 220];

const PLAYER_PARAMETER = [171, 192, 211];
//グローバル変数

var game = null;
var play = null;
var timeflg = null;
var time = null;
var score = null;
var pad = null;
var btn_a = null;
var action_flg = true;
var bg = null;
var speed_y = 3;





var createPlayScene = function () {
  play = new Player();
  scene.addChild(play);
  //バーチャルパッド
  pad = new Pad();
  pad.width = 92.4;
  pad.moveTo(10, SCREEN_HEIGHT - 100);
  scene.addChild(pad);

  pad.ontouchend = function () {
    game.keyflg = false;
    pad.frame = 0;
	  
    //ゲームキーフラグをfalseにしないと1回しか押せないため毎回false
  }
  game.keybind(65, 'a');
  game.keybind(66, 'b');
  btn_a = new Play_Btn_A();
  scene.addChild(btn_a);
  btn_a.x = SCREEN_WIDTH - 65;
  btn_a.y = SCREEN_HEIGHT - 100;

  var btn_b = new Play_Btn_B();
  scene.addChild(btn_b);
  btn_b.x = SCREEN_WIDTH - 115;
  btn_b.y = SCREEN_HEIGHT - 60;
	
  // タイトルシーンを返します。
  return scene;
}



// キー入力対策
window.focus();
document.onkeyup = function () {

  game.keyflg = false; // gameオブジェクトにオリジナルのメンバ変数keyflgを追加

  game.keyflg_b = false;
  game.keyflg_a = false;
  return true;
};



//プレイヤー
var Player = Class.create(Sprite, {
  initialize: function () {
    Sprite.call(this, PLAYER_WIDTH, PLAYER_HEIGHT);
    this.image = game.assets[PLAY_CHARA];
    this.frame = PLAY_CHARA_ACTION.walk[0];
    this.x = PLAYER_PARAMETER[1];
    this.y = SCREEN_HEIGHT - 35;
    this.count = 0;
    this.action = 1;

  },
  onenterframe: function () {
    var input = game.input;
    if (typeof this.frame === "undefined") {
      this.count = 0;
      this.frame = PLAY_CHARA_ACTION.walk[this.count];
    }
    if (action_flg) {
      if (game.frame % 5 == 0 && this.frame == 29) {
        this.count = 0;
        this.frame = PLAY_CHARA_ACTION.walk[this.count];
        this.count++;
      } else if (game.frame % 5 == 0) {
        this.frame = PLAY_CHARA_ACTION.walk[this.count];
        this.count++;
      }
    }


    //左が押された時かつ中央の場合
    if (input.left == true && this.action == 1 || input.left == true && this.action == 2) {
      if (!game.keyflg) {
        this.action--;
        this.x = PLAYER_PARAMETER[this.action];
        game.keyflg = true;
        pad.frame = 1;
        document.onkeyup = function () {

          pad.frame = 0;
          game.keyflg = false;
        };
      }
    }


    //右が押された時かつ一番左の場合
    if (input.right == true && this.action == 0 || input.right == true && this.action == 1) {
      if (!game.keyflg) {
        this.action++;
        this.x = PLAYER_PARAMETER[this.action];
        game.keyflg = true;
        pad.frame = 3;
        document.onkeyup = function () {
          pad.frame = 0;
          game.keyflg = false;
        };
      }
    }

  }
});





//ボタンベース
var Play_Btn = Class.create(Sprite, {
  initialize: function () {
    Sprite.call(this, 65.5, 61);
    this.image = game.assets[PLAY_BTN];
  },
  attack: function () {
    var count = 0;
    action_flg = false;
    var countup = function () {
      requestAnimationFrame(function () {
        play.frame = PLAY_CHARA_ACTION.attack[count];
        count++
      });
    }
    countup();
    var id = setInterval(function () {
      countup();
      if (count > 5) {
        action_flg = true;
        count = 0;
        clearInterval(id); //idをclearIntervalで指定している
      }
    }, 60);
  },
  speed: function () {

  }
});


//Play_Btnを継承
var Play_Btn_A = Class.create(Play_Btn, {
  initialize: function () {
    Play_Btn.call(this);
    this.frame = 0;
  },
  ontouchstart: function () {
    //game.input.a = true;
    this.attack();
    this.frame = 2;
  },
  ontouchend: function () {
    //game.input.a = false;
    this.frame = 0;
  },
  onenterframe: function () {
    if (game.input.a && !game.keyflg_a) {
      this.attack();
      var up_this = this;
      game.keyflg_a = true;
      this.frame = 2;
      document.onkeyup = function () {
        up_this.frame = 0;
        game.keyflg_a = false;
      };
    }
  }
});

var Play_Btn_B = Class.create(Play_Btn, {
  initialize: function () {
    Play_Btn.call(this);
    this.frame = 1;
  },
  ontouchstart: function () {
    //game.input.a = true;

    this.frame = 3;
    speed_y = 7;
  },
  ontouchend: function () {
	  //game.keyflg_b = false;
    //game.input.a = false;
    this.frame = 1;
    speed_y = 3;
  },
  onenterframe: function () {
    if (game.input.b && !game.keyflg_b) {
      //bg.speed = 6;
      speed_y = 7;
      //console.log(bg.y);
      var up_this = this;
      game.keyflg_b = true;
      this.frame = 3;
		console.log("ter");
      document.onkeyup = function (e) {
		  
        game.keyflg_b = false;
		  up_this.frame = 1;
        speed_y = 3;
        
      };
    }

  }

});

##keyup挙動の解決 コード変更箇所
各クラスに書いていたkeyup処理を削除してcreatePlayScene内のA、Bボタン・横移動ボタンのインスタンスで処理をまとめて条件分岐で解決しました。

  scene.onenterframe = function () {
    document.onkeyup = function (e) {
      if (e.key == "ArrowRight" || e.key == "ArrowLeft") {
        pad.frame = 0;
        game.keyflg = false;
      } else if (e.key == "b") {
        game.keyflg_b = false;
        btn_b.frame = 1;
        speed_y = 3;
      } else if (e.key == "a") {
        btn_a.frame = 0;
        game.keyflg_a = false;
      }
    };
  }

・横移動 十字キーボード
・Aボタン キーボードA
・Bボタン キーボードB

##追記
ローカルで確認してた際はバーチャルパッド、機能していたのですが、テストサーバーだと機能しなくなっているようです。

Answer 1

enchantjsでキーボード同時押しするとkeyupの挙動がおかしくなる。

っていう理由だけはなんとなくわかったので記載します。

document.onkeyupをAボタン押してもBボタン押しても関数上書きしてるので

処理として
0. Aボタン押す
0. document.onkeyupがAボタン離したときの関数になる
0. (Aボタン離さずに)Bボタン押す
0. ocument.onkeyupがBボタン離したときの関数になる
0. Bボタンを離す
0. Bボタン離したときの関数が呼ばれる
0. Aボタンを離す
0. Bボタン離したときの関数が呼ばれる

ってなります(Aボタン離したときの関数が呼ばれません)

解決方法としては、
document.onkeyupを一箇所にする＆なんのキーを押したかを見て処理をする
…っていう感じになります。

Comments

[web11]

keyupって押したボタンだけのキーの処理勝手に判定してくれるのかと勘違いしてました。1つ目の質問解決しました、ありがとうございます。
クラス内で処理を完結させたほうが良いのか、ちょっと判断ができないですが、今回は、インスタンス内で処理するようにしてみました。

[web11]

バーチャルパッドの件はサーバーの問題でした、ベストアンサーに選ばせていただきます。
ありがとうございました。