[JAVA] Technology that supports poop makers ~ Does state transition dream of poop?

Birth of a poop maker

I made a browser game called "Poop Maker".

ホーム - うんちメーカー no unchi.png

It is a game that competes for the length of poop and has an online ranking function. The technology used is Django, Vue, etc. This time I would like to write about the technology used by this poop maker.

The leading role is Vue

I used Vue as the front-end framework. Vue is a component-oriented framework that allows you to define modules in units called SFC (Single File Component). For example, like ↓.

python


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

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

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

SFC is a component that combines JavaScript, HTML, and CSS into one file, and you can develop efficiently by combining these into one file. By using a component like ↓, you can pass data to an attribute.

python


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

The data passed to the attribute is shared in SFC with a variable in the object called props. For example, if you change the value of my-data in ↑, this variable will be reflected in SFC in real time. By using this props function, you can easily define a component with a state.

Component state transition

With this development, I thought that the game is a mass of state transitions. State transition is a technology that changes the behavior of modules, etc. by preparing one variable that defines the state and changing the value of that variable one after another.

For example, if you have a variable like ↓

python


const status = 'first'

This variable is referenced as ↓.

python


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

State transition can be realized by writing the process according to the state in the case of the switch statement. The variable itself that has the state changes during the processing of each state.

By giving the props of the previous component such a state, it is possible to make the component perform a state transition. For example, like ↓.

python


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

Within the component, loop through setInterval to monitor this condition.

python


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
    }
  },
},

Poop maker objects have complex states, but basically they operate with such state transitions.

Usefulness of state transitions in game development

I learned state transitions by parsing character strings, but I found that this development can also be applied to games. The game has complex conditions, but there is a high probability that your anus will puncture if you try to handle them all at once. However, it is easier to develop by dividing and governing the behavior of the entire game in units of states.

The usefulness of state transitions in game development is certain, and I thought that what you can make will differ if you do not know this. If you do not know it, you will make a kusoge, but if you know it, you can make a kusoge like a poop maker.

Application to design patterns

There is a famous GoF State pattern as a design pattern for managing the state, but I didn't use it this time.

I didn't even need to use the poop maker because it was a fairly small app, but depending on the size, it may be necessary to verify the use of these design patterns.

in conclusion

It's a stressful world, but let's get rid of it with a lot of poop makers.

that's all.

Recommended Posts

Technology that supports poop makers ~ Does state transition dream of poop?
Technology that supports jupyter: traitlets (story of trying to decipher)
Technology that supports Python Descriptor edition #pyconjp