年末まで毎日webサイトを作り続ける大学生 〜5日目 ドラッグ&ドロップで簡単なゲームを作る〜

##はじめに
初めまして。
年末まで毎日webサイトを作っている者です。
今日はドラッグ$ドロップを使って簡単なゲームを作りました。
扱う技術レベルは低いですが、同じように悩んでる初心者の方を勇気付けられれば幸いです。
今日は5日目。(2019/10/23)
よろしくお願いします。

##サイトURL
https://sin2cos21.github.io/day5.html

##やったこと
3つの箱を用意して、それをドラッグ＆ドロップで右側に移動できるようにしました。
ドラッグした回数も表示しています。
レイアウトはこんな感じ↓

移動させた時にドロップできるポイントに入っていれば、ドロップ先の色が少し変わります↓

##こだわったところ
箱ごとドロップさせるのに苦労しました・・・。
終わってみたらシンプルな構造でしたが、今日はドラッグ&ドロップの基礎を学んだという感じです。
javascriptはこれだけです↓

<script>
        function drag($event) {
            $event.dataTransfer.setData("Text", $event.target.id);
        };

        function drop($event) {
            var test = event.dataTransfer.getData("text");
            var test2 = document.getElementById(test);
            $event.currentTarget.appendChild(test2);
            $event.preventDefault();
        }

        var $count = 0;
        function count() {
            document.getElementById("count").innerHTML = ++$count;
        }

        function change() {
            document.getElementById("wrapper2").style.backgroundColor = "rgba(0, 0, 0, .1)";
        }

        function change2() {
            document.getElementById("wrapper2").style.backgroundColor = "transparent";
        }

    </script>

関数dragとdropで移動させています。
countで移動回数を数えています。
changeとchange2はドロップ可能状態になったらドロップ先の色を変えるために加えました。

##感想
やればやるほど分からないことが増えていきますが、それでも動くものを作れて発信できるのはいいですね。
まだ$eventやらdataTransferやらよく理解できていませんが、今後も作りつつ調べるスタイルで行こうと思います。
今週はドタバタしているので明日と明後日のサイト制作は苦労しそうですが頑張ります！

##参考

• ドラッグ＆ドロップイベント ≪ イベント ≪ DOM ≪ JavaScript（ジャバスクリプト）リファレンス(http://alphasis.info/javascript/dom/event/draganddrop/)
• HTML ドラッグ＆ドロップ API - Web API | MDN(https://developer.mozilla.org/ja/docs/Web/API/HTML_Drag_and_Drop_API)

上2つのサイトがとても分かりやすかったです。ありがとうございます。