Q&A
子弟→指定です。
前提
JavaScriptで，複数のボールが跳ね返り合うようなシステムを作っています。
指定した座標内に出現するボールだけ，他とは異なる色で出現させる機能（最後の行にif文を追加した。）を実装中に，全く動かなくなりました。
実現したいこと
- x座標が２～３かつ，ｙ座標が４～５の位置に出現するボールだけ赤色にしたい。
該当のソースコード
html
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="utf-8" /> 5<title>物の溶け方</title> 6<style>* { padding: 0; margin: 0; } canvas { background: #eee; display: block; margin: 0 auto; }</style> 7</head> 8<body> 9<canvas id="cvs" width="480" height="320"></canvas> 10<section style="text-align:center"> 11<button name="startbtn" onclick="playing = true"> 12スタート 13</button> 14<button name="stopbtn" onclick="playing = false"> 15ストップ 16</button> 17</section> 18<script> 19test=1; 20const canvas = document.getElementById( "cvs" ); 21const context = canvas.getContext( "2d" ); 22let N = 300; 23const Radius = 10; 24const Dmax = 1; 25const Dmin = 1; 26const balls = Array.from( new Array( N ), ()=> new Object() ); 27const maxtry = 100; 28balls.forEach( ( ball, idx )=> { 29let count = 0; 30do { 31if( ++count>maxtry ) { break } 32ball.x = Radius+( canvas.width-2*Radius )*Math.random(); 33ball.y = Radius+( canvas.height-2*Radius )*Math.random(); 34} while ( 35idx>0 && 36balls.slice( 0, idx ). 37find( other => Math.sqrt( ( ball.x-other.x )**2+( ball.y-other.y )**2 )<2*Radius ) 38); 39if( count<=maxtry ) { 40ball.dx = ( rdm => Dmin*( rdm>0 ? 1 : -1 )+( Dmax-Dmin )*rdm )( 2*Math.random()-1 ); 41ball.dy = ( rdm => Dmin*( rdm>0 ? 1 : -1 )+( Dmax-Dmin )*rdm )( 2*Math.random()-1 ); 42ball.color = "blue"; 43} 44} ); 45//----] 設定不可能だったボールを除去 46const errIndex = balls.findIndex( ball => ball.dx===undefined ); 47if( errIndex>=0 ){ N = balls.length = errIndex } 48function drawBall( n ) { 49context.beginPath(); 50context.arc( balls[ n ].x, balls[ n ].y, Radius, 0, 2*Math.PI ); 51context.fillStyle = balls[ n ].color; 52context.fill(); 53} 54function draw() { 55if (!playing) return; 56context.clearRect( 0, 0, canvas.width, canvas.height ); 57balls.forEach( ( ball, idx ) => { 58drawBall( idx ); 59const [ left, right, top, bottom ] = [ 60ball.x+ball.dx-Radius, ball.x+ball.dx+Radius, 61ball.y+ball.dy-Radius, ball.y+ball.dy+Radius 62]; 63ball.dx = ( left > 0 && right < canvas.width ) ? ball.dx : ( ball.dx *= -1 ) ; 64ball.dy = ( top > 0 && bottom < canvas.height ) ? ball.dy : ( ball.dy *= -1 ) ; 65if( idx+1<balls.length ){ 66const after = balls.slice( idx+1 ); 67const enemies = after.filter( enemy => 68Math.sqrt( ( enemy.x+enemy.dx-ball.x-ball.dx )**2+( enemy.y+enemy.dy-ball.y-ball.dy )**2 ) <= 2*Radius 69); 70if( enemies.length ) { 71enemies.forEach( enemy => { 72const tmp = { 73"ball": Object.assign( new Object(), ball ), 74"enemy": Object.assign( new Object(), enemy ) 75}; 76ball.dx += ( tmp.enemy.dx-tmp.ball.dx ); 77ball.dy += ( tmp.enemy.dy-tmp.ball.dy ); 78enemy.dx += ( tmp.ball.dx-tmp.enemy.dx ); 79enemy.dy += ( tmp.ball.dy-tmp.enemy.dy ); 80} ); 81} } 82ball.x += ball.dx*test; 83ball.y += ball.dy*test; 84} ); 85} 86setInterval( draw, 10 ); 87 88 89if ((ball.x >= 2) && (ball.x <= 3)&&(ball.y>=4)&&(ball.y<=5)) { 90ball.color = "red";} 91 92 93</script> 94</body> 95</html>
試したこと
・if文を用いて，指定した座標だけ色が変わるようにした。（上記コードの通り。）
・同様のscriptを２つ用意し，色の子弟だけ行った。
> 子弟→指定です。
質問文は編集できます。
回答1件
0
ベストアンサー
他とは異なる色で出現させる機能（最後の行にif文を追加した。）を実装中に，全く動かなくなりました。
ブラウザの開発者ツールのコンソールにエラーが出ているはずです。そのエラーを読んで原因を考えましょう。
Js
1if ((ball.x >= 2) && (ball.x <= 3)&&(ball.y>=4)&&(ball.y<=5)) { 2ball.color = "red";}
このコードの位置に変数 ball はありません。このコードを変数 ball が使えるどこかに移動すればいいかもしれません。
コードのインデントをきちんとしましょう。変数の有効範囲がわかりやすくなります。
投稿2022/12/12 21:38
総合スコア20884
あなたの回答
tips
プレビュー
