BJJ Score Board 주짓수 점수판

주짓수 점수판 웹 애플리케이션 개발하기

오늘은 주짓수 경기에서 사용할 수 있는 점수판 웹 애플리케이션을 개발한 과정을 공유하고자 합니다.

주요 기능

1. 타이머 기능

• 경기 시간 설정 (기본 5분)
• 시작/일시정지/리셋 기능
• 30초 전 알림음
• 종료 알림음

2. 점수 기록 기능

• 2점, 3점, 4점 추가/감소
• 패널티 기록
• 어드밴티지 기록
• 총점 자동 계산

3. 선수 관리

• 선수 이름 입력 및 수정
• 각 선수별 독립적인 점수 관리

기술 스택

• HTML5
• CSS3
• JavaScript (Vanilla)

주요 구현 내용

1. 타이머 구현

JavaScriptCopyfunction startTimer() {    clearInterval(timerInterval);    timerInterval = setInterval(() => {        if (timeLeft > 0) {            timeLeft--;            updateTimerDisplay();            if (timeLeft === 30) {                document.getElementById('thirtySecondsLeft').play();            }        } else {            clearInterval(timerInterval);            document.getElementById('endAlarm').play();            alert("시간 종료!");        }    }, 1000);}

2. 점수 관리

JavaScriptCopyfunction addScore(player, points) {    const element = document.getElementById(`player${player}-${Math.abs(points)}`);    if (element) {        let currentScore = parseInt(element.textContent) || 0;        currentScore += points;        if (currentScore < 0) currentScore = 0;        element.textContent = currentScore;        updateTotalScore(player);    }}

UI/UX 특징

• 크로마키 촬영을 위한 초록색 배경
• 직관적인 버튼 배치
• 시각적으로 구분되는 점수 표시
• 반응형 디자인

[advanced_iframe securitykey=”5ff454030f8102e89e5695bdf8708ab13075dbd0#@$” use_shortcode_attributes_only=”true” src=”https://ex.erci.se/wp-content/uploads/2024/12/BJJ-point-board.html” width=”100%” height=”600″ enable_external_height_workaround=”false” multi_domain_enabled=”false” use_post_message=”false”]