質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

1639閲覧

JavaScriptでのあみだくじ作成

michael-ilcsy

総合スコア180

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2018/04/26 13:37

編集2018/04/28 05:26

前提・実現したいこと(クリックで横棒を出したり消したりしたい)

プログラムを勉強しはじめて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/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sousuke

2018/04/27 02:36

あみだくじを作ること自体が目的ですか?ユーザーに何番か選ばせてあたったものとかを判断するまでやるのかでかなり違うと思いますがそのところどうなんですか?
michael-ilcsy

2018/04/27 10:31

追記致しました。どこまで情報を書けばいいかわかっていなかったですご迷惑おかけしました
guest

回答2

0

ベストアンサー

この場合最も重要なのは、「どう横棒の情報を保持するか」です。情報さえ正しく保持していれば、描画自体は(あみだの実行も)目処が見えてきます。

あみだにおける横棒とは、「ある縦棒の座標Y1と、他の縦棒の座標Y2との間をつなぐ」ものです。
※単純化すると横棒は常に横軸と並行ですから、Y1 = Y2 になります

これを踏まえてあみだの実行を考えると、横棒の情報が「a(縦棒1),b(縦棒2),y(Y座標)」という配列h[x] に入っているならば、こんな感じの動きになります。

var bar = 0; // 今いる縦棒の番号。0~n-1 var y = 0; // 今の縦軸上の座標 while( y != 縦軸の終端(ゴール)のY座標 ) { y = y + 1; for(i = 0; i < h.count; i++) { if (h[i].y == y) { // 今いるY座標に対する横軸が(どこかに)ある if (h[i].a == bar) { bar = h[i].b; // 縦軸1 が一致しているなら、縦軸2 へ移動する } else if (h[i].b == bar) { bar = h[i].a; // 縦軸2 が一致しているなら、縦軸1 へ移動する } } } } // ここまで来た時点での bar が、引いた結果の縦棒の位置

投稿2018/04/28 05:06

tacsheaven

総合スコア13703

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

michael-ilcsy

2018/04/28 05:30

回答ありがとうございます。辿っていく描画の参考にさせていただきます! ただ私の質問の書き方が悪く、上手く今求めていることを伝えきれてなかったようなので もしよろしければクリックでの出現のやり方のヒント等またお手すきのときにでも回答いただけると幸いです
tacsheaven

2018/04/28 05:39

これも簡単で、クリックしたことを「canvasでの onclick で」取ります。そうすると座標が分かりますから、X 座標から「どの縦軸の間なのか」が分かります。そうすれば横棒を作るのに必要な情報が全部揃いますよね? ※onclick イベントは「画面全体での座標」で返ってくるので、推されたcanvasが「どの位置にあるか」から canvas の座標系に変換する必要はありますが そうなれば、あとは「そこに横棒がないなら、横棒を描写する」「そこに横棒がすでにあったなら、その横棒を消去する(データからも消す)」だけです。描写自体は canvas.fillRect で縦幅を1にするなりすればよいでしょう。
michael-ilcsy

2018/04/28 05:56

迅速な回答ありがとうございます 教えていただいたことを参考にまた頑張ってみますありがとうございました!
guest

0

canvasでマウス座標扱うのはちょいといちいち面倒なルーチンがあるので
なんらかの形でcanvas扱うためのクラスなり関数なりを用意しとくのが吉

最終的に自動であみだくじを辿るのを目的にしてるなら
生成の時点でそれを見越したデータにしておいたほうがあとあと楽です

「点」と二つの点で構成される「線」のクラス
「点」には「始点」「終点」「交差点」
「線」には「縦線」「横線」のサブクラスを作る

「縦線」は「横線」との「交差点」の参照の配列を保持する
みたいな感じのデータの持ち方になるでしょうか

あみだくじ作成時の「横線」の追加・削除は
「横線」の両端の「交差点」から当たり判定を得てやればいいでしょう

「横線」追加された後の「縦線」の「交差点」のソートは
都度やらなくても、編集確定後でもいいかもしれないですね

描画はあくまでゲームデータを可視化するような感じで

画像解析してどうこうするハメになるのはしんどいです

投稿2018/04/28 05:51

KazuhiroHatano

総合スコア7802

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

michael-ilcsy

2018/04/28 05:56

回答ありがとうございます canvasのリンク凄く参考になりました。またこれをもとに頑張ってみようと思いますありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問