Why?
탑텐TV는 정말 좋은 게임이다. 물론 취향에만 맞는다면...
.
간단하게 게임의 설명을 하자면 각자 1부터 10까지의 숫자 카드를 뽑고, 질문자가 예를들어
'소지품이 절도당했다. 전혀 신경쓰이지 않을 물건 1부터 소중한 물건 10까지!'
하는 식으로 질문을 하면 서로가 뽑은 카드의 숫자만큼 이를 표현하고, 다시 질문자가 서로가 뽑은 숫자 카드를 낮은 숫자부터 높은 숫자까지 쌓는 게임이다.
즉, 아직 유행중인 밸런스 게임이 시기적절하게 보드게임으로 나온 것이다.
그리고 나는 이 게임을 함께 좋아하는 친구들을 만드는 데 성공했다.
그리고 그중 하나는 온라인으로도 이 게임을 즐기기 위해 스스로 게임마스터,
즉 같은 그룹 사람들에게 게임을 전파하기 위해 정작 자신은 게임에 제대로 끼지 못하는!!
경우에 처했다는 썰을 전해듣게 된다.
.
이 게임의 구성물은 간단하다.
남은 유니콘(생명력)과 생겨난 똥(오답) 갯수를 뒤집어가며 표현하는 토큰과 카드와 토큰을 올려놓는 종이판때기 하나, 1부터 10까지가 적힌 숫자 카드와 수많은 질문이 적힌 카드들.
그 중 유니콘/똥 토큰은 게임의 긴장감을 더해주긴 하지만 이 게임의 핵심은 아니고 종이판때기는 솔직히 필요 없다고 생각해 버렸다.
그리고 단언컨대 이 게임의 핵심은 질문 카드에 있다.
레크레이션에 가까운 게임이지만 막상 내가 질문자가 되는 상황이 닥치면 고민하게 된다.
뭘 질문해야 적당하지?
이러한 경우는 카멜레온같이 각종 레크레이션에 가까운 게임을 할 때 공통적으로 적용된다.
그렇기때문에 이 상품들은 just 아이디어 뿐 아니라 고민거리를 덜어준다는 점에서 물질적 가치를 가진다.
.
그런데 이 게임은 까다로운게 하나 더 있다. 바로 숫자카드의 배분이다.
게임에 참여하는 서로는 각기 다른 숫자를 가지고 있어야 하고, 이는 랜덤으로 주어져야 하며, 그것을 자신만 확인해야 한다.
즉, 카드의 물질적인 부분을 필요로 하는 것이다. 보드게임이니까 어쩔 수 없지.
정말 어쩔 수 없나?
만들면 되지 않을까?
How?
HTML+CSS+JavaScript
처음엔 백엔드를 두려고 했다.
하다못해 파이어베이스가 될지언정.
그런데 점점 아이디어 속 프로젝트가 커지는 것이다. 이 프로젝트가 실질적으로 동작하려면 각각 동시 진행할 수 있게 room을 나누어야 하고, 그러려면 로그인과 인증 기능도 추가하는게 낫겠고, 그러려면 최소한의 보안이......
으아아!!!! 때려쳐!!!!!!
그렇게 이 프로젝트는 오랫동안 마음 한 켠에 남아있었다.
.
그런데 지난번 토이프로젝트를 하면서 번뜩! 최소한의 백엔드를 두는 것보다 더 나은, 프론트 영역에서 만으로 토이프로젝트를 완성할 수 있는 방법이 떠오른 것이다.
만약 내가 이 프로젝트를 완전히 잊어버렸으면 그렇게 내 토이프로젝트 하나는 날아갔겠지...... 새삼 메모의 중요성을 느꼈...... 중요하지 않은 내용이니 일단 넘어가고.
어차피 온라인에서 같이 게임을 하려 한다면 적어도 디스코드나 단체 카카오톡 같은 최소한 채팅을 주고받는 무언가의 프로그램을 사용하고 있을 것이다.
그렇다면 대충 그 외부 어플리케이션을 최대한 의존한 채로,
사용자에게 보여지면 안되는 내부 배열을 봐도 식별하지 못하는 코드로 전송하여,
서로 복붙으로 코드를 나누어 방에 참가하면 되지 않을까?
사실 요즘 게임에서 사용할만한 방법은 아니다.
약간 게임을 함께하기 위해 서로의 IP주소를 공유하던 시절의 감성인 것 같다.
.
나는 처음에 이 공유되는 코드를, 흔히 이메일 인증 같은 곳에 사용되는것처럼 6자리의 영숫자 혼합으로 만들려 했다.
그런데 방법을 모르겠다.
어떻게 하지?
사실 지금도 모른다.
그래서 이전 게시판 만들며 수정과 삭제를 위한 암호 기능 달 때 사용했던, 암호화를 사용하기로 했다.
function encrypt(arr) {
return CryptoJS.AES.encrypt(JSON.stringify(arr), "").toString();
}
function decrypt(string) {
return JSON.parse(CryptoJS.AES.decrypt(string, "").toString(CryptoJS.enc.Utf8));
}때문에 생성되는 코드는 복붙하기에도 조금 귀찮은 꽤 장문이 되었고, 덕분이랄지 ClipboardJS() 라이브러리를 체험해본 건 그래도 나름 좋은 일이라고 생각이 된다.
function pageMain(arrs, order, ID) {
const clipboard = new ClipboardJS(".thisID");
let nowOrder = 1;
document.querySelector(".thisID").value = ID;
document.querySelector(".thisID").setAttribute("data-clipboard-text", ID);
...그래도 여전히 코드를 줄일 수 있는 방법을 찾고 있으니 괜찮은 방법 있음 댓글 등으로 알려주세요.
카드 셔플에 대해서는 이전과 동일하게 피셔-예이츠 셔플(Fisher-Yates shuffle) 방법을 사용했다.
function arrayShuffle(array) {
for (let i = array.length - 1; i > 0; i--) {
const randomPosition = Math.floor(Math.random() * (i + 1));
const temporary = array[i];
array[i] = array[randomPosition];
array[randomPosition] = temporary;
}
return array;
}result
지난번 포스팅에서 코드 전문공개는 나 나름의 뿌듯함의 표시이지만 어차피 깃허브에서 역변과정까지 들여다 볼 수 있는거 굳이 필요하지 않겠다 싶어 생략하겠다.
사실 이걸 적으면서도 계속 복붙해오고 싶어서 손가락이 근질근질 거린다.
코드 진심 더러운데... 나중에 리펙토링 전후를 블로그에 남기면 흥미진진하지 않을까...? 를 리펙토링 하기도 전에 생각하고 있다.
어차피 리펙토링 전후 비교도 깃허브로 해결되는데도.
최근에 깃허브 페이지라는 좋은 문물을 배웠기에 이번엔 배포는 그냥 깃허브 페이지로 해결보았다.
배포: https://april35592.github.io/shuffle_topten_number/
깃허브: https://github.com/april35592/shuffle_topten_number/
잘 작동되는 것 같다... 오늘 저녁 시험으로 온라인에서 같이 탑텐TV 할 사람을 모았으니 즐겁게 놀고 오겠다.
After?
이전 토이프로젝트로 코드네임 정답 셔플기를 만들면서 나는 이 프로그램이 실물 게임의 가치를 떨어뜨리진 않을까 진지하게 고민했다.
일단 나부터가 당장 게임이 없는데 게임을 하고 싶어서 만들었던 거니까...
으으 양심이...
(그 이후 최소한의 게임 제작자와 유통과정에서 수고해주신 모든 분들께 리스펙의 의미로 게임을 구매했고, 앞서 말했던 고민거리를 덜어주는 물질적 가치의 위대함을 새삼 깨닫긴 했다.)
그런 의미에서 혹시 제 프로그램으로 게임을 즐기시게 되거든 실물 게임도 하나씩 구매해주세요.
괜히 모인사람끼리 짱구 안굴려도 되고 게임이 조금더 편해집니다.
.
그나저나 여전히 코드가 더럽다. 어떻게 정리를 해야할지 모르겠다.
남편은 잘 짜인 코드를 자주 봐야 실력이 는다는데, 깃허브로 서치해보니까 내 수준으로 이해하기 어려운 코드만 너무 잔뜩이야......
음, 일단 실력을 키워야겠다.
