프로젝트/지뢰피하기

[21/10/29] 순위표 UI 변경

💣 지뢰피하기 💣 https://avoidmine-gvwrc.run.goorm.io/ 도전 모드의 맵을 계속 추가하다보니 순위표에서 도전 모드의 맵을 선택하는 콤보박스가 너무 길어져서 보기가 흉했다. 그래서 드롭다운 메뉴로 변경하였다.

[지뢰피하기 21/09/25] 새로운 모드 추가

💣 지뢰피하기 💣 https://avoidmine-gvwrc.run.goorm.io/ 그 동안 거의 일주일 내내 버그 수정과 새로운 모드 개발에 매진했었다. 여러 가지 문제점들이 계속 발생했고, 그와 더불어 새로운 컨텐츠 추가가 늦어지면서 추석 이후로는 사람들의 발길이 끊어지게 되었다... 도전 모드 추가 (9/16) 새로운 모드인 도전 모드를 추가하고, 기존의 게임에는 클래식 모드라는 이름을 붙였다. 클래식 모드는 전부 클리어하려면 꽤 오랜 시간이 걸린다. 또한, 다시 시작하면 1스테이지부터 또 시작해야 하니까 금방 질릴 수도 있을 것 같았다. 그래서 하나의 스테이지만 클리어하면 끝나는 짧게 플레이할 수 있는 모드를 만들기로 했다. 도전 모드에서는 정해진 규격의 맵과 정해진 양의 지뢰, 정해진 개수의 ..

[지뢰피하기 21/09/13] UI 변경 및 순위표 등록 방식 변경

💣 지뢰피하기 https://avoidmine-gvwrc.run.goorm.io/ 어제 교내 커뮤니티에서 받은 피드백을 반영하여 약간의 UI를 변경하고 기능을 추가하였다. - 캐릭터 alpha 값을 낮춰서 현재 밟고 있는 칸의 숫자가 보이도록 함 - R 키를 눌렀을 때 색깔 힌트의 모양이 보이는데, 이 효과가 매 스테이지마다 초기화되지 않고 유지되도록 함 - R 키를 눌러 나오는 색깔 힌트 모양이 칸을 클릭했을 때 칠해지는 색에 가려서 보이지 않던 것을 보이게 함 - 남은 지뢰 개수를 하단 바에 추가함 - 제한 시간이 30초 남았음을 알리는 효과음 추가 그리고 불필요한 GET 요청을 없애기 위해 효과음 파일들을 미리 배열에 Audio 객체로 저장해놓고 필요할 때마다 play하도록 했고, 순위표는 처음 클..

[지뢰피하기 21/09/12] 순위표 추가

💣 지뢰피하기 https://avoidmine-gvwrc.run.goorm.io/ 이 프로젝트를 시작한 지 거의 한 달이 다 되어가는데 아직도 완성을 못 하였다. 사실 처음으로 서버도 만들어 보고 db도 다뤄보고 배포도 다 처음 해보는 것인데, 그에 비해 너무 많은 것을 바랐던 것 같다. 일단 뷰를 분리하지 않고 클라이언트에 코드가 다 공개되어 있어서 값을 마음대로 조작할 수 있던 문제를 해결하는 데 모든 힘을 다 뺐다. 그리고 심지어는 해결하지도 못하였다. 처음에 생각했던 방법대로 캐릭터를 움직일 때마다 데이터를 받아 오는 방식은 너무 비효율적이고 느리다. 결국 이 문제를 해결하지 못해서 며칠 동안 손을 놨었다. 그런데 내가 이 프로젝트를 처음 시작할 때 목표로 했던 것은 내가 생각한대로 게임을 구현하..

VanillaJS로 웹 게임 제작 도전 - 지뢰피하기

나는 자바스크립트를 책으로만 공부했다. 자바스크립트의 문법과 개념 이해에만 주력하고 정작 중요한 프로젝트는 하나도 진행하지 않았었다.『모던 자바스크립트 Deep Dive』라는 책을 N회독하면서 실행 컨텍스트, this바인딩, ES6+의 문법을 나름 잘 이해했다고 생각했고, 그렇게 자신감에 찬 상태로 첫 프로젝트를 시작하게 되었다. 💣 지뢰피하기 https://avoidmine-gvwrc.run.goorm.io/ 지뢰피하기는 키보드로 조작하는 지뢰찾기(MineSweeper)라는 컨셉으로 구상한 게임이다. 기존의 지뢰찾기 게임은 마우스로 지뢰가 있는 칸에 깃발을 꽂고 지뢰가 아닌 모든 칸을 다 열면 승리하는 방식이지만, 이 게임은 시작점과 도착점이 있고 WASD키로 자신의 캐릭터를 움직여 지뢰를 피해 도착점..