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

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

[![自己紹介.png](https://www.umi-mori.jp/wp-content/uploads/2023/02/introduction_banner_2-2048x533.png)](https://bit.ly/banner_intro_masumi_creator_qiita)


# \#バグの内容
- 「`enchant.jsでキーボード入力をしても、反応しないバグ`」

別の言い方をすると、

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

（備考：HTML単体で動かすと反応するが、`<iframe>`などでの[ホームページへの組み込み](https://qiita.com/umi_mori/items/99c07ed537f17240b727)をしたり、[code9leap](http://code.9leap.net/)などで実行したりする時に反応しない。）

# \#バグの原因
「`window(ゲーム画面)にfocusが合っていないため`」だと考えられる。

# \#デバッグ方法
方法：windowにfocusを当てるための以下のコードを一番`先頭に追加`する。

```js:debug.js
window.focus();
```

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

\>>デバッグ前のコード

```js: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();
};

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

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

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

[問い合わせフォームはこちら](https://forms.gle/G5g1SJ7BBZw7oXYA7)

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

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

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

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

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

【業務内容】
具体的には、以下のお仕事を中心に受け付けております！（[詳しくはこちら](https://galirage.notion.site/Galirage-AI-c2f3945fafb0433d8d2fd03e56927fd8)）
1. 受託開発（例：生成AIを使った社内システムの開発）
2. コンサルティング（例：技術戦略のアドバイス）
3. 講演（例：社内研修、イベント登壇）

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

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

🔑 機密情報を漏洩させないための、生成AIのシステム構築をお願いしたい。
🤖 自社データを用いたFAQチャットボットの作り方を知りたい。
💡 ChatGPTを、自分たちの事業にどのように活かせるか、アドバイスやアイデアが欲しい。
:::
# おまけ
エンジニアの仲間（データサイエンティストも含む）を増やしたいため、公式LINEを始めました🎉

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

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

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

https://lin.ee/hFUN4TL

[![](https://www.umi-mori.jp/wp-content/uploads/2023/10/line_banner_v2.png)](https://lin.ee/hFUN4TL)