I made a browser game called "Poop Maker".
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.
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.
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.
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.
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.
It's a stressful world, but let's get rid of it with a lot of poop makers.
that's all.