ID非公開

2022/5/21 23:56

33回答

JavaScriptについてです。

JavaScript | プログラミング57閲覧xmlns="http://www.w3.org/2000/svg">500

ベストアンサー

0

その他の回答(2件)

0

readline-syncの代わりにボタンクリックですが、、、 仕様が○×であれば以下で動きます。×が実は×ではなくそれぞれ異なる値が入っているとなると意図と違う動きかもしれません。意図と違う場合は一度修正を頑張ってみて、もし無理であれば追加でコメントください。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> function onClick(elm){ var maru = document.getElementById("maru"); var tr = maru.parentElement; var table = tr.parentElement; switch( elm.innerText ) { case '↑': if( tr.previousElementSibling != null ) { table.insertBefore( tr, tr.previousElementSibling ); } break; case '↓': table.insertBefore( tr, tr.nextElementSibling.nextElementSibling ); break; case '←': if( maru.previousElementSibling != null ) { tr.insertBefore( maru, maru.previousElementSibling ); } break; case '→': tr.insertBefore( maru, maru.nextElementSibling.nextElementSibling ); break; } } </script> </head> <body> <table id="table"> <tr><td>×</td><td>×</td><td>×</td><td>×</td><td>×</td></tr> <tr><td>×</td><td>×</td><td>×</td><td>×</td><td>×</td></tr> <tr><td>×</td><td>×</td><td id="maru">○</td><td>×</td><td>×</td></tr> <tr><td>×</td><td>×</td><td>×</td><td>×</td><td>×</td></tr> <tr><td>×</td><td>×</td><td>×</td><td>×</td><td>×</td></tr> </table> <button onclick="onClick(this);">↑</button> <button onclick="onClick(this);">↓</button> <button onclick="onClick(this);">→</button> <button onclick="onClick(this);">←</button> </body> </html>

0

table を作って、各マスに id を割り振るのが簡単。 最上段左から 2 番目は waku21 で、現在の丸の位置は waku33 です。 1 桁目が x 座標で、2 桁目が y 座標。 あとは waku?? のように指定して innerHTML で書き換えれば良いです。 現在位置を表す x と y の変数は用意するように。 これはマス目が少ないから出来る技であって、マス目が大きくなる場合はやめましょう。