JavaScript mouseEvent 예

실습 설명
게임을 좋아하는 재우는 이번에 배운 자바스크립트를 활용해서 청기 백기 게임을 만들어 보려고 합니다.

마우스를 이용해서 마우스 왼쪽 버튼을 누르면 청기(flagBlue)가 올라가고, 마우스 오른쪽 버튼을 누르면 백기(flagWhite)가 올라가도록 기획을 했는데요.

나름대로 열심히 고민해서 코드를 작성해봤지만 좀처럼 구현하기가 쉽지 않고 자꾸만 오른쪽 클릭을 할 때 브라우저의 메뉴창이 나타나서 어떻게 해야할지 막막해 하는 중입니다.

재우를 위해서 다음 조건을 만족하는 코드를 작성해 주세요.

마우스 왼쪽 버튼을 누른 순간 청기(flagBlue)에 'up'이라는 클래스 속성값이 추가되고, 마우스 오른쪽 버튼을 누른 순간 백기(flagWhite)에 'up'이라는 클래스 속성값이 추가되는 flagUp 함수를 완성해 주세요.
웹 페이지에서 contextmenu 이벤트가 발생하면 브라우저의 메뉴창이 나타나지 않도록 막아 주세요.
참고로 flagUp 함수 안에 있는 setTimeout 함수는 두 번째 파라미터로 전달한 값의 밀리초 만큼의 시간 이후에 첫 번째 파라미터로 전달한 함수를 실행시켜주는 함수입니다.

파일링크