프리 프리셀

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

여기까지는 하다가 사이드 프로젝트의 방식처럼 다른 일에 정신이 팔려버렸어요.

최근에 시간이 좀 있어서(나도 그럴 줄은 몰랐지만) 한번 더 해봐야겠다는 생각이 들었다.

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

결과를 보려면 github.io에서 확인하세요. 프리셀을 플레이하려면 여기를 클릭하세요!

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

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

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

<template v-for="cardCol in game.table">
    <template v-for="card in cardCol">

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

<template v-for="rowi in game.getLargestColumnCount()">
  <template v-for="coli in game.table.length">
    <div v-if="game.table[coli-1].length == 0 && rowi == 1" :class="'card column'+coli+' freecell'">
      <img src="cards/blank.png" @click="game.selectDropClear(coli-1, rowi-1)" >
    </div>
    <div v-else-if="game.getCard(coli-1, rowi-1) != ''" :class="'card '+cardClass(coli-1, rowi-1)">
      <img :alt="cardToCardName(game.getCard(coli-1, rowi-1))" :src="'cards/'+game.getCard(coli-1, rowi-1)+'.png'" @click="game.selectDropClear(coli-1, rowi-1)">
    </div>
  </template>
</template>

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

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

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

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

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

눈에 띄지 않는 몇 가지 버그가 남아 있더라도 결과는 전반적으로 만족스럽습니다.

멜렌 / 프리셀

카드 게임 Free Cell의 구현

위 내용은 프리 프리셀의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!