JSFiddle - React, Tailwind, and code Playground

by xxxvvvxxx

HTML

<div id="container"> 
	<div id="circle"></div> 
</div>

CSS

#container { 
	position: relative; 
	width: 400px; 
	height: 400px; 
	background-color: lightgray; 
} 
#circle { 
	position: absolute; 
	width: 20px; 
	height: 20px; 
	background-color: green; 
	border-radius: 50%; 
	transition: transform 0.2s; 
} 
.star { 
	position: absolute; 
	width: 20px; 
	height: 20px; 
	background-color: yellow; 
} 
.arrow {
	position: absolute; 
	width: 40px; /* 화살표의 너비 */ 
	height: 40px; /* 화살표의 높이 */ 
	font-size: 40px; /* 화살표 아이콘의 크기 */ 
	color: red; 
	text-align: center; 
	line-height: 40px; /* 화살표 아이콘의 수직 가운데 정렬 */
}

JavaScript

var score = 0; 
  var maxScore = 10; 
  // 마우스 이동 이벤트 리스너 등록 
  document.getElementById("container").addEventListener("mousemove", function(event) { 
        var circle = document.getElementById("circle"); 
        var containerRect = this.getBoundingClientRect(); 
        // 마우스 좌표 계산 
        var mouseX = event.clientX - containerRect.left; 
        var mouseY = event.clientY - containerRect.top; 
        // 사각형 내부에 위치하도록 좌표 제한 
        var circleX = Math.max(0, Math.min(mouseX, containerRect.width - circle.offsetWidth)); 
        var circleY = Math.max(0, Math.min(mouseY, containerRect.height - circle.offsetHeight)); 
        // 초록 원의 위치 설정 
        circle.style.left = circleX + "px"; 
        circle.style.top = circleY + "px"; 
        updateArrows(circleX, circleY); 
        checkCollision(); 
  }); 
  // 충돌 여부 확인 함수 
  function isColliding(circle, star) { 
        var circleRect = circle.getBoundingClientRect(); 
        var starRect = star.getBoundingClientRect(); 
        return !( 
            circleRect.right < starRect.left || 
            circleRect.left > starRect.right || 
            circleRect.bottom < starRect.top || 
            circleRect.top > starRect.bottom 
        ); 
  } 
   
  // 점수 증가 함수 
  function increaseScore() { 
        score++; 
        if (score >= maxScore) { 
              alert("게임 종료! 최대 점수를 달성했습니다."); 
              score = 0; 
       } 
       console.log("현재 점수: " + score); 
  } 
  // 별 삭제 함수 
  function removeStar(star) { 
        star.parentNode.removeChild(star); 
  } 
   
  // 화살표 업데이트 함수 
  function updateArrows(circleX, circleY) { 
        var container = document.getElementById("container"); 
        var circle = document.getElementById("circle"); 
        var arrow = document.querySelector(".arrow"); 
        // 기존 화살표 삭제 
        if (arrow) { 
              arrow.parentNode.removeChild(arrow); 
       } 
       // 화살표 생성 
       arrow = createArrow(circleX, circleY); 
       arrow.className = "arrow"; // 요소에 id...