― MozillaZine.jp フォーラムは Mozilla 製品に関する情報交換の場です ―



All times are UTC + 9 hours

新しいトピックを投稿する トピックへ返信する  [ 14 件の記事 ] 
作成者 メッセージ
投稿記事Posted: 2023年3月23日(木) 10:10 
オフライン

登録日時: 2023年3月23日(木) 09:44
記事: 9
お住まい: 富山
 はじめて書き込みます。
 Javascriptでシューティングゲームを作成したのですが、ChromeでもEdgeでも問題なく作動するのですが、Firefoxでは、特定のイメージ画像が映らなかったり、ページが止まったりします。iPadのFirefoxではちゃんと動作するのですが、WindowsのFirefoxのみ、そのような問題が起こります。
 seTIntervalやsetTimeoutを多用している箇所でとまるので、なにかタイマーに関わる問題ではないかと思うのですが、よくわかりません。
 ちなみに、その箇所のJsを掲載しておきます。
  function game_over(){
const GameOver=document.getElementById("game_over");
var i=0;
var j=0;
var GMOV="GAME OVER";
var RTRY="";
yy=[0,0,0,0,0,0,0]

const GameOverTl=setInterval(()=>{
GameOver.innerText=GMOV.substr(0,i);
i=(i+1)*(i<=9);
},900);
const Retry=document.getElementById("retry");
const RetryEx=setInterval(()=>{
if (RTRY==""){RTRY="ENTERKEY TO RETRY"}
else RTRY="";
Retry.innerText=RTRY;
},2000);
const GameOverEx=setInterval(()=>{
GameOver.style.color=CLR[j];
j=(j+1)*(j<=5);
},1200);
document.addEventListener("keydown",(e)=>{
if(e.keyCode==13){
clearInterval(RetryEx);
clearInterval(GameOverTl);
clearInterval(GameOverEx);
setTimeout(location.reload());
}
})
Retry.addEventListener("touchstart",()=>{
clearInterval(RetryEx);
clearInterval(GameOverTl);
clearInterval(GameOverEx);
setTimeout(location.reload());
})
setTimeout(()=>{
clearInterval(RetryEx);
clearInterval(GameOverEx);
clearInterval(GameOverTl);
setTimeout(location.href="game_title.html");
},20000);
return;
}
 よろしければ、アドバイスお願いします。
 ちなみにOSはWindows10homeで、firefoxは最新版です。
 よろしくお願い申し上げます。

_________________
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/111.0


通報する
ページトップ
 プロフィール  
引用付きで返信する  
投稿記事Posted: 2023年3月23日(木) 21:27 
オフライン

登録日時: 2014年2月22日(土) 00:59
記事: 4084
ぶれこみ さん、EarlgreyTea と申します。
トピックの件名ですが、「Windows のFirefoxがうまく動作しない」だと内容と齟齬がありますね。
「Windows版Firefoxにてタイマー関連のJavaScriptが期待どおりに動作しない」という感じでしょうか。

ぶれこみ さんが書きました:
iPadのFirefoxではちゃんと動作するのですが、WindowsのFirefoxのみ、そのような問題が起こります。

iOS向けのFirefoxは他のプラットフォームとは完全に別物です。
Apple Storeの規約により、サードパーティのブラウザーアプリでもWebkitエンジンを使うことが義務づけられているためです。

ぶれこみ さんが書きました:
 seTIntervalやsetTimeoutを多用している箇所でとまるので、なにかタイマーに関わる問題ではないかと思うのですが、よくわかりません。
 ちなみに、その箇所のJsを掲載しておきます。

ご提示のJavaScriptコードはどういう動作を期待したものでしょうか。
またその動作をテストできるコード(html)もご提示いただけないでしょうか。

_________________
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/111.0


通報する
ページトップ
 プロフィール  
引用付きで返信する  
投稿記事Posted: 2023年3月26日(日) 20:10 
オフライン

登録日時: 2014年2月22日(土) 00:59
記事: 4084
ぶれこみ さん
返信がないのでテストしてみました。
テストコードは下記になります。 ※遷移先のページを変えてあります。
コード:
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>ぶれこみ</title>
    <script type="text/javascript">
        function game_over() {
            const GameOver = document.getElementById("game_over");
            var i = 0;
            var j = 0;
            var GMOV = "GAME OVER";
            var RTRY = "";
            yy = [0, 0, 0, 0, 0, 0, 0]

            const GameOverTl = setInterval(() => {
                GameOver.innerText = GMOV.substr(0, i);
                i = (i + 1) * (i <= 9);
            }, 900);
            const Retry = document.getElementById("retry");
            const RetryEx = setInterval(() => {
                if (RTRY == "") {
                    RTRY = "ENTERKEY TO RETRY"
                } else RTRY = "";
                Retry.innerText = RTRY;
            }, 2000);
            const GameOverEx = setInterval(() => {
                GameOver.style.color = CLR[j];
                j = (j + 1) * (j <= 5);
            }, 1200);
            document.addEventListener("keydown", (e) => {
                if (e.keyCode == 13) {
                    clearInterval(RetryEx);
                    clearInterval(GameOverTl);
                    clearInterval(GameOverEx);
                    setTimeout(location.reload());
                }
            })
            Retry.addEventListener("touchstart", () => {
                clearInterval(RetryEx);
                clearInterval(GameOverTl);
                clearInterval(GameOverEx);
                setTimeout(location.reload());
            })
            setTimeout(() => {
                clearInterval(RetryEx);
                clearInterval(GameOverEx);
                clearInterval(GameOverTl);
                setTimeout(location.href = "https://forums.mozillazine.jp/viewtopic.php?f=2&t=22025");
            }, 20000);
            return;
        }
    </script>

    <style>
        #game_over,
        #retry {
            border: 1px solid;
            width: 200px;
            height: 20px;
            size: large;
            text-align: center;
        }
    </style>
</head>

<body>
    <button onclick="game_over()">go GAME OVER</button>
    <div id="game_over"></div>
    <div id="retry"></div>
</body>

</html>

動作はボタンで処理を実行すると、「GAME OVER」が一文字ずつ表示され、「ENTERKEY TO RETRY」が点滅表示、20秒でタイムアウトで別ページに遷移、エンターキー押下でリロードします。
添付ファイル:
GAME OVER.jpg
GAME OVER.jpg [ 11.51 KiB | 表示数: 12599 回 ]

Chrome と Firefox で同じ動作でしたので、どこを問題とされているのかがわからないです。

_________________
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/111.0


通報する
ページトップ
 プロフィール  
引用付きで返信する  
投稿記事Posted: 2023年3月27日(月) 08:14 
オフライン

登録日時: 2023年3月23日(木) 09:44
記事: 9
お住まい: 富山
Earlgrey tea様

 返信ありがとうございます。

 返信大変遅くなりました。勝手が分からず、通知が届かなかったので、気付くのが遅れました。
 なるほど、これらのコード単体で試してみると、問題が明らかになるかもしれませんね。実は、問題はこのゲームオーバーの場面だけではなくて、ゲーム中に特定のイメージ画像が映し出されないというものもあり、それらもほかのブラウザではうまく作動しているものです。一つ一つ解決せねばなりませんが、とりあえず、作成戴きましたhtmlで、動作確認してみます。
 ちょっと、今日忙しいので、お返事遅れますが、少々お待ち戴けると助かります。

 

_________________
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.0 Safari/605.1.15


通報する
ページトップ
 プロフィール  
引用付きで返信する  
投稿記事Posted: 2023年3月27日(月) 18:52 
オフライン

登録日時: 2023年3月23日(木) 09:44
記事: 9
お住まい: 富山
EarlgreyTea様

 お試し戴いたソースですが、僕のオリジナルと有意な差がみとめられなかったので、とりあえずは、僕の作成したgame_overサブルーチンだけ、body onloadで走らせてみました。すると、タイマー表示もキーイベントもすんなりいき、問題は認められませんでした。
 ゲームの中でサブルーチンとしてgame_overを動かすと、フリーズしてしまうようで、キーイベントも受け付けず、表示の点滅も止まってしまいます。マウスのクリックも反応しないことから、これはいわゆるハングアップというやつだろうとあたりをつけて、ググって調べてみましたら、firefoxのタスクマネージャーというのに行き当たり、タスクマネージャーで使用メモリ量をしらべてみたところ、CPUが100%いってしまっておりました。これは、要するにメモリ容量オーバーということでしょう。
 対処法として、Mozillaのサイトをみたら、メモリ増設とか書いてありまして、どうも現実的ではないので(ゲームは趣味で作ったもので、そこまでしてfirefoxで動かす必然性もないというか……)、まあ、ハングアップしたらしたで仕方ないということにしておかねば成りません。
 EarlgreyTeaさんのパソコンでもうごくか判りませんが、高スペックならうごくと思われますので、よろしかったらお試し下さい。まだ、試作品ですが、ホームページにアップしてあります。https://mutoukai.com/game_title.html
 しかし、firefoxって、よけいにメモリ食うんですね。初めて知りました。ChromeやEdgeでは、firefoxよりも挙動が速くてゲームも難しく感じますが、もうすこし、firefoxについての基礎知識を持たねばならないと、つくづく感じました。
 このたびは、アドバイスありがとう御座いました。

_________________
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/111.0


通報する
ページトップ
 プロフィール  
引用付きで返信する  
投稿記事Posted: 2023年3月27日(月) 19:54 
オフライン

登録日時: 2014年2月22日(土) 00:59
記事: 4084
ぶれこみ さんが書きました:
僕の作成したgame_overサブルーチンだけ、body onloadで走らせてみました。すると、タイマー表示もキーイベントもすんなりいき、問題は認められませんでした。

つまり、
ぶれこみ さんが書きました:
seTIntervalやsetTimeoutを多用している箇所でとまるので、なにかタイマーに関わる問題ではないかと思うのですが
というのは見込み違いで別の問題ということになりそうです。

ぶれこみ さんが書きました:
ググって調べてみましたら、firefoxのタスクマネージャーというのに行き当たり、タスクマネージャーで使用メモリ量をしらべてみたところ、CPUが100%いってしまっておりました。これは、要するにメモリ容量オーバーということでしょう。

何を調べてどういう論理展開でそうなったのかわかりませんが…
「CPUが100%」というのは、CPUが休み時間なく仕事をしている状態を示しています。
特定のタスクで100%になっているのであれば、その他のWindowsの処理を行う余裕がなくなり、マウスにも反応しなくなり、ウインドウの表示の更新もままならない状況となるわけです。
簡単に言うと処理を適切にWindowsに返していない状況です。
ループ処理をずっと回したり、デッドロックして抜け出せなくなったりといったことが考えられるでしょう。

「メモリ容量オーバー」とは直接は関係ありません。
処理をずっと回してメモリーを食いつぶした結果メモリー不足になるかもしれません。
またメモリー不足によって処理が停止してCPU使用率が100%に貼りつくかもしれません。
でもCPU使用率とメモリー使用量はイコールではなく別の事象です。

ぶれこみ さんが書きました:
しかし、firefoxって、よけいにメモリ食うんですね。初めて知りました。

その認識は疑問です。
ゲームアプリが内在している問題でメモリーリークを起こしているのでしょう。
それがBlink系ブラウザーではあまり表面化せず、Firefoxの場合に表面化しているだけだと思います。

Firefoxにも 優秀なデバッガーやプロファイラーなどのツールが備わっていますので、それを使って問題個所を突き止めてみてはいかがでしょうか。
Firefox Developer Tools

【追記】
ゲームを少しプレイしてゲームオーバーにしてみましたが、プレイ中とゲームオーバー演出どちらもCPU使用率が100%になったり、メモリーを極端に消費するようなことはありませんでした。
どういう状況で発生するのでしょう。

_________________
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/111.0


通報する
ページトップ
 プロフィール  
引用付きで返信する  
投稿記事Posted: 2023年3月27日(月) 21:02 
オフライン

登録日時: 2023年3月23日(木) 09:44
記事: 9
お住まい: 富山
 Earlgreytea様、

 ハングアップは、ゲームオーバー画面でエンターキーを入れると起こります。マウスもしばらく受け付けなくなって、フリーズします。タスクバーは動くので、そこからブラウザを閉じてます。
 また、エイリアンのおとす爆弾の画像や、途中で上空に現れるUFOの画像が映りません。しかし、ローカル環境では画像は映ります。ただし、ローカルでもゲームオーバー画面のキーイベントは働きません。
 僕のパソコンは、メモリが16GBしかないので、たぶんそれが原因かと思います。
 特に、Earlgreytea様のパソコンで問題なく動くのであれば、それは間違いないかと思われます。
 デバッガーを使ってみてもいいですが、僕は専門がプログラムではないので、すぐには対処できません。まあ、暇をみておいおいやっていこうかと考えております。

_________________
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.0 Safari/605.1.15


通報する
ページトップ
 プロフィール  
引用付きで返信する  
投稿記事Posted: 2023年3月27日(月) 22:59 
オフライン

登録日時: 2014年2月22日(土) 00:59
記事: 4084
ぶれこみ さんが書きました:
ハングアップは、ゲームオーバー画面でエンターキーを入れると起こります。マウスもしばらく受け付けなくなって、フリーズします。

了解です。
しかし当方の環境では普通にプレイしてゲームオーバー→エンターキーでリトライのシーケンスを数回続けてみましたが、そのような状況は発生しておりません。
Firefoxのプロファイル環境に問題があるのではないでしょうか。
下記を参考に新しいプロファイルで動作確認してみてください。
新しいプロファイルで Firefox の動作確認する方法

ぶれこみ さんが書きました:
また、エイリアンのおとす爆弾の画像や、途中で上空に現れるUFOの画像が映りません。

それに関しては当方では「正解」がわからないため関知しないことにします。
Chrome と比較してみましたが、違いがわかりません。

ぶれこみ さんが書きました:
僕のパソコンは、メモリが16GBしかないので、たぶんそれが原因かと思います。

それは関係ないかと思います。
Firefox の場合、タスクマネージャーの物理メモリ使用量の表示で最大でも480MB位です。
それに対して Chromeでは、2周目以降では500MBを超えてます。
いずれにしましても、メモリー不足でどうにかなるような兆候は見られませんでした。
数周のプレイでは不十分でしょうか。

当方の環境では、ご提示のブラウザーゲームの動作に関して、「Windows のFirefoxがうまく動作しない」という状況は起きていません。
むしろ Firefox の方がパフォーマンスがよいです。
そろそろ、嫌疑を晴らしたいところです。

_________________
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/111.0


通報する
ページトップ
 プロフィール  
引用付きで返信する  
投稿記事Posted: 2023年3月27日(月) 23:38 
Nightly113.0a1 Windows10 で試しましたが
ハングアップしますねぇ
ちなみに 取れたgecko profile logは https://share.firefox.dev/3lOBB4r

Bugzilla ( https://bugzilla.mozilla.org/ )にバグ報告上げるべきやね

_________________
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:102.0) Gecko/20100101 Firefox/102.0


通報する
ページトップ
  
引用付きで返信する  
投稿記事Posted: 2023年3月27日(月) 23:48 
あぁ log見るとa11yがらみのよう.
当方ATOKインサイト有効にしているからこれに引っかかるみたいだ.

about:config から accessibility.force_disabled を 1 にしてやれば ハングしないようだ.

_________________
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:102.0) Gecko/20100101 Firefox/102.0


通報する
ページトップ
  
引用付きで返信する  
投稿記事Posted: 2023年3月28日(火) 00:06 
オフライン

登録日時: 2023年3月23日(木) 09:44
記事: 9
お住まい: 富山
 Earlgreytea様、

 お返事ありがとうございます。
 新しいプロファイルでやってみましたが、UFOは映るようになりましたが、エイリアンをやっつけたときの爆発画像が映りません。また、ゲームオーバー画面からのキーイベントも、動かずにハングアップします。
 ああああ様のように、環境によっては起こらないことが、ハングアップするパソコンがあるということは、やはりパソコンの性能次第で起こったり起こらなかったりするのではないでしょうか。
 報告は、よくわかりませんが、とりあえず試みてみます。
 お二方、アドバイスありがとうございます。

_________________
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.0 Safari/605.1.15


最後に編集したユーザー ぶれこみ [ 2023年3月28日(火) 00:22 ], 累計 1 回

通報する
ページトップ
 プロフィール  
引用付きで返信する  
投稿記事Posted: 2023年3月28日(火) 00:15 
オフライン

登録日時: 2023年3月23日(木) 09:44
記事: 9
お住まい: 富山
 ああああ様、

 ATOKが関係しているのですか?
 とりあえず、言われたとおりに、about:configから、設定を変えてみました。すると、爆発画像もUFOも、リトライのキーイベントも、すべてうまく行きました。
 ありがとうございます❗
 しかし、このaccessibility force_disableというのは、なんのことなんでしょうか?
 また、ATOKがどんな悪影響を及ぼしているのでしょうか?
 よろしかったら、ついでに教えていただけたら、幸いです。

 ああああ様、問題解決して戴き、まことにありがとうございます❗

_________________
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.0 Safari/605.1.15


通報する
ページトップ
 プロフィール  
引用付きで返信する  
投稿記事Posted: 2023年3月28日(火) 00:26 
オフライン

登録日時: 2014年2月22日(土) 00:59
記事: 4084
ああああ さんが書きました:
あぁ log見るとa11yがらみのよう.
当方ATOKインサイト有効にしているからこれに引っかかるみたいだ.

about:config から accessibility.force_disabled を 1 にしてやれば ハングしないようだ.

情報ありがとうございます。

ぶれこみ さんが書きました:
あああああさんのように、環境によっては起こらないことが、ハングアップするパソコンがあるということは、やはりパソコンの性能次第で起こったり起こらなかったりするのではないでしょうか。

ちょっと違います。
パソコンの性能ではなく、Firefox でアクセシビリティサービス機能が有効になっている場合に発生するという可能性が出てきました。
あああああ さんの場合は、日本語入力でATOKを使用していて「ATOKインサイト」という機能が「アクセシビリティサービス」機能でFirefoxにアクセスするため、それが引き金になっているのではないかということです。
例えば画面読み上げソフト(スクリーンリーダー)のようなものを使用されていないでしょうか。

ぶれこみ さんが書きました:
とりあえず、言われたとおりに、about:configから、設定を変えてみました。すると、爆発画像もUFOも、リトライのキーイベントも、すべてうまく行きました。

そうすると、アクセシビリティサービス機能が有効な場合に発生する問題ということになりますね。

アクセシビリティサービスインジケーターとは? | Firefox ヘルプ
Firefox のアクセシビリティ機能 | Firefox ヘルプ

【追記】
試しに Windows でハイコントラストモードをオンにしたところ、Firefox のアクセシビリティが有効となり、ゲームはハングアップはしませんでしたが動作はかなり重く、スペースキーの連打やカーソールキーの反応が悪くなり、メモリー使用は2GBを超えました。

_________________
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/111.0


通報する
ページトップ
 プロフィール  
引用付きで返信する  
投稿記事Posted: 2023年3月28日(火) 14:58 
オフライン

登録日時: 2023年3月23日(木) 09:44
記事: 9
お住まい: 富山
 EarlgreyTea様

 アクセシビリティサービスにより、他のソフトの制御が入って動きづらくなるという点、おおまかに理解致しました。僕は身障者ではないですが、ATOKを使っているために、このような事態に陥ったことと思われます。原因が究明できてありがたかったです。
 身障者のユーザーは少ないながらもいると思いますが、このような方々には別のブラウザで対処して戴くようにしようと思います。また、ATOKユーザーはかなり多いと思うので、その場合には、Firefoxのaccessibility force_disableの変更を案内した方が良いのか、すこし考案中です。about:configにて設定をいじるのは上級者向けとありますので、万が一トラブルが起きたときには責任を取れないために、ATOKユーザーには、やはり別のブラウザを案内した方が良いのではないかとも考えるからです。
 いずれにせよ、原因が判ってすっきりしました。
 EarlgreyTea様、ああああ様、どうもありがとう御座いました。

_________________
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/111.0


通報する
ページトップ
 プロフィール  
引用付きで返信する  
期間内表示:  ソート  
新しいトピックを投稿する トピックへ返信する  [ 14 件の記事 ] 

All times are UTC + 9 hours


オンラインデータ

このフォーラムを閲覧中のユーザー: なし & ゲスト[36人]


トピック投稿:  可
返信投稿:  可
記事編集: 不可
記事削除: 不可
ファイル添付: 不可

検索:
ページ移動:  
Powered by MozillaZine.jp® Forum Software © phpBB Group , Almsamim WYSIWYG
Japanese translation principally by ocean