Videojuegos con Vue:

Lessons learned

Sobre mi

Que piensa la gente cuando piensa en videojuegos

(uncharted, battlefield)

Sudden realization: sé programar

Live

UI basadas en texto

UI basadas en texto

UI basadas en texto

Live

Control del tiempo

  // ...
  mounted () {
    eventBus.$on('gameStatusChange', this.handleGameStatusChange)
    this.startGameLoop()
  },
  beforeDestroy () {
    this.resetGameLoop()
  },
  methods: {
    startGameLoop () {
      // to be overwritten by component
    },
    resetGameLoop () {
      clearTimeout(this.loop)
      this.loop = null
    },
    handleGameStatusChange (isPaused) {
      if (isPaused) {
        this.resetGameLoop()
      } else {
        this.startGameLoop()
      }
    }
  }

Control del tiempo

SetTimeout y SetInterval

  
  // Stats.vue
  methods: {
    ...mapMutations(['decrease']),
    startGameLoop () {
      this.decreaseStats()
    },
    decreaseStats () {
      const decreaseInterval = 12 * 1000
      this.loop = setTimeout(() => {
        if (this.isActive) {
          // decrease all stats

          this.decreaseStats()
        }
      }, decreaseInterval)
    }
  }

  // DaysCounter.vue
  methods: {
    ...mapMutations(['increaseDayCount']),
    startGameLoop () {
      this.startDayTimer()
    },
    startDayTimer () {
      const day = 1000 * 60
      this.loop = setTimeout(() => {
        if (this.isActive) {
          this.increaseDayCount()
          this.startDayTimer()
        }
      }, day)
    }
  }

Control del tiempo

Problemas

Precisión

No son 100% precisas

The time, in milliseconds (thousandths of a second), the timer should wait before the specified function or code is executed. [...] The actual delay may be longer than intended.

MDN

...

12

12

12

12

12

55

Pausa

Days

Days

Pausa

Control del estado

Store o componente?

Necesidades

  • Control del tiempo
  • Acciones con resultado
  • Control del estado
  • Leaderboard

Eurobattle

Game Jam

Todas Jammers II

Eurobattle

Control del tiempo

Por turnos

Control del estado

Todo en el store!

(o casi)

Control del input

Form elements

Radio Liberty

Cosas que me gustan

Cosas aprendidas

Cosas por aprender

Aventura gráfica con aspectos de survival

Radio Liberty

WIP

Phaser

  • Animaciones
  • Control de movimiento
  • Especializado
  • Aprender
  • Renderizar HTML
  • Control del estado
  • Documentación
  • Aprender 😅

Pros

Cons

Phaser

  • Animaciones
  • Control de movimiento
  • Especializado
  • Aprender
  • Renderizar HTML
  • Control del estado
  • Documentación
  • Aprender 😅

Pros

Cons

Videojuegos con Vue:

By nuria-fl

Videojuegos con Vue:

  • 121
Loading comments...

More from nuria-fl