jQueryでシンプルなオリジナルのボードゲームを作れるwebアプリを作る

前置き

１ヶ月前にプログラミングを学び初めて１ヶ月経ってので備忘録として作ったwebサービスを公開してみようと思います。
制作期間は４日くらい、主にjQueryを使用しました。

デモ

プログラミングを勉強したのでボードゲームを作れるwebアプリを作りました
好きな大きさのボードと駒を作成し自由に動かせるようにしています pic.twitter.com/vWH4YWX6ZQ

— こーや東風 (@KoyaTongPoo) November 13, 2019

仕様について

シンプルに「background-color」「border-radius: 50%;」で駒を作成し
文字の色と大きさを決めて書き込めるようにしています。
ダブルクリックすると作成した裏面に切り替わります。
jQuery uiを入れればドラッグ＆ドロップはできるのでそれをマス目にハマるようにしています。

index.html

function drag() {
  // 駒をdrag可能にしてテーブルにくっつける
  $(".drag").draggable({ 
     snap: ".kuttuku"        
   });
  };

あとはlocalStorageにJSONを使って駒のデータを保存できる仕様にしています。

index.html

function komaImg(basyo,num,color,name,) {
    let getId = $(this).attr('id');
    basyo = "#k"+getId;
    bcolor = $(".b"+getId).val();
    name = $("#n"+getId).val();
    fontsize = $("#f"+getId).val();
    color = $(".c"+getId).val();
            $(basyo).html('<div class="hukusei" id="id'+getId+'"style="background-color:'+bcolor+'" >'+name+'</div>');
            $(basyo).css("font-size",fontsize+"px");
            $(basyo).css("color",'"'+color+'"');
            let n = [];
            n.push(name,bcolor,fontsize,color);
      localStorage.setItem(getId,JSON.stringify(n));

        };

わかりにくくて恐縮ですが、駒作成のテーブルにそれぞれidとclassを振り分けて
クリックした駒作成ボタンのidを拾い、そこから色やフォントサイズを振り分けています。

作成してみて

つまずいたポイントとしては、動的に生成した要素のクリックイベントが動かない問題でした。
もし同じように困っている方がいらっしゃれば、とりあえず生成する関数の内部にconsole.logを入れてみれば解決していくと思います。

あとは今後の課題としてiOSで動作させた時にタッチが反応しないケースがあり、どうやらdiv要素で囲っていた事が原因のようでしたので、　　　　　　　　　∫
こういったアプリを作ってみたい方は初めからスマホやタブレットで動かすことを意識してタグ付けした方がいいかと思います。