전체 글
-
지뢰찾기를 만들어보자 #5 - 사용성 개선기술 관련/etc 2022. 9. 28. 21:47
지난 번에 글까지 어느정도 지뢰 찾기 게임으로서 동작 확인할 수 있었다. https://mc500.tistory.com/671 이번 글에서는 게임으로서의 사용성에 개선에 대한 부분을 다루고자 한다. 1. 느린 클릭 반응 속도 지뢰 찾기 게임에 익숙한 사람들은 이 게임을 했을 때 약간 불편하기도 하고 좀 어색한 부분이 있었을 것이다. 뭔가 반응이 느린듯한 느낌을 받기 때문인데, 이는 마우스의 클릭에 대한 인식을 mouse up event에서 하기 때문이다. 특히 터치패드와 같은 경우는 지연 처리 시간이 포함되어 있기에 더욱 그렇게 느껴진다. 그래서 mouse up event 대신 mouse down event에서 처리되도록 코드를 수정하면 사용자 경험이 개선되는 효과를 느낄 수 있다. 2. Auto dig..
-
지뢰찾기를 만들어보자 #4 - 승리 조건 구성기술 관련/etc 2022. 9. 25. 19:24
지난번 글까지 지뢰 찾기가 어느 정도는 실행되는 모습을 갖추었었다. https://mc500.tistory.com/670 이번 글에서는 지뢰찾기 게임의 성공/실패 조건을 구현해 보도록 하겠다. 지뢰 찾기의 게임의 승리조건은 아주 단순하다. 게임판에 있는 모든 지뢰를 정확하게 찾는 것이다. 그렇다면 깃발을 지뢰 위에 올려 놓으면 되는것 같아 보인다. 하지만 깃발은 여기가 지뢰가 있을 수 있으니 건드릴 수 없도록 막아 놓는 것일 뿐 실제 지뢰의 존재 여부는 명확하지 않다. 그렇다면 어떻게 모든 지뢰를 찾았다는 것을 알 수 있을까? 지뢰 찾기 게임에서 모든 지뢰를 찾았다는 것은, 곧 지뢰를 제외한 나머지 부분이 안전하다는 것이다. 따라서, 사용자가 지뢰가 아닌 상자를 모두 열었다면 이것은 모든 지뢰를 찾았다는..
-
지뢰찾기를 만들어보자 #3 - 게임 로직 구성기술 관련/etc 2022. 9. 24. 10:32
지난번 어느정도 필요한 부분을 확인해 보았다. 이제는 이를 이용해서 좀 더 상세 구성을 해 보기로 하자. 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 ..
-
지뢰찾기를 만들어보자 #2 - 기본 환경 구성기술 관련/etc 2022. 9. 17. 16:29
지난번에 지뢰찾기를 만들어보겠다고 하고 말았는데 이번 글부터는 필요한 부분을 하나씩 확인해 보자. 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/ 에 접..
-
지뢰찾기를 만들어보자 #1 - 지뢰 찾기 게임 배경기술 관련/etc 2022. 9. 14. 21:48
지뢰 찾기는 단순하지만 정적인 게임이다. 이 게임은 마이크로 소프트 Windows 3.1 부터 기본 제공 게임에 포함되어 있었다. 그래픽 요소가 많은 Windows를 불편하지 않게 사용하려면 커서와 이를 움직이는 마우스를 잘 다뤄야 했는데, 이전 글자 위주의 DOS 환경에서는 마우스보다는 키보드 사용이 더 익숙했기에, 마우스를 이용한 포인터 (마우스 커서) 이동, 좌/우 클릭과 같은 동작을 주로 하는 이 지뢰찾기 게임이 Windows 환경 적응에 도움이 되었다고 한다. 이와 비슷한 것이 오델로, 카드 놀이(솔리테어) 등도 마찬가지다. DOS 시절 타자 연습 프로그램에 포함되어 있던 게임도 비슷한 역할이라 볼 수 있다. 이야기가 길어졌는데, 한동안 Windows에 같이 포함되어 있던 지뢰 찾기는 이제 Wi..
-
[모델] 프라모델 스타터 세트 #3/3 - M1126 Stryker vehicles 1/72일상/취미 2022. 9. 12. 10:25
지난번 F-16A 항공기, 비스마르크 전함에 이어 마지막 세트인 스트라이커 장갑자를 만들어 보았다. 이 프라모델 스타터 세트 중 가장 부가적인 설명이 많이되어 있는 설명서가 포함되어 있다. 아래 사진에서도 볼 수 있는 것처럼 이것만 보면 마치 1/32 모델용 설명서 같은 느낌이 나며 조립하는 동안 앞서 두 모델의 부실함에 대한 실망감을 메울 만큼 상세 표현이 되어 있는 모델이다. 어쩌면 1/35 모델을 1/72로 스케일을 조정해서 발매한 것일지도 모르겠다. 1/72 모델임에도 불구하고 가늘고 긴 부품이 많이 들어 있는데 이런 부분이 신경이 좀 쓰이기는 하지만 하나씩 부분 부분이 만들어 질 때마다 꽤 큰 만족감을 느끼게 한다. 설명서에는 뒷 부분을 본체에 먼저 붙이라고 되어 있었지만 단차여부만 확인하고 나..
-
[모델] 프라모델 스타터 세트 #2/3 - Bismarck Battleship 1/800일상/취미 2022. 9. 4. 17:27
스터터 세트 첫 번째로 항공기인 F-16A 모델을 만들었었는데, 이번에 그 두 번째 모델인 배을 만들어 보았다. 먼저 설명서를 보면 부품도 나와 있고 나름 요즘 발매되는 설명서와 비슷한 구성이다. 그렇지만 1/800 스케일이라 그런지 세부 설명이 그리 많지는 않다. 그래도 F-16 보다는 낫다. 입체적인 전함을 도색하기에는 실력이 너무 없었고 그렇다고 안하기는 좀 아쉬운 마음이 들어 흘수선, 갑판, 함포 정도만 칠해 보기로 했다. 선체에 마스킹 테이브로 경계를 정하고 색을 입혔는데 마스킹 테이프 제거 시 도장이 같이 뜯겨져 나왔다. 오래 건조를 하지는 않았어도 어느정도는 마른 상태였는데 이런 일이! 게다가 마스킹 테이브면 관리를 잘못했는지 경계면도 지저분하게 허물어져 버렸다. 결국 다시 칠하는 수 밖에...
-
[모델] 프라모델 스타터 세트 #1/3 - USAF F-16A 1/72일상/취미 2022. 8. 29. 19:07
아카데미 프라모델 스타터 세트를 몇 달전에 오래전에 충동(?) 구매했었다. 사실 마트 갈 때마다 뭔가 무심하게 팔고있는 저렴한 가격에 여러 가지가 포함되어 있는 모델이 궁금하기도 했고, 이런(?) 것도 한 번 만들어 보고 싶다는 생각에 사들고 왔었다. 그런데 어찌 어찌 하다보니 산지 몇 달이 지나도록 포장도 안뜯고 보관중이었다가, 지난 연휴 동안 하나씩 만들어 보기 시작했다. 사실 내용물은 별거 없다 육해공에 대한 프라모델에 모델용 니퍼를 곁들여서 파는 것으로 사람들에게 큰 어필은 못하는 것 같았다. 하지만 대충 눈치챘겠지만 여기 포함된 제품들은 상당히 오래전 금형으로 만들어진 것으로 약간 재고 떨이 느낌도 난다. 하지만 그걸 직접 확인하고 싶어서 사온 내겐 저렴 하면서도 재밌는(?) 제품이라는 생각이 ..