⛳ 싱글벙글 - 즐거운 골프생활 (골프 조 편성 및 내기 계산기)
🔗 웹서비스 바로가기: https://blackteabang.github.io/golf_namu/
친구들이나 지인들과 골프를 치러 갈 때, 누구랑 같은 조를 할지 정하고 점수를 계산하는 것을 도와주는 아주 편리한 웹 프로그램입니다!
스마트폰이나 컴퓨터에서 인터넷 창만 열면 바로 쓸 수 있어요.
🌟 주요 기능 (어떤 것들을 할 수 있나요?)
- 🏌️♂️ 선수 등록하기
- 같이 골프를 치는 사람들의 이름과 핸디캡(파 대비 기대 성적. 예: -4는 4언더파를 칠 것으로 기대되는 실력)을 미리 적어둘 수 있어요.
- 🎲 랜덤 조 짜기
- 누구랑 같은 조가 될지 고민할 필요 없이, 컴퓨터가 무작위로 공평하게 3명씩 조를 짜줍니다.
- ✍️ 실시간 점수 기록
- 조가 짜여진 화면에서 각자 몇 번 만에 골프공을 홀에 넣었는지(타수) 숫자를 적으면 자동으로 컴퓨터가 기억해요.
- 🏆 최종 순위 보기
- 경기가 끝나면 '스코어 = 당일 오버파 - 핸디캡'을 기준으로 점수가 낮은 순서대로 1등부터 순위를 자동으로 매겨서 보여줍니다.
- 핸디캡 부호를 그대로 씁니다. 예: 핸디 -4, 오늘 오버파 +2 → 스코어 2 - (-4) = +6 (기대보다 6타 못 침).
- 동점일 경우: 핸디캡 숫자가 더 낮은 사람(예: 핸디캡 7과 5가 동점이면 5, -4와 5면 -4)이 승리하여 더 높은 순위를 차지합니다.
- 💾 기록 저장 및 이어서 하기 (창을 꺼도 안심!)
- 게임 도중에 실수로 인터넷 창을 꺼버려도 놀라지 마세요! 다시 들어오면 방금 전까지 짜둔 조와 점수가 그대로 남아있어요.
- 경기가 끝난 후에는 '과거 경기 기록'에 저장되어 나중에도 "우리가 저번에 누가 이겼었지?" 하고 찾아볼 수 있답니다.
- 🔄 새로 만들기
- 조 편성이 마음에 안 들거나 실수가 있었다면, 언제든 '새로만들기' 버튼을 눌러 처음부터 다시 조를 짤 수 있어요.
💻 어떤 기술로 만들었나요?
이 프로그램은 누구나 쉽게 접근할 수 있도록 가장 기본적인 웹 기술만 사용해서 빠르고 가볍게 만들었습니다.
- HTML (뼈대): 집을 지을 때 철근을 세우듯, 웹페이지의 구조와 글자, 버튼들을 만들었어요.
- CSS (인테리어): 예쁜 색깔을 칠하고, 모서리를 둥글게 만들고, 유리처럼 투명한 느낌(글래스모피즘)을 줘서 앱을 아주 고급스럽게 꾸몄어요.
- JavaScript (두뇌): 버튼을 눌렀을 때 조를 섞어주고, 점수를 계산하고, 컴퓨터에 정보를 저장해 주는 똑똑한 뇌 역할을 해요.
📖 코드 이해하기 (중학생도 이해하는 쉬운 설명!)
프로그램을 움직이는 핵심 두뇌인 app.js 파일에는 다음과 같은 순서로 명령어가 적혀있어요.
1. 정보 저장소 준비 (바구니 준비하기)
// 선수들의 정보를 담아둘 빈 바구니예요.
players: [],
// 짜여진 조들을 담아둘 빈 바구니예요.
rooms: [],
2. 프로그램 시작 (준비 운동)
init() 이라는 기능은 프로그램이 켜지자마자 가장 먼저 실행돼요.
과거에 저장해둔 점수가 있는지 찾아보고, 창을 실수로 껐다 켰다면 원래 하던 화면으로 돌려보내 줍니다.
3. 무작위로 섞기 (랜덤 조 편성)
assignRooms() 기능은 오늘 참가하는 사람들을 모아서, 바구니 안에서 마구마구 섞은 다음 3명씩 짝을 지어주는 마술 같은 코드예요.
4. 컴퓨터 몰래 기억하기 (로컬 스토리지)
saveToStorage() 같은 기능들은, 우리의 이름과 점수를 인터넷 브라우저(크롬, 사파리 등)의 작은 비밀 창고에 몰래 적어두는 거예요. 그래서 컴퓨터를 껐다 켜도 비밀 창고를 열어보면 점수가 그대로 남아있답니다!
🚀 실행 방법
이 폴더 안에 있는 index.html 파일을 더블클릭해서 인터넷 창(크롬이나 엣지 등)으로 열기만 하면 바로 게임이 시작됩니다! 따로 설치할 것도 없어요.
