오래전 같은 은하계에서 저는 Angular 1.3을 배우기 위해 프리셀을 만들기 시작했습니다.

지금까지 왔는데 사이드 프로젝트처럼 다른 일에 정신이 팔려버렸어요.

최근에 시간이 좀 있어서(저도 알아요, 저도 예상하지 못했어요) 한번 더 시도해 봐야겠다고 생각했어요.

저는 더 이상 Angular 1.3에 관심이 없고 프레임워크가 필요한 경우 웹 작업에 VueJS를 사용하는 경향이 있기 때문에 본질적으로 처음부터 시작했습니다.

결과를 보려면 github.io에 있습니다. 프리셀을 플레이하려면 여기를 클릭하세요!

15년 전에 WPF를 배운 이후로 저는 MVVM 스타일의 프로그래밍을 정말 좋아했습니다. VueJS는 UI를 업데이트하기 위한 명시적인 이벤트 없이도 해당 스타일을 매우 쉽게 허용하고 개선하기까지 합니다.

이는 게임 로직이 뷰 로직과 완전히 분리되어 있어 이 게임을 쉽게 작성할 수 있음을 의미합니다.

어떤 이유로든 카드를 2D 들쭉날쭉한 배열에 저장하기로 결정했기 때문에 비행기 항해가 전부는 아니었습니다. 끔찍한 생각은 아니지만 각 내부 배열은 열이므로 CSS 그리드에서 카드를 올바르게 레이아웃하려고 할 때
와 같이 외부 배열과 내부 배열을 반복할 수 없었습니다.

열을 행으로 배치하기 때문입니다. 그래서 객체 대신 인덱스(VueJS는 왜 0부터 시작하지 않나요???)를 사용해야 했고 내부 루프의 외부 배열을 반복해야 했습니다.

내가 내린 다른 두 가지 나쁜 디자인 결정은 자동 완성을 구현하고 클릭 핸들러를 뷰가 아닌 게임(예: 모델)의 하나의 기능으로 만들고 뷰가 어떤 과정을 수행하는지 파악하도록 하는 것입니다. 취해야 할 조치.

게임에서 플레이어가 의미하는 작업(예: 카드(또는 카드 스택) 선택, 다른 스택에 카드 배치 또는 카드 선택 취소)을 결정하도록 함으로써 나중에 리팩토링할 수 있는 스파게티 코드가 생성되었습니다.

처음에는 논리에 대해 생각하고 싶지 않았기 때문에 자동 완성을 구현하고 싶지 않았습니다. 하지만 이 기능 없이 몇 게임을 플레이한 후 각 카드를 홈 행에 두드리는 것이 너무 지루해져서 이를 구현해야겠다는 생각이 들었습니다.

그냥 나쁘기 때문에 총을 고수했어야 했어요. 처음에는 많은 버그와 머리 긁힘을 야기한 엄청난 양의 코드입니다. 심지어 완전 자동도 아닙니다. 반면에 이제는 탭핑을 거의 하지 않아도 됩니다.

저는 카드를 끌어서 놓을 수 없게 만드는 것에 대해 고집했습니다. 대부분 휴대폰과 태블릿에서 플레이하기 위해 만들었기 때문에 제자리에 두드리는 것이 UX 측면에서 훨씬 쉽습니다(적어도 내 UX, ymmv).

눈에 보이지 않는 몇 가지 버그가 남아 있더라도 전반적으로 결과에 만족합니다.