HTMLで、ボールが当たったらそのボールを消す処理を行うCircleEntityを複製したい

前提・実現したいこと

HTMLでパチンコ型のゲームを作っています。
使うボールには「catcherオブジェクト(ホール)に接触した時、自身を消す」プログラムを持っています。
このcatcherオブジェクトを、任意の位置に複数描画したいです。

該当のソースコード

Javascript
1<!DOCTYPE html>
2<html>
3<head>
4	<title>SmartBall</title>
5	<meta charset="UTF-8">
6	<style>
7		#canvas {
8			width:800px; height:600px;
9			touch-action: none;
10		}
11	</style>
12	<script src="Tiny2D.js"></script>
13	<script>
14		"use strict";
15		var ctx,engine,timer,offset = 0,catcher,score = 25,isMouseDown = false;
16
17		var walls = [
18			[-100, -100, 100, 800],
19			[-100, -100, 800, 100],
20			[ 499, -100,  1 , 800],
21			[ 434,  80 ,  5 , 800]
22		];
23
24		var lines = [
25			[150, 0, 0, 150],
26			[450, 0, 500, 70],
27		];
28
29		var pins = [
30			[50, 200],
31			[150, 200],
32		];
33
34		function init(){
35			//エンジン初期化&イベントハンドラ設定
36			engine = new Engine(-100, -100, 700, 800, 0, 9.8);
37			var canvas = document.getElementById("canvas");
38			canvas.onmousedown = mymousedown;
39			canvas.onmouseup = mymouseup;
40			canvas.addEventListener('touchstart',mymousedown);
41			canvas.addEventListener('touchend',mymouseup);
42			canvas.oncontextmenu = function (e) { e.preventDefault(); };
43
44			//壁
45			walls.forEach(function (w) {
46				r = new RectangleEntity(w[0],w[1],w[2],w[3]);
47				r.color = "yellow";
48				engine.entities.push(r);
49			});
50
51			lines.forEach(function (w) {
52				r = new LineEntity(w[0],w[1],w[2],w[3], 0.5);
53				r.color = "gyay";
54				engine.entities.push(r);
55			});
56
57			//ピン
58			pins.forEach(function (w) {
59				r = new CircleEntity(w[0],w[1], 5, BodyStatic, 1);
60				r.color = "yellow";
61				engine.entities.push(r);
62			});
63			
64			for (var i = 0;i < 1;i++){
65				for(var j = 0;j < 1;j++){
66					var x = (j * 60 + 60) - 45 * (i % 2);
67					var r = new CircleEntity(x, i * 60 + 200, 5, BodyStatic, 1);
68					r.color = "white";
69					engine.entities.push(r);
70				}
71			}
72
73			//ホール
74			catcher = new CircleEntity(200, 50, 20, BodyStatic, 1);
75			catcher = new CircleEntity(200, 280, 20, BodyStatic, 1);
76			catcher = new CircleEntity(200, 320, 20, BodyStatic, 1);
77			catcher = new CircleEntity(200, 450, 20, BodyStatic, 1);
78			catcher.color = "gold";
79			catcher.sign = 1;
80			engine.entities.push(catcher);
81
82			//Canvas、Timer等の初期化
83			ctx = canvas.getContext("2d");
84			ctx.font = "20pt Arial";
85			ctx.strokeStyle = "gold";
86			timer = setInterval(tick,50);
87
88			//イラスト呼び込み
89			var haikei = document.getElementById("haikei");
90			var bane = document.getElementById("bane");
91			var kabe1 = document.getElementById("kabe1");
92			var kabe2 = document.getElementById("kabe2");
93		}
94
95		function tick(){
96			if (isMouseDown){
97				offset = Math.min(offset + 5,160);
98			}
99			engine.step(0.01);//物理エンジンの時刻を進める
100			repaint();        //再描画
101		}
102
103		function mymousedown(e){
104			isMouseDown = true;
105		}
106
107		//ボール,スコア設定
108		function mymouseup(e){
109			isMouseDown = false;
110			var r = new CircleEntity(475, 400, 18, BodyDynamic);
111			r.color = "yellow";
112			r.velocity.y = -offset / 5;
113			r.onhit = function (me,peer){
114				if (peer == catcher){
115					engine.entities = engine.entities.filter(function(e){
116						return e != me;
117					});
118					score += 5;
119				}
120			}
121
122			offset = 0;
123			engine.entities.push(r);
124		}
125
126		function repaint(){
127			//背景クリア
128			ctx.drawImage(haikei,1,0);
129			ctx.drawImage(kabe1,0,0);
130			ctx.drawImage(kabe2,8,0);
131
132			//ボール、壁の描画
133			for(var i = 0;i < engine.entities.length;i++){
134				var e = engine.entities[i];
135				ctx.fillStyle = e.color;
136				switch (e.shape) {
137					case ShapeCircle:
138						ctx.beginPath();
139						ctx.arc(e.x, e.y, e.radius, 0, Math.PI * 2);
140						ctx.closePath();
141						ctx.fill();
142						break;
143					case ShapeRectangle:
144						ctx.fillRect(e.x, e.y, e.w, e.h);
145						break;
146					case ShapeLine:
147						ctx.beginPath();
148						ctx.moveTo(e.x0, e.y0);
149						ctx.lineTo(e.x1, e.y1);
150						ctx.stroke();
151						break;
152				}
153			}
154
155			//スコア、ボール、バネ初期位置
156			ctx.fillText( + score, 550, 180);
157			ctx.fillStyle = "yellow";
158			ctx.beginPath();
159			ctx.arc(475, 425 + offset, 18, 0, Math.PI * 2);
160			ctx.closePath();
161			ctx.fill();
162
163			ctx.drawImage(bane,5,-400 + offset,800,1000);
164		}
165	</script>
166</head>
167<body onload="init()">
168	<canvas id="canvas" width="800" height="600"></canvas>
169	<img id="haikei" src="haikei.png" style="display:none" />
170	<img id="bane"   src="bane.png"   style="display:none" />
171	<img id="kabe1"  src="kabe1.png"  style="display:none" />
172	<img id="kabe2"  src="kabe2.png"  style="display:none" />
173</body>
174</html>
175

試したこと

上記では、engine.entities.push(catcher);に対して直近のcatcherのみが描画されました。
配列も試みましたが描画はできるものの、ボールが当たっても消えず、周囲の壁と同じように弾かれました。

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

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

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

回答1件

ベストアンサー

catchersという配列に、各catcherを格納します。
その後forEachを使って各catcherに色等を設定しますが、そのときに合わせてisCatcherというプロパティを付加します。
（isCatcherという名前は、後述の部分と合っていれば、実際は何でもいいです。また下記ではtrueを設定していますが
「プロパティを持っているかどうか」で判定するので、true以外の値を設定しても特に問題ありません）

            //ホール
            var catchers = [
                new CircleEntity(200, 50, 20, BodyStatic, 1),
                new CircleEntity(200, 280, 20, BodyStatic, 1),
                new CircleEntity(200, 320, 20, BodyStatic, 1),
                new CircleEntity(200, 450, 20, BodyStatic, 1)
            ];

            // 各々のcatcherに処理を施す
            catchers.forEach(function(catcher){
                catcher.color = "gold";
                catcher.sign = 1;
                engine.entities.push(catcher);
                // isCatcherというプロパティを付加。
                catcher.isCatcher = true;
            });

ボール設定の衝突時コールバック(onhit)の実装部分に、衝突相手がcatcherかどうかを判定するコードを追加します。
（先ほど設定したisCatcherプロパティを利用します）

        //ボール,スコア設定
        function mymouseup(e){
            isMouseDown = false;
            var r = new CircleEntity(475, 400, 18, BodyDynamic);
            r.color = "yellow";
            r.velocity.y = -offset / 5;
            r.onhit = function (me,peer){
                // peerがisCatcherというプロパティを持っているか判定。
                // isCatcherというプロパティを持っているならばそれはホールなので、ボールを消す。
                if ('isCatcher' in peer){
                    engine.entities = engine.entities.filter(function(e){
                        return e != me;
                    });
                    score += 5;
                }
            }

            offset = 0;
            engine.entities.push(r);
        }

投稿2021/04/22 12:50

編集2022/04/13 13:49