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

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

ただいまの
回答率

90.35%

  • JavaScript

    17518questions

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

JavaScriptでのあみだくじ作成

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 567

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

プログラムを勉強しはじめて1ヶ月ほどの初心者です。
あみだくじを作ろうとしていて、色々調べながらcanvasというのをみつけランダムにあみだくじを生成するところまではたどり着いて
横棒がないところにをクリックすると横棒を生成して、あるところをクリックすると棒が消えるという処理を実装しようとしているところです。
しかしやり方が皆目見当がつかず、細切りにした<div>をforで何百個も作っておいてクリックしたら棒を描画するというようなやり方も考えましたが、いずれ縦棒と横棒の数を引数で受け取ってあみだくじを生成しようとしているのでこのやり方ではダメかなと諦めました。
いかんせんどういう構文で何ができるとかいう知識がかなり不足している状態なので(onclickもよく理解していない)色々と申し訳ないですがこういうのを使えば実現できるよというようなヒントだけでもいいので教えていただけると幸いです

追記
本来はクリックで棒を消したり出したりした後に棒を選んでもらって、そこからゴールまで赤色等の棒と違う色である程度のスピードで辿るようにするのが最終目的です。とりあえずクリックでの出現をクリアできたら描画はまた自分の力で頑張ってみようと思い書いていませんでした失礼いたしました。

以下参考までにあみだ生成のコード

 該当のソースコード

var canvas = document.getElementById( "stage" );
    var ctx = canvas.getContext( "2d" );

    ctx.strokeStyle = "#339933";

    for( var i = 0; i < 11; i++ ) {
        ctx.beginPath();
        ctx.moveTo( 50 + i * 40, 50 );
        ctx.lineTo( 50 + i * 40, 450 );
        ctx.closePath();
        ctx.stroke();
    }



    var ran = new Array();

    for(i=0;i<11;i++) {
        ran[i] = new Array();
    }


    for(var j = 0; j<10;j++){

        for(var i = 0; i<19; i++) {
            ran[j][i] = Math.floor( Math.random() * 2 );
            if (j == 0) {
                if(ran[j][i]==0) {
                    ctx.beginPath();
                    ctx.moveTo( 50 +j * 40 , 70 + i * 20 );
                    ctx.lineTo( 90 +j * 40,  70 + i * 20 );
                    ctx.closePath();
                    ctx.stroke();
                }
            } else {
                if(ran[j-1][i]==0) {

                } else {
                    if(ran[j][i]==0) {
                        ctx.beginPath();
                        ctx.moveTo( 50 +j * 40 , 70 + i * 20 );
                        ctx.lineTo( 90 +j * 40,  70 + i * 20 );
                        ctx.closePath();
                        ctx.stroke();
                    }
                }
            }

        }

    }
ソースコード

 試したこと

ここに問題に対して試したことを記載してください。

 補足情報(FW/ツールのバージョンなど)

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • sousuke

    2018/04/27 11:36

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

    キャンセル

  • michaelyuki0908

    2018/04/27 19:31

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

    キャンセル

回答 2

checkベストアンサー

+1

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

あみだにおける横棒とは、「ある縦棒の座標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 14:30

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

    キャンセル

  • 2018/04/28 14:39

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

    キャンセル

  • 2018/04/28 14:56

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

    キャンセル

+1

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

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

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

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

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

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/04/28 14:56

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

    キャンセル

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

  • ただいまの回答率 90.35%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • JavaScript

    17518questions

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