質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.39%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

6回答

1567閲覧

setIntervalがバックグラウンドで停止するとオンラインゲームが成り立たない気がするが違うか?

ghjuirrt2

総合スコア3

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

2クリップ

投稿2024/08/23 22:10

別タブを見ていたりスリープ画面になった場合に
setIntervalはバッグラウンドで停止する
つまりゲームの整合性に支障があると思いますが、
JSでオンラインゲームは成立させることは難しいということなのでしょうか
WebsocketとsetIntervalを使ってますがsetIntervalはどうしても監視処理に必要です。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答6

0

setIntervalはバッグラウンドで停止する
つまりゲームの整合性に支障があると思いますが、

単に、「それで整合しなくなる作り方が間違っている」だけではないでしょうか。

投稿2024/08/24 01:04

maisumakun

総合スコア145698

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ghjuirrt2

2024/08/24 01:23

ではバックグランドになってる状態でクライアントのDOMを監視する方法を提示いただけますでしょうか
ghjuirrt2

2024/08/24 01:24

代替案でもかまいません。 やりたいことはDOMの監視です。外せません。
ghjuirrt2

2024/08/24 01:30 編集

「それで整合しなくなる作り方が間違っている」 あなたはオンラインゲームを作ったことはありますか? まさかそれもなく「それで整合しなくなる作り方が間違っている」と申しているのでしょうか
ghjuirrt2

2024/08/24 01:35 編集

サーバー側のデータはクライアントに依存しない 当たり前ですが、サーバー側のデータはしっかり整合しています。 クライアントの描画に関してはサーバー側のデータうんぬんで片付けられない部分があります
ghjuirrt2

2024/08/24 01:34

setIntervalは使うべきではない ならわかりますが 「それで整合しなくなる作り方が間違っている」 とはどういうことでしょう
ghjuirrt2

2024/08/24 01:53 編集

まさか知りもしない分野に対して 軽はずみに「それで整合しなくなる作り方が間違っている」 なんて言い捨てておさらばする人間ではないですよね?
ghjuirrt2

2024/08/24 01:54

「それで整合しなくなる作り方が間違っている」 これを回答にする 建設的でも何でもない、何のための回答なのか意味がわからない
otn

2024/08/24 14:05

30分程度、コメントの回答が無いと切れるというのでは、こういう非同期の質問サイトの利用は無理では?1-2日は普通です。1週間でも珍しくない。 すぐ反応が来ないとイヤだというのなら、リアルタイムチャット等での質問サイトを探すしかないかと思います。あるのかどうか知りませんが。
maisumakun

2024/08/24 23:06 編集

> やりたいことはDOMの監視です。 なんのために必要なのでしょうか。バックグラウンドにいるうちにはイベントも発生しませんし、サーバサイドのデータを正としてDOMには一方的に書き出せばいいだけで、結果としてのDOMを監視する必要性が把握できていないです。
ghjuirrt2

2024/08/25 00:02 編集

DOMを監視する必要がなければタブ復帰やスリープからの復帰時にリアルタイムな描画できない=ゲームとしては成立できないってことです 大丈夫ですか?
ghjuirrt2

2024/08/25 00:09

>30分程度、コメントの回答が無いと切れるというのでは、こういう非同期の質問サイトの利用は無理では?1-2日は普通です。1週間でも珍しくない。 すぐ反応が来ないとイヤだというのなら、リアルタイムチャット等での質問サイトを探すしかないかと思います。あるのかどうか知りませんが。 で?だから? あなたに関係ない、そして答えと関係ない、意味不明な指摘だけする? その意味ってなんでしょう
fiveHundred

2024/08/25 01:57 編集

通りすがりの私からすると過剰な連投です。 それだから、otnさんの意見が出ているのだろうと思います。 また「大丈夫ですか?」「ポンコツ」は言い過ぎではないかと思います。 不適切な回答とはいえ、回答者を馬鹿にする行為は許されるものではありません。 通報レベルの問題です。
fiveHundred

2024/08/25 02:13

あと、JavaScriptはあまり得意ではないですが、「再表示(など)をしたタイミングで実行されるコールバック関数で、setIntervalを再度実行し直せばいい」と思うのですが、どうなんですかね?
maisumakun

2024/08/25 13:51 編集

> DOMを監視する必要がなければタブ復帰やスリープからの復帰時にリアルタイムな描画できない=ゲームとしては成立できないってことです 単に、描画直前のタイミングをrequestAnimationFrameで拾う、で問題ないのではないでしょうか。バックグラウンドに居続ける間に監視する必要はなくなります。
maisumakun

2024/08/25 13:47

> 建設的でも何でもない、何のための回答なのか意味がわからない 伝わりにくかったのかもしれませんが、「もっと手前へ戻って必要性を見直してください」、という意味合いの回答です。初期の質問では情報が少なすぎてなんのために監視したいかすら自明ではなかったので、掘り返して初めて意味のある回答が可能となりました。
guest

0

JavaScriptでちょっとした自作のゲームを作ったことがあるので、その経験から、ghjuirrt2さんの質問の意図を下記のように推測しました。

例えば秒速2ピクセルでキャラクターが移動するとして(ここでsetIntervalrequestAnimationFrameを使い、要素のstyle.topstyle.leftに座標の数値を代入する)、そのキャラクターが描画されているタブがアクティブであれば、10秒後には20ピクセル移動しているのに対し、そのタブが非アクティブの場合には、10秒後にタブをアクティブにしても20ピクセル先に移動していない。
そのようなことがないように、タブがアクティブか非アクティブかを問わずに10秒後には20ピクセル先に移動していてほしい。

であれば、setIntervalrequestAnimationFrameを使うのはいいのですが、時間の経過を、第二引数で指定した時間に依存しないようにする必要があります。

先に良くない例を示します。

JavaScript

1(function () { 2 let x = 0; 3 setInterval(function move() { 4 character.style.left = x + "px"; 5 x += 2; 6 heavyFunction(); 7 }, 1000); 8})();

上記のようなコードでは10秒後に20ピクセル移動していることが保証されません。heavyFunctionが処理に時間がかかる関数である場合、次にmove関数が実行されるのが2秒後、3秒後になることもあるからです。第二引数に1000と指定して保証されるのは1秒以上経過してから実行することのみです。

次に、時間の経過を、第二引数で指定した時間に依存しないようにした例を示します。

JavaScript

1(function () { 2 let startTime = new Date().getTime(); 3 setInterval(function move() { 4 let x = Math.floor((new Date().getTime() - startTime) / 1000) * 2 5 character.style.left = x + "px"; 6 heavyFunction(); 7 }, 1000); 8})();

上記の例では、move関数の中で改めてnew Date().getTime() - startTimeによって経過時間を計算し、経過時間に基づいた移動量を求めたうえでleftプロパティに代入しているため、heavyFunctionで時間がかかったとしても、途中の描画が省略されるだけで、経過時間に対する移動量は保証されます。

後は必要に応じてサーバーが保持している座標とずれがないか確認する処理や、サーバーが保持している座標の情報を更新する処理を入れることになります。

DOMという言葉が出てきたのでstyle.leftを使って説明しましたが、canvasで描画する場合でも基本的な考え方は同じです。

投稿2024/08/30 07:35

_peanuts_

総合スコア130

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

アプリがバックグラウンドになった場合以外にも、通信環境の問題などで通信がサーバーに来ないことはありえるので、このあたりは想定した処理にすべきでしょう。

定期的にクライアントとサーバーの状態が一致しているかチェックし、異なっていればサーバーのデータを元にクライアントにデータを同期、再レンダリングする処理をいれる必要があるのかなと思います。

投稿2024/08/24 06:23

Eggpan

総合スコア3198

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

もしかしたら質問自体がなにか誤解を産むような内容だったりしませんか?

個人的に思ったのはゲームなんて電源切ったら終わるのは当然だし、プロセスが終了して処理を続行できなかったら負けってことに当然なるのでは?と思いました。
ゲームオタクでは無いので常識が分からないのですが、スマブラなどやっててもホームに戻ったら対戦終了しません...?

多分そういうことを聞きたい訳じゃないとは思うのですが、こういう風にしか読解出来なかったです。

うーん。ほかの意図としてはjsでタブのライフサイクルを取得できないか?みたいな意図だったりするんでしょうか。

スマホとかだと、アプリを開いた時と閉じた時にイベントが発生するのでそのタイミングでログインログアウトみたいなことができ、MMOみたいな?ずっとログインし続ける系のゲーム(オートセーブ的な?よくしらんが)とかも上手く制御できるかと思いますが。そういう話?

ほかの回答で「作り方が間違ってる」というのがありますが、これは決め付けでしかないし、回答として意味を成してない(作ってる本人はそれがミスかどうかなど分かるはずがない)ので、通報でもして溜飲を下げるのがいいと思います。
反応しすぎて治安悪くなるのもアレかなと思います^^;

投稿2024/08/24 09:23

utm.

総合スコア119

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ghjuirrt2

2024/08/25 00:06

例えば10秒別タブを見たらゲーム終了と判定することはできます しかしながら、そのような仕様は好ましくありません ゲーム終了と判断するタイミングはそれぞれの作り手の判断となりますが、 タブ復帰したとしてそのタブが復帰したときにゲーム継続中と判断したとして setIntervalが動かないと描画されないってことです 昔はこの仕様ではなかったのですが、リアルタイムに描画するゲームとか作れませんよねって話です
utm.

2024/08/25 03:46

任天堂のオンラインゲームってそういう仕様なので仕様としては有り得るのでは? 何が好ましいかは質問文には記載されてないと思うのですが
utm.

2024/08/25 04:05

setInterval云々じゃなくてちゃんと質問内容をした方がいいのでは?
maisumakun

2024/08/25 14:20 編集

> ほかの回答で「作り方が間違ってる」というのがありますが、これは決め付けでしかないし、回答として意味を成してない(作ってる本人はそれがミスかどうかなど分かるはずがない)ので、 たしかに言葉が足りなかったですね。「それを必要とする事情を考慮したうえで代替策を検討してください」のように、もう少し展開していうべきでした。 (仕様書の隅をつつくような、実用性と無縁な質問もありえますが、多くの質問は「作りたいもの」「したいこと」がある状態のものです。「XY問題」なんて言葉もあるように、適切でない選択肢について質問を投げかけた場合には、正面突破するより、引き返してして道を選び直すことを進言するほうがよりよい回答となりうると考えています。それこそ、「ライセンス問題」や「Appleの審査で却下されることが明らかなアプリ」など、「作るものを変える/諦める」以外の選択肢がない場合も存在します)
utm.

2024/08/27 14:36

>質問投稿者に対して 質問者が悪態を着くことがおかしいかもですね。 他の人の質問を開いて回答しようとした時に、 このサイトは初心者の方も質問しますから、コードまるまる書けば伝わるだろうみたいな、気持ちで頼まれてもないのに書くとかして、 この投稿者みたいに怒ってくる相手だったらどうしよう?という先入観が産まれてしまって安易に人助け出来なくなってしまいました。 回答に対する返信なので、配慮にかける回答をしている人ももちろん悪いですが、正直、回答する立場の自分としてはかなりショッキングな出来事ですね。 と、不満を吐露して見た。 >maisumakunに対して 質問者は分からないながらも試行錯誤したり考えながら、真剣に考えても分からなくて、それで頼ってきているだろうに、頭から作り方が間違っているだけなどと否定するのはあまりにも酷いと思いますが。 間違ってるって物言いはすごく上から目線な上に無責任な発言だと思いますけどね。 もしあなたがそれを良い回答になっていると考えるなら心から軽蔑します。 あなたが質問者の立場だったら、あなたの回答はいいものだと感じるんですかね。 (あなたが意図するニュアンスと私が読解した時のニュアンスが異なっているのかもしれないですが。) うーん。いくら考えても自分なら、こんなこと言われたら不快に思いますね。もし知り合いに言われても不快だと思います。知らん人に言われたら二度と関わりたくないと思うでしょうね。 まあこんなこと言う人間を見たことがないですが。
maisumakun

2024/08/28 07:28 編集

> 質問者は分からないながらも試行錯誤したり考えながら、真剣に考えても分からなくて、それで頼ってきているだろうに、頭から作り方が間違っているだけなどと否定するのはあまりにも酷いと思いますが。 試行錯誤の挙げ句、来るべきないところに来た場合には、「こちらは来るところではない」と明確に宣言するのが親切だと考えています。セキュリティにまつわるものなど、問答無用に作ってしまえばさらなる危険を呼び込むものもありえますし、そこで「初心者だから」という免責が通らないことも考えられます。
utm.

2024/08/28 07:30

そうなんですね。心から軽蔑します。
rthhhrhrthtre

2024/09/06 01:44

>試行錯誤の挙げ句、来るべきないところに来た場合には、「こちらは来るところではない」と明確に宣言するのが親切だと考えています。セキュリティにまつわるものなど、問答無用に作ってしまえばさらなる危険を呼び込むものもありえますし、そこで「初心者だから」という免責が通らないことも考えられます。 上から目線過ぎてやばすぎ。。。何様って感じ。セキュリティの神様?プログラミングの神様?のつもりなんでしょうかね。。。
maisumakun

2024/09/06 06:23

> 上から目線過ぎてやばすぎ。。。 えっと、その状況でも「質問者の意図に沿って、危ない道を突き進むべきだ」というのでしょうか。そうでなければ、どのように回答するのがふさわしいと考えているかご提示いただけましたら幸いです。
fiveHundred

2024/09/06 06:32

> 上から目線過ぎてやばすぎ。。。何様って感じ。セキュリティの神様?プログラミングの神様?のつもりなんでしょうかね。。。 上から目線過ぎてやばすぎ。。。何様って感じ。お客様は神様?のつもりなんでしょうかね。。。
guest

0

[香車]東上☆Aho(英帆)☆海美は、複数のゲームを立ち上げた状態で、生配信したことがある「
一番手前じゃないと止まってしまうゲームあるんだけれど、そういうのは、『ながらプレーをやってほしくない』という意思の表れだと思ってました。なので『

別タブを見ていたりスリープ画面になった場合に setInterval はバッグラウンドで停止する。
つまりゲームの整合性に支障があると思いますが...

』というのが、理解できないので『

単に、「それで整合しなくなる作り方が間違っている」だけではないでしょうか。

』に同意します。

投稿2024/09/14 17:20

umimi

総合スコア439

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

質問者さんの意図がわからないところを回答すると喧嘩腰なので回答しづらいですが、たとえばwindowをblurしたらオーバーレイしてユーザーに処理を隠すとかやり方次第では?

html

1<style> 2#overlay{ 3outline:none; 4border:solid 0px; 5background-Color:lightgray; 6} 7#overlay::backdrop{ 8background-Color:lightgray; 9 10} 11</style> 12<script> 13window.addEventListener('blur',()=>{ 14 overlay.showModal(); 15 overlay.addEventListener('click',()=>{ 16 overlay.close(); 17 }); 18}); 19</script> 20<dialog id="overlay"> 21フォーカスが外れました。クリックしてください 22</dialog>

投稿2024/08/26 01:22

yambejp

総合スコア115942

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.39%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問