Canvas
-
지뢰찾기를 만들어보자 #11 - 사용자 인터페이스 변경 4/4기술 관련/etc 2022. 10. 29. 21:36
지난번 글에서 지뢰찾기 게임의 사용자 인터페이스를 변경 했었다. https://mc500.tistory.com/677 이번 글에서는 이어서 최고 점수 기록에 대한 부분을 추가로 변경해 보도록 하겠다. 7. High Score Board 에 이름 넣기 지난 번 각 레벨별로 최고 기록을 넣고 보니 최고 기록을 세워졌는지에 대한 부분을 사용자가 미처 인식하지 못하는 경우가 많을 수 있다. 따라서 최고 점수 갱신에 대한 확인과 함께 사용자의 이름을 입력 받아 Hight Score Board에 나타나도록 하는 부분을 추가해 보자. 최고 기록 정보에서 레벨별 최고 점수(score 필드) 그리고 그 기록을 세운 사람의 정보 (name 필드)를 같이 구성하도록 다음과 같이 구성해 볼 수 있다. highscores: {..
-
지뢰찾기를 만들어보자 #10 - 사용자 인터페이스 변경 3/4기술 관련/etc 2022. 10. 22. 10:50
지난번 글에서 지뢰찾기 게임의 사용자 인터페이스를 변경 했었다. 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 표시 각 레벨별로 최고 기록을 알 수 있도록 ..
-
지뢰찾기를 만들어보자 #9 - 사용자 인터페이스 변경 2/4기술 관련/etc 2022. 10. 10. 11:08
지난번 글에서 지뢰찾기 게임의 사용자 인터페이스를 변경 했었다. https://mc500.tistory.com/675 이번 글에서는 이어서 점수와 깃발 갯수를 표시하는 부분을 변경해 보도록 하겠다. 3. 점수 및 깃발 수 표시 변경 Windows 지뢰 찾기에는 이 정보를 표시할 때 빨간색 숫자로 표시되었었다. 상태에 따라 표시가 되는 곳을 7개의 구역으로 나누어져 있기에 7 segment 라고 부르며 전광판이나 전자 회로에서 간단한 숫자를 표시할 때 사용된다. 앞서 해왔던 방법으로 위의 이미지를 타일로 만들어 표시하는게 가장 쉬운 방법이다. 하지만 이번에는 HTML5 Canvas의 기능을 이용하여 표현해 보고자 한다. 7 segement의 각 부분에 번호를 지정하고 이를 활용하고자 한다. 번호는 사실 프..
-
지뢰찾기를 만들어보자 #8 - 사용자 인터페이스 변경 1/4기술 관련/etc 2022. 10. 9. 20:19
지난번 글에서 지뢰찾기의 점수에 대해 이야기 했었다. 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 에 있던 지뢰 찾기 게임는 노란색 스마일 아이콘이 게임의 시작과 상태 및 종료를 표시하고 있었다. 이걸 구현해 보고자 한다. ..
-
지뢰찾기를 만들어보자 #7 - 게임 스코어 구현기술 관련/etc 2022. 10. 5. 20:21
지난번 지뢰찾기의 난이도 조절을 대해 다루어 보았었다. https://mc500.tistory.com/673 이번 글에서는 좀 더 게임답게 게임 점수에 대한 부분을 만들어 보도록 하자. 지뢰찾기의 승리조건은 지뢰가 없는 안전한 곳을 다 찾는 것이다. 그리고 한 번이라도 지뢰를 건드리면 실패다. 따라서, 게임 점수로서 정할만한 것이 게임을 시작해서 승리까지 걸린 시간이 가장 적절한 것으로 보이므로, 가장 빠른 시간에 승리를 한 것을 최고 점수로 기록할 수 있도록 한다. 게임 기록은 어딘가에 저장을 해 놓을 수 있는 방법이 있지만 나중에 개선 사항으로 남겨 두기로하고, 이번 글에서는 단지 기능만 구현하기로 한다. 우선 게임 점수와 시작 시간에 대한 변수를 먼저 구성한다. highscores: { beginn..
-
지뢰찾기를 만들어보자 #6 - 게임 난이도 설정기술 관련/etc 2022. 10. 2. 15:58
지난번 지뢰찾기의 사용성 개선에 대해 이야기 했었다. https://mc500.tistory.com/672 이번 글에서는 좀 더 게임답게 게임 설정 및 시작에 대한 메뉴를 만들어 보도록 하겠다. 지금까지는 정해진 크기와 지뢰 갯수만으로 게임을 할 수 있었고, 새로운 게임을 시작하려면 화면을 다시 로딩했어야 했다. 그래서 이와 관련된 메뉴를 추가해 보기로 하자. 필요한 기능은 다음과 같다. 게임 시작/종료 버튼 게임 난이도 선택 상자 게임 시작/종료 버튼의 기능은 다음과 같다. 버튼을 눌러 새로운 게임을 시작한다 게임 중에 누르면 게임을 포기하고 다시 새로운 게임을 시작한다 HTML에 기본 버튼을 추가하고 클릭 시 게임을 초기화 해보자 Mine Sweeper New Game onClickMainButton..
-
지뢰찾기를 만들어보자 #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 이번 글에서는 지뢰찾기 게임의 성공/실패 조건을 구현해 보도록 하겠다. 지뢰 찾기의 게임의 승리조건은 아주 단순하다. 게임판에 있는 모든 지뢰를 정확하게 찾는 것이다. 그렇다면 깃발을 지뢰 위에 올려 놓으면 되는것 같아 보인다. 하지만 깃발은 여기가 지뢰가 있을 수 있으니 건드릴 수 없도록 막아 놓는 것일 뿐 실제 지뢰의 존재 여부는 명확하지 않다. 그렇다면 어떻게 모든 지뢰를 찾았다는 것을 알 수 있을까? 지뢰 찾기 게임에서 모든 지뢰를 찾았다는 것은, 곧 지뢰를 제외한 나머지 부분이 안전하다는 것이다. 따라서, 사용자가 지뢰가 아닌 상자를 모두 열었다면 이것은 모든 지뢰를 찾았다는..