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

前提・実現したいこと

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

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

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

該当のソースコード

---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/ツールのバージョンなど）

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

行動規範の内容に同意します

回答1件

ベストアンサー

２つのグローバル変数を追加します。

略
        var ctx, engine, timer, offset = 0, catcher, score = 25, isMouseDown = false;
        var isQnoirPaused = false;    // ゲームオーバーになって停止中かどうかのフラグ
        var afterQnoirReset = false;  // ゲームオーバーからリセットした直後かどうかのフラグ
以下略

　

tick()関数内では、停止中に再描画しないようにしておきます。

        function tick() {
            if(!isQnoirPaused) {
                if (isMouseDown) {
                    offset = Math.min(offset + 5, 160);
                }
                engine.step(0.01);//物理エンジンの時刻を進める
                repaint();        //再描画
            }
        }

　

mymousedown()関数に、ゲームオーバー時の判定
及び、ゲームオーバー復帰直後に動作しないようなギミックを仕込みます。

        function mymousedown(e) {
            if(afterQnoirReset) return; // ゲームオーバー復帰後はバネを動かさない
            //　スコアがゼロになったらゲームオーバー画面を表示
            if (score <= 0) {
                if (!isQnoirPaused) {
                    isQnoirPaused = true; // フラグ反転
                    ctx.drawImage(gover, 0, -100, 800,1000);
                }else{
                    // ゲームオーバーから復帰したらスコアを戻してゲーム再開する。
                    isQnoirPaused = false;
                    score = 25;
                    afterQnoirReset = true;
                    repaint();
                    return;
                }
            }
            isMouseDown = true;
        }

　

mymouseup()関数にも、ゲームオーバー復帰直後に動作しないようにギミックを仕込んでおきます。

        //ボール,スコア設定
        function mymouseup(e) {
            // ゲームオーバー復帰直後にマウスアップされても玉が発射できないようにする
            if (afterQnoirReset){
                afterQnoirReset = false;
                return;
            }
            score--;
            isMouseDown = false;
            var r = new CircleEntity(475, 400, 18, BodyDynamic);
　　　　　　以下略

投稿2021/04/18 10:20