はじめまして、ますみです！

#バグの内容

「enchant.jsでキーボード入力をしても、反応しないバグ」

別の言い方をすると、

キー操作ができない
スペースキーが効かない、矢印キーが効かない

（備考：HTML単体で動かすと反応するが、<iframe>などでのホームページへの組み込みをしたり、code9leapなどで実行したりする時に反応しない。）

#バグの原因

「window(ゲーム画面)にfocusが合っていないため」だと考えられる。

#デバッグ方法

方法：windowにfocusを当てるための以下のコードを一番先頭に追加する。

debug.js

window.focus();

#サンプルプログラム

以下、「スペースキーを押すと、キャラクターのframe（見た目）が変わる」プログラム。

>>デバッグ前のコード

before.js

enchant();

window.onload = function(){
    //ゲームの設定
    var game = new Core(320, 320);
    game.fps = 10;
    game.preload('chara1.png');

    //スペースキー（ASCII表の32番）が押されたとき、aボタンをオンにする
    //ゲーム内の仮想のaボタンとキーボードを繋げる - keybind
    game.keybind(32, 'a');

    game.onload = function(){
        //プレイヤーのプログラム
        player = new Sprite(32,32);
        player.image = game.assets['chara1.png'];
        player.frame = 0;
        player.x = 144;
        player.y = 144;
        game.rootScene.addChild(player);

        player.addEventListener('enterframe', function(){
            //aボタンをオンになった時（スペースキーが押された時）、プレイヤーのフレームを変える
            if(game.input.a){
              player.frame = 5;
            }
        });
    };
    game.start();
};

>>デバッグ後のコード

`js:after.js
//　＊　この行を追加し、windowにfocusを当てた。
window.focus();
enchant();

window.onload = function(){
//ゲームの設定
var game = new Core(320, 320);
game.fps = 10;
game.preload('chara1.png');

//スペースキー（ASCII表の32番）が押されたとき、aボタンをオンにする
//ゲーム内の仮想のaボタンとキーボードを繋げる - keybind
game.keybind(32, 'a');

game.onload = function(){
    //プレイヤーのプログラム
    player = new Sprite(32,32);
    player.image = game.assets['chara1.png'];
    player.frame = 0;
    player.x = 144;
    player.y = 144;
    game.rootScene.addChild(player);

    player.addEventListener('enterframe', function(){
        //aボタンをオンになった時（スペースキーが押された時）、プレイヤーのフレームを変える
        if(game.input.a){
          player.frame = 5;
        }
    });
};
game.start();

};

最後に

最後まで読んでくださり、ありがとうございました！
いかがだったでしょうか？

この記事を通して、少しでもあなたの学びに役立てば幸いです！

【仕事の相談はこちら】
お仕事の相談のある方は、下記のフォームよりお気軽にご相談ください。

問い合わせフォームはこちら

もしもメールでの問い合わせの方がよろしければ、下記のメールアドレスへご連絡ください。

info*galirage.com（*を@に変えてご送付ください）

🎁 「生成AI活用の無料相談券」もしくは「生成AIの社内ガイドライン（無料PDF）」を『公式LINE』で配布中 🎁
『生成AIを業務に活用したいけど、どうしたらいいかわからない』といった声を多くいただきます。

Galirageでは公式LINEにて、チャットやオンライン会議で「完全個別の生成AI活用無料相談会」を実施しております！
（期間限定で実施しているため、ご興味ある方はお早めに以下のLINE公式アカウントをご登録ください^^）
https://lin.ee/rvz6lMN

※ 予告なく、キャンペーンを終了する可能性がございますが、ご了承ください。

【業務内容】
具体的には、以下のお仕事を中心に受け付けております！（詳しくはこちら）

受託開発（例：生成AIを使った社内システムの開発）
コンサルティング（例：技術戦略のアドバイス）
講演（例：社内研修、イベント登壇）

※ 特に「生成AIを使ったシステム開発のご依頼」が多く、ご好評いただいております。

【これまでの相談事例】
以下のようなご相談が多くあります。

🔑 機密情報を漏洩させないための、生成AIのシステム構築をお願いしたい。
🤖 自社データを用いたFAQチャットボットの作り方を知りたい。
💡 ChatGPTを、自分たちの事業にどのように活かせるか、アドバイスやアイデアが欲しい。

おまけ

エンジニアの仲間（データサイエンティストも含む）を増やしたいため、公式LINEを始めました🎉

「一緒に仕事をしてくれる方」「友だちとして仲良くしてくれる方」は、友だち追加をしていただけますと嬉しいです！（仲良くなった人たちを集めて、「ボードゲーム会」や「ハッカソン」や「もくもく会」もやりたいなと考えています😆）

とはいえ、みなさんにもメリットがないと申し訳ないので、特典を用意しました！

友だち追加後に、アンケートに回答してくれた方へ「エンジニア図鑑（職種20選）」のPDFをお送りします◎

キーボードのキー操作が反応しないバグ【enchant.js】

#バグの内容

#バグの原因

#デバッグ方法

#サンプルプログラム

最後に

おまけ