39
22

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2019-11-13

##前置き

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

##デモ

##仕様について
シンプルに「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要素で囲っていた事が原因のようでしたので、         ∫
こういったアプリを作ってみたい方は初めからスマホやタブレットで動かすことを意識してタグ付けした方がいいかと思います。

39
22
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
39
22

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?