前提・実現したいこと(クリックで横棒を出したり消したりしたい)
プログラムを勉強しはじめて1ヶ月ほどの初心者です。
あみだくじを作ろうとしていて、色々調べながらcanvasというのをみつけランダムにあみだくじを生成するところまではたどり着いて
横棒がないところにをクリックすると横棒を生成して、あるところをクリックすると棒が消えるという処理を実装しようとしているところです。
しかしやり方が皆目見当がつかず、細切りにした<div>をforで何百個も作っておいてクリックしたら棒を描画するというようなやり方も考えましたが、いずれ縦棒と横棒の数を引数で受け取ってあみだくじを生成しようとしているのでこのやり方ではダメかなと諦めました。
いかんせんどういう構文で何ができるとかいう知識がかなり不足している状態なので(onclickもよく理解していない)色々と申し訳ないですがこういうのを使えば実現できるよというようなヒントだけでもいいので教えていただけると幸いです
追記
本来はクリックで棒を消したり出したりした後に棒を選んでもらって、そこからゴールまで赤色等の棒と違う色である程度のスピードで辿るようにするのが最終目的です。とりあえずクリックでの出現をクリアできたら描画はまた自分の力で頑張ってみようと思い書いていませんでした失礼いたしました。
以下参考までにあみだ生成のコード
該当のソースコード
Javascript
1var canvas = document.getElementById( "stage" ); 2 var ctx = canvas.getContext( "2d" ); 3 4 ctx.strokeStyle = "#339933"; 5 6 for( var i = 0; i < 11; i++ ) { 7 ctx.beginPath(); 8 ctx.moveTo( 50 + i * 40, 50 ); 9 ctx.lineTo( 50 + i * 40, 450 ); 10 ctx.closePath(); 11 ctx.stroke(); 12 } 13 14 15 16 var ran = new Array(); 17 18 for(i=0;i<11;i++) { 19 ran[i] = new Array(); 20 } 21 22 23 for(var j = 0; j<10;j++){ 24 25 for(var i = 0; i<19; i++) { 26 ran[j][i] = Math.floor( Math.random() * 2 ); 27 if (j == 0) { 28 if(ran[j][i]==0) { 29 ctx.beginPath(); 30 ctx.moveTo( 50 +j * 40 , 70 + i * 20 ); 31 ctx.lineTo( 90 +j * 40, 70 + i * 20 ); 32 ctx.closePath(); 33 ctx.stroke(); 34 } 35 } else { 36 if(ran[j-1][i]==0) { 37 38 } else { 39 if(ran[j][i]==0) { 40 ctx.beginPath(); 41 ctx.moveTo( 50 +j * 40 , 70 + i * 20 ); 42 ctx.lineTo( 90 +j * 40, 70 + i * 20 ); 43 ctx.closePath(); 44 ctx.stroke(); 45 } 46 } 47 } 48 49 } 50 51 } 52ソースコード
試したこと
ここに問題に対して試したことを記載してください。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
回答2件
あなたの回答
tips
プレビュー