Q&A
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のコードは以下を参考にしています。
回答1件
0
ベストアンサー
回答が付かないようなので
そもそもそのエンジンが矩形の回転をサポートしていないのでは？
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
総合スコア616
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/02/25 11:06