홍차 블로그

지난번 글에서 지뢰찾기 게임의 사용자 인터페이스를 변경 했었다. https://mc500.tistory.com/676 이번 글에서도 이어서 깃발 표시 부분과 최고 점수 부분에 대해 변경해 보도록 하겠다. 5. 깃발 표시된 상자 클릭시 알림 제거하기 현재 구현으로는 깃발을 표시한 곳을 클릭하면 이미 깃발이 있다는 alert 메시지를 띄운다. 문제는 이렇게 alert가 떠 있는 상태에서도 시간은 지나가게 되므로 기록 경신에 성가신 부분이 있다. 그래서 그 부분을 제거한다. if (box.flagged) { //this.alert('Flagged') return } else if (box.value == CONST_MINE) { 6. High Score Board 표시 각 레벨별로 최고 기록을 알 수 있도록 ..

지난번 글에서 지뢰찾기의 점수에 대해 이야기 했었다. https://mc500.tistory.com/674 이번 글에서는 몇 가지 사용자 인터페이스 변경을 해 보도록 하겠다. 1. 지뢰 및 깃발 크기 조절 현재 지뢰와 깃발의 이미지 원본에도 약간의 공간이 있다. 하지만 상자에 너무 가득 찬 느낌이 있어 상하좌우 약간의 공간을 두어 크기를 조절하도록 하자. ctx.drawImage(this.sprite, 0, 0, 1162, 1162, x+offset, y+offset, w-offset*2, w-offset*2) 2. 게임 시작 버튼 및 성공 실패 시 alert 대체 Windows 에 있던 지뢰 찾기 게임는 노란색 스마일 아이콘이 게임의 시작과 상태 및 종료를 표시하고 있었다. 이걸 구현해 보고자 한다. ..

지난번 지뢰찾기의 난이도 조절을 대해 다루어 보았었다. https://mc500.tistory.com/673 이번 글에서는 좀 더 게임답게 게임 점수에 대한 부분을 만들어 보도록 하자. 지뢰찾기의 승리조건은 지뢰가 없는 안전한 곳을 다 찾는 것이다. 그리고 한 번이라도 지뢰를 건드리면 실패다. 따라서, 게임 점수로서 정할만한 것이 게임을 시작해서 승리까지 걸린 시간이 가장 적절한 것으로 보이므로, 가장 빠른 시간에 승리를 한 것을 최고 점수로 기록할 수 있도록 한다. 게임 기록은 어딘가에 저장을 해 놓을 수 있는 방법이 있지만 나중에 개선 사항으로 남겨 두기로하고, 이번 글에서는 단지 기능만 구현하기로 한다. 우선 게임 점수와 시작 시간에 대한 변수를 먼저 구성한다. highscores: { beginn..

지난 번에 글까지 어느정도 지뢰 찾기 게임으로서 동작 확인할 수 있었다. https://mc500.tistory.com/671 이번 글에서는 게임으로서의 사용성에 개선에 대한 부분을 다루고자 한다. 1. 느린 클릭 반응 속도 지뢰 찾기 게임에 익숙한 사람들은 이 게임을 했을 때 약간 불편하기도 하고 좀 어색한 부분이 있었을 것이다. 뭔가 반응이 느린듯한 느낌을 받기 때문인데, 이는 마우스의 클릭에 대한 인식을 mouse up event에서 하기 때문이다. 특히 터치패드와 같은 경우는 지연 처리 시간이 포함되어 있기에 더욱 그렇게 느껴진다. 그래서 mouse up event 대신 mouse down event에서 처리되도록 코드를 수정하면 사용자 경험이 개선되는 효과를 느낄 수 있다. 2. Auto dig..

지난번 글까지 지뢰 찾기가 어느 정도는 실행되는 모습을 갖추었었다. https://mc500.tistory.com/670 이번 글에서는 지뢰찾기 게임의 성공/실패 조건을 구현해 보도록 하겠다. 지뢰 찾기의 게임의 승리조건은 아주 단순하다. 게임판에 있는 모든 지뢰를 정확하게 찾는 것이다. 그렇다면 깃발을 지뢰 위에 올려 놓으면 되는것 같아 보인다. 하지만 깃발은 여기가 지뢰가 있을 수 있으니 건드릴 수 없도록 막아 놓는 것일 뿐 실제 지뢰의 존재 여부는 명확하지 않다. 그렇다면 어떻게 모든 지뢰를 찾았다는 것을 알 수 있을까? 지뢰 찾기 게임에서 모든 지뢰를 찾았다는 것은, 곧 지뢰를 제외한 나머지 부분이 안전하다는 것이다. 따라서, 사용자가 지뢰가 아닌 상자를 모두 열었다면 이것은 모든 지뢰를 찾았다는..

지난번 어느정도 필요한 부분을 확인해 보았다. 이제는 이를 이용해서 좀 더 상세 구성을 해 보기로 하자. https://mc500.tistory.com/669 우선은 랜덤으로 지뢰를 생성하고 어떻게 나오는지 확인해 보자. 먼저 각 상자에 대한 정보를 초기화 한다. // Init box let boxes = [] let n = this.mines for (let y=0;y 0) { callback(x-1, y-1) } // Left-Bottom if (y 0) { callback(x+1, y-1) } // Right-Bottom ..

지난번에 지뢰찾기를 만들어보겠다고 하고 말았는데 이번 글부터는 필요한 부분을 하나씩 확인해 보자. https://mc500.tistory.com/668 Breakout 예제에서와 같이 Pure Javascript 를 이용할 수도 있겠지만, 웹 SPA이면서도 비교적 간단히 사용할 수 있는 Vue.js를 기반 framework으로 시작해 보기로 했다. 여기서 Vue.js에 대한 설명을 할 것은 아니고 상세 내용은 https://vuejs.org/ 를 참고하기 바란다. Vue CLI의 create 명령을 이용하면 Vue.js로 구성된 간단한 프로젝트가 만들어진다. 그리고 yarn이나 npm 명령으로 필요한 모듈을 설치하고 서버를 실행 할 수 있는데, 웹 브라저로 http://localhost:8080/ 에 접..

지뢰 찾기는 단순하지만 정적인 게임이다. 이 게임은 마이크로 소프트 Windows 3.1 부터 기본 제공 게임에 포함되어 있었다. 그래픽 요소가 많은 Windows를 불편하지 않게 사용하려면 커서와 이를 움직이는 마우스를 잘 다뤄야 했는데, 이전 글자 위주의 DOS 환경에서는 마우스보다는 키보드 사용이 더 익숙했기에, 마우스를 이용한 포인터 (마우스 커서) 이동, 좌/우 클릭과 같은 동작을 주로 하는 이 지뢰찾기 게임이 Windows 환경 적응에 도움이 되었다고 한다. 이와 비슷한 것이 오델로, 카드 놀이(솔리테어) 등도 마찬가지다. DOS 시절 타자 연습 프로그램에 포함되어 있던 게임도 비슷한 역할이라 볼 수 있다. 이야기가 길어졌는데, 한동안 Windows에 같이 포함되어 있던 지뢰 찾기는 이제 Wi..