Q&A
どこぞに動作するソースを上げてもらうのがはやいかと
今のままだと動きが確認できないので・・・
お手数をおかけしますが、ご教示いただけますと幸いです。
実現したいこと
・ドカン(緑色)のどこにあたってもボール(青色)が跳ね返るようにしたい
現状
・ボールがドカンに当たるとすり抜けてしまう
・ボタンを押した時の角度(0~180°)でボールが発射される仕組み
<meta charset="UTF-8" /> <title></title> <style> canvas { border: 1px red solid; display: block; } </style> <body> <canvas width="768" height="512" id="myCanvas"></canvas> <input id="K" /> <input type="button" value="test" onclick="fire()" /> <script> let canvas = myCanvas; let ctx = canvas.getContext("2d"); let ballRadius = 15; let x, y, dx, dy, cntBounce, f; let k = 0; const { PI, sin, cos, abs } = Math, D = PI / 180; let pipeNorth = new Image(); //ドカン上 var gap = 100; //ドカンの縦幅 var pipe = { x: canvas.width, //canvas幅 y: 0, }; pipeNorth.src = "pipeNorth.jpg"; function drawBall() { ctx.beginPath(); ctx.arc(x, y, ballRadius, 0, Math.PI * 2); ctx.fillStyle = "#0095DD"; ctx.fill(); ctx.closePath(); if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) { dx = -dx; cntBounce++; } if (y + dy > canvas.height - ballRadius || y + dy < ballRadius) { dy = -dy; cntBounce++; } x += dx; y += dy; if (100 < cntBounce) ballReset(); } function square() { ctx.beginPath(); ctx.arc(x, y, 30, 0, Math.PI * 2); ctx.fillStyle = "#0095DD"; ctx.fill(); ctx.closePath(); } function dispK() { K.value = (((++k / 180) | 0) & 1 ? k % 180 : 180 - (k % 180)) + "°"; } function fire() { f++ || ((dx = cos(k * D) * 5), (dy = -abs(sin(k * D)) * 5)); } function ballReset() { x = canvas.width / 2; y = canvas.height - 15; dx = dy = f = cntBounce = 0; } ballReset(); (function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage(pipeNorth, 200, 100); drawBall(); dispK(); requestAnimationFrame(draw); })(); </script> </body>
↓結果
※147°となっている部分は自動で数字が増減しています
その他不明点などございましたらコメントいただければと思います。
回答1件
0
ベストアンサー
ソースコードで回答すると、
作業依頼に答える形になるので、考え方だけ。
- ボールの座標を、描画毎に保持する
- 土管の座標を、土管の大きさ分保持し、グローバル変数か何かに保持する
- ボールの座標と、ボールの大きさ円周をプラスした座標が干渉しているかを、描画毎に監視
- 干渉していたら、ボールの移動ベクトルを計算し、変更
でいけるかと。
投稿2020/11/26 01:06
総合スコア9528
ご返信遅くなり申し訳ございません。
解決までの考え方のところがイメージできていなかったので、考え方非常に参考になります。
一度こちらの手順で実装試してみたいと思います。
ご回答いただきありがとうございます。
とかく、今回の質問は、根幹部分の開発になるかと思いますので、
ソースコードの回答は非常につきにくいと考えられます。
（作業依頼のような質問にも回答する方はたまにいますが）
なので、解決とするならBA選出か、自己解決の投稿で解決にした方がいいかと。
BAにさせていただきました。
この度はご回答いただきありがとうござました。
あなたの回答
tips
プレビュー
