JavaScriptで物理エンジンを搭載した矩形の回転したものを表示したい

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],
			[ 499, -100,  1 , 800],
			[ 434,  80 ,  5 , 800]
		];

		var lines = [
			[150, -106, 3, 212],
			[170, -120, 212, 3],
		];

		var pins = [
			[50, 50],
			[100, 100],
			[200,200],
			[300,300],
			[400,400],
		];

		function init(){
			//エンジン初期化&イベントハンドラ設定
			engine = new Engine(-100, -100, 700, 800, 0, 9.8);
			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) {
				var x = 45 * Math.PI / 180;
				r = new RectangleEntity(w[0],w[1],w[2],w[3]);
　　　　　　　　　　　　　　　　　 r.rotate(x);
				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 x = (j * 60 + 60) - 45 * (i % 2);
					var r = new CircleEntity(x, i * 60 + 200, 5, BodyStatic, 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);
		}

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

		function mymousedown(e){
			isMouseDown = true;
		}

		//ボール,スコア設定
		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){
				if (peer == catcher){
					engine.entities = engine.entities.filter(function(e){
						return e != me;
					});
					score += 5;
				}
			}

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

		function repaint(){
			//背景クリア
           ctx.fillStyl = "#006600";
           ctx.fillRect(0,0,500,600);

			//ボール、壁の描画
			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.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.fillStyle = "gray";
            ctx.fillRect(455,443,30,200);
		}
	</script>
</head>
<body onload="init()">
	<canvas id="canvas" width="800" height="600"></canvas>
</body>
</html>

前提・実現したいこと

配列Linesを、配列Wallsと同じ物理エンジンの影響を受けた矩形の状態で、回転させて表示したい。
同じｒながら、colorは読むことが出来るのにrotateが読み込めない。

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

Uncaught TypeError: r.rotate is not a function
    at SmartBall.html:58

該当のソースコード

r.rotate(x);

試したこと

該当箇所を
ctx.rotate(x);
にしたもののエラーであった。

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

Tiny2Dのコードは以下を参考にしています。

https://thinkit.co.jp/article/8467

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

回答1件

ベストアンサー

回答が付かないようなので

そもそもそのエンジンが矩形の回転をサポートしていないのでは？

js
1            lines.forEach(function (w) {
2                var x = 45 * Math.PI / 180;
3                r = new RectangleEntity(w[0],w[1],w[2],w[3]);
4                r.color = "gyay";
5                engine.entities.push(r);
6            });

r = new LineEntity(w[0],w[1],w[2],w[3]);
なのでは？

--
ラインのデータを追加すると跳ね返るようですよ

js
1        var lines = [
2            [150, -106, 3, 212],
3            [170, -120, 212, 3],
4            [450,0,500,50],
5        ];

あと変数 r がグローバルなのも気になります

投稿2021/02/25 00:16

babu_babu_baboo

総合スコア616

mutuki

2021/02/25 11:06

返事が遅くなり申し訳ございません。ありがとうございました。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

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

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

質問する

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

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