똥 메이커의 탄생

"똥 메이커"라는 브라우저 게임을 만들었습니다.

홈 - 똥 메이커

똥의 길이를 경쟁하는 게임으로 온라인 순위 기능이 있습니다.
사용한 기술은 Django, Vue 등입니다.
이번은 이 똥 메이커에서 사용하고 있는 기술에 대해서 써 보고 싶습니다.

주역은 Vue

프런트 엔드 프레임 워크는 Vue를 사용했습니다.
Vue는 컴포넌트 지향 프레임워크로, SFC(Single File Component)라는 단위로 모듈을 정의할 수 있습니다.
예를 들면 ↓와 같습니다.

<script>
export default {
  data () {
    return {
    }
  }
}
</script>

<template>
  <div class="">Hello, World!</div>
</template>

<style lang="scss" scoped>
</style>

SFC는 JavaScript, HTML, CSS를 하나의 파일로 정리한 컴포넌트로, 이들을 하나로 정리함으로써 효율적으로 개발할 수 있습니다.
↓와 같이 컴포넌트를 이용하면 속성에 데이터를 전달할 수 있습니다.

<my-component :my-data="1" />

속성에 전달된 데이터는 SFC에서 props라는 객체의 변수에 공유됩니다.
이 변수는 예를 들어 ↑ my-data의 값을 변경하면 변경 사항이 실시간으로 SFC에도 반영됩니다.
이 props 의 기능을 사용하는 것으로, 상태를 가지는 컴퍼넌트를 간단하게 정의할 수가 있습니다.

구성 요소의 상태 전환

게임은 상태 천이의 덩어리라고 이번 개발에서 생각했습니다.
상태 천이란 상태를 정의한 변수를 하나 준비하고 그 변수의 값을 차례로 변화시켜 모듈 등의 동작을 바꾸는 기술을 말합니다.

예를 들어 ↓와 같은 변수가 있다면,

const status = 'first'

이 변수는 ↓처럼 참조됩니다.

switch (status) {
case 'first': /* TODO */ break
case 'running': /* TODO */ break 
case 'waiting': /* TODO */ break
}

switch 문장의 case 에 상태에 따른 처리를 쓰는 것으로, 상태 천이를 실현시킬 수가 있습니다.
상태를 가지는 변수 자체는, 각 상태의 처리중에서 변경해 갑니다.

방금 전의 컴퍼넌트의 props 에 이러한 상태를 갖게 하는 것으로, 컴퍼넌트에 상태 천이를 실시시킬 수가 있습니다.
예를 들면 ↓와 같습니다.

<my-component :status="myComponentStatus" />

컴퍼넌트내에서는, setInterval 로 루프를 돌려, 이 상태를 감시시킵니다.

mounted () {
  this.iid = setInterval(this.update, 16.66)
},

methods: {
  update () {
    switch (this.status) {
    case 'first': /* TODO */ break
    case 'running': /* TODO */ break
    case 'waiting': /* TODO */ break
    }
  },
},

똥 메이커의 객체는 복잡한 상태를 가지고 있지만, 기본적으로는 이러한 상태 천이로 동작하고 있습니다.

게임 개발에서 상태 전이의 유용성

나는 상태 천이는 문자열의 퍼스등에서 배웠습니다만, 이번 개발로 게임에도 응용할 수 있는 것을 알았습니다.
게임은 복잡한 상태를 가지고 있지만 한 번에 처리하려고하면 항문이 높은 확률로 펑크됩니다.
그러나 상태라는 단위로 게임 전체의 행동을 분할 통치함으로써 개발이 용이해집니다.

게임 개발에 있어서의 상태 천이의 유용성은 확실한 것으로, 이것을 알고 있으면 모른다고는 만들 수 있는 것이 다르다고 생각했습니다.
모르면 빌어 먹을 게임을 만들게 되어 버립니다만, 알고 있으면 똥 메이커와 같은 빌어 먹을 게임을 만들 수 있습니다.

디자인 패턴에 적용

상태를 관리하는 디자인 패턴에 유명한 GoF State 패턴이 있지만 이번에는 사용하지 않았습니다.

19. State 패턴 | TECHSCORE (텍스 코어)

똥 메이커는 꽤 규모가 작은 앱이었기 때문에 이용할 필요도 없었습니다만, 규모의 크기에 따라서는 이러한 디자인 패턴의 이용을 검증할 필요가 있을지도 모릅니다.

결론

스트레스가 많은 세상이지만, 똥 메이커로 가득 내고 깔끔하게합시다.

홈 - 똥 메이커

이상입니다.