연말까지 매일 웹 사이트를 꾸준히 만드는 대학생들~ 5일째 드래그로 간단한 게임 만들기~

입문

처음 뵙겠습니다.
연말까지 매일 웹 사이트를 만드는 사람입니다.
오늘 나는 드래그로 간단한 게임을 만들었다.
처리 기술 수준은 낮지만 같은 고민을 하는 초보자에게 용기를 줄 수 있다면 좋겠다.
오늘이 닷새째다.(2019/10/23)
잘 부탁드립니다.

사이트 URL

한 일

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이 이동하고 있습니다.
나는 카운트로 이동 횟수를 세고 있다.
드롭다운 가능한 상태에 있을 때 드롭다운 목적지의 색을 바꾸기 위해change와change2를 추가했습니다.

감상

하면 할수록 모르는 일이 늘어나지만 그래도 활동적인 것을 만들어 메시지를 보내는 것이 좋다.
아직 $이벤트와 데이터 전송을 잘 이해하지는 못하지만 앞으로도 하면서 조사하는 스타일입니다.
이번 주는 눈코 뜰 새 없이 바쁘기 때문에 내일과 모레 사이트 제작은 힘들겠지만 열심히 하겠습니다!

참고 자료

드래그 앤 드롭 이벤트 "DOM JavaScript(JavaScript) 참조http://alphasis.info/javascript/dom/event/draganddrop/"

HTML 드래그 앤 드롭 API-웹 API/MMDNhttps://developer.mozilla.org/ja/docs/Web/API/HTML_Drag_and_Drop_API

위의 두 사이트는 이해하기 쉽다.정말 감사합니다.