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

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

新規登録して質問してみよう
ただいま回答率
86.12%
並列処理

複数の計算が同時に実行される手法

バックグラウンド処理

バックグラウンド処理とは、マルチタスク環境において、ユーザーに対して前面に表示させている処理の裏側で実行させる処理のことを呼びます。バックグラウンド処理を行う事によって、ユーザーが他の作業に携わることが可能となります。

非同期処理

非同期処理とは一部のコードを別々のスレッドで実行させる手法です。アプリケーションのパフォーマンスを向上させる目的でこの手法を用います。

例外処理

例外処理(Exception handling)とは、プログラム実行中に異常が発生した場合、通常フローから外れ、例外として別の処理を行うようにデザインされたプログラミング言語構造です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

解決済

HTML上で「スコアが0になった時、画像を表示」する処理をしたい

mutuki
mutuki

総合スコア3

並列処理

複数の計算が同時に実行される手法

バックグラウンド処理

バックグラウンド処理とは、マルチタスク環境において、ユーザーに対して前面に表示させている処理の裏側で実行させる処理のことを呼びます。バックグラウンド処理を行う事によって、ユーザーが他の作業に携わることが可能となります。

非同期処理

非同期処理とは一部のコードを別々のスレッドで実行させる手法です。アプリケーションのパフォーマンスを向上させる目的でこの手法を用います。

例外処理

例外処理(Exception handling)とは、プログラム実行中に異常が発生した場合、通常フローから外れ、例外として別の処理を行うようにデザインされたプログラミング言語構造です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

1回答

0リアクション

0クリップ

890閲覧

投稿2021/04/18 08:38

前提・実現したいこと

描画と画像が混在するゲーム画面があり、スコアが0になったタイミングで、このゲーム画面の描画等の上に重なるようにして終了を伝える画像を表示したい。
また、再読み込みなどのアクションを取るまで終了の画像を表示し続けたい。

発生している問題・エラーメッセージ

スコアが0になったとき、一瞬しか画像が表示されずに消えてしまう。

該当のソースコード

---javascript

<!DOCTYPE html> <html> <head> <title>SmartBall</title> <meta charset="UTF-8"> <style> #canvas { width:800px; height:600px; touch-action: none; } </style> <script src="Tiny2D.js"></script> <script> "use strict"; var ctx,engine,timer,offset = 0,catcher,score = 25,isMouseDown = false;
var walls = [ [-100, -100, 100, 800], [-100, -100, 800, 100], [ 498, -100, 3 , 800], [ 434, 100, 3 , 800] ]; var lines = [ [425, 0, 500, 110], ]; var pins = [ [30, 140], [150, 140], [280, 140], [390, 140], [90, 220], [215, 220], [340, 220], [30, 320], [150, 320], [280, 320], [390, 320], ]; function init(){ //エンジン初期化&イベントハンドラ設定 engine = new Engine(-100, -100, 700, 800, 0, 15); var canvas = document.getElementById("canvas"); canvas.onmousedown = mymousedown; canvas.onmouseup = mymouseup; canvas.addEventListener('touchstart',mymousedown); canvas.addEventListener('touchend',mymouseup); canvas.oncontextmenu = function (e) { e.preventDefault(); }; //壁 walls.forEach(function (w) { r = new RectangleEntity(w[0],w[1],w[2],w[3]); r.color = "yellow"; engine.entities.push(r); }); lines.forEach(function (w) { r = new LineEntity(w[0],w[1],w[2],w[3],0.7); r.color = "gyay"; engine.entities.push(r); }); //ピン pins.forEach(function (w) { r = new CircleEntity(w[0],w[1], 5, BodyStatic, 1); r.color = "yellow"; engine.entities.push(r); }); for (var i = 0 ;i < 0;i++){ for(var j = 0;j < 0;j++){ var r = new RectangleEntity(j,i, 1, 1); r.color = "white"; engine.entities.push(r); } } //ホール catcher = new CircleEntity(200, 550, 20, BodyStatic, 1); catcher.color = "gold"; catcher.sign = 1; engine.entities.push(catcher); //Canvas、Timer等の初期化 ctx = canvas.getContext("2d"); ctx.font = "20pt Arial"; ctx.strokeStyle = "gold"; timer = setInterval(tick,50); //イラスト呼び込み var haikei = document.getElementById("haikei"); var bane = document.getElementById("bane"); var kabe2 = document.getElementById("kabe2"); var gover = document.getElementById("gover"); } function tick(){ if (isMouseDown){ offset = Math.min(offset + 5,160); } engine.step(0.01);//物理エンジンの時刻を進める repaint(); //再描画 } function mymousedown(e){ isMouseDown = true; } //ボール,スコア設定 function mymouseup(e){ score--; if (score <= 0){ ctx.drawImage(gover,0,0); } isMouseDown = false; var r = new CircleEntity(475, 400, 18, BodyDynamic); r.color = "yellow"; r.velocity.y = -offset / 5; r.onhit = function (me,peer){ if (peer == catcher){ engine.entities = engine.entities.filter(function(e){ return e != me; }); score += 5; } } offset = 0; engine.entities.push(r); } function repaint(){ //背景クリア ctx.drawImage(haikei,1,0); ctx.drawImage(kabe2,8,-200,800,1000); //ボール、壁の描画 for(var i = 0;i < engine.entities.length;i++){ var e = engine.entities[i]; ctx.fillStyle = e.color; switch (e.shape) { case ShapeCircle: ctx.beginPath(); ctx.arc(e.x, e.y, e.radius, 0, Math.PI * 2); ctx.closePath(); ctx.fill(); break; case ShapeRectangle: ctx.fillRect(e.x, e.y, e.w, e.h); break; case ShapeLine: ctx.lineWidth = 5; ctx.beginPath(); ctx.moveTo(e.x0, e.y0); ctx.lineTo(e.x1, e.y1); ctx.stroke(); break; } } //スコア、ボール、バネ初期位置 ctx.fillText( + score, 550, 180); ctx.fillStyle = "yellow"; ctx.beginPath(); ctx.arc(475, 425 + offset, 18, 0, Math.PI * 2); ctx.closePath(); ctx.fill(); ctx.drawImage(bane,5,-400 + offset,800,1000); } function reset(){ // reloadメソッドによりページをリロード http://midoku.net/html5-audio/ window.location.reload(); } //BGM https://www.pazru.net/html5/Video/040.html </script>
</head> <body onload="init()"> <canvas id="canvas" width="800" height="600"></canvas> <button onclick="reset()">リセット</button> <audio id="bgm" preload="auto" autoplay loop>ボリューム <source src="bgm.mp3"> </audio> <img id="haikei" src="haikei.png" style="display:none" /> <img id="bane" src="bane.png" style="display:none" /> <img id="kabe2" src="kabe2.png" style="display:none" /> <img id="gover" src="gover.png" style="display:none" /> </body> </html> ---

試したこと

ここに問題に対して試したことを記載してください。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

まだ回答がついていません

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

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

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

同じタグがついた質問を見る

並列処理

複数の計算が同時に実行される手法

バックグラウンド処理

バックグラウンド処理とは、マルチタスク環境において、ユーザーに対して前面に表示させている処理の裏側で実行させる処理のことを呼びます。バックグラウンド処理を行う事によって、ユーザーが他の作業に携わることが可能となります。

非同期処理

非同期処理とは一部のコードを別々のスレッドで実行させる手法です。アプリケーションのパフォーマンスを向上させる目的でこの手法を用います。

例外処理

例外処理(Exception handling)とは、プログラム実行中に異常が発生した場合、通常フローから外れ、例外として別の処理を行うようにデザインされたプログラミング言語構造です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。