Question

我正在尝试使用vue制作游戏，并且设计了以下结构：

<template>
    <div v-if="status==='beforegamestart'" key="beforegamestart">
        <button v-on:click="startGame()">Start</button>
    </div>

    <div v-else-if="status==='inprocess'" key="inprocess">
        <h1>Game in process</h1>
        <button v-on:click="finishGame()">Finish</button>
    </div>

    <div v-else-if="status==='gameover'" key="gameover">
        <h2>Game over</h2>
    </div>

    <div v-else>
        <h1>Else</h1>
    </div>
</template>

<script>
  export default {
    name: 'GameComponent',
    data() {
      return {
        status: 'beforegamestart'
      }
    },
    methods: {
      startGame: function() {
        this.status = "inprocess";
      },
      finishGame: function() {
        this.status = "gameover";
      }
    }
  }
</script>

<style>

</style>

我想知道制作vue中的飞鸟之类的游戏有什么通用方法，这种游戏具有开始菜单，正在进行的游戏和完成视图？这样可以行吗？我只是想知道如何正确地更改不同的视图。

Answer 1

如果我是你，我将执行以下操作：

第1步：将“开始”，“进行中”和“游戏结束”屏幕分成各自的组件。并将它们导入App.vue（或您想要的任何文件）中，如下所示：

import Start from './Start.vue'
import Game from './Game.vue'
import GameOver from './GameOver.vue'

第2步：在模板中使用动态组件。参见https://vuejs.org/v2/guide/components.html#Dynamic-Components

<component :is="currentState"/>

第3步：拥有一种方法/计算属性（或者为了获得加分，请使用vuex）来处理游戏的当前状态，并且必须根据该值来渲染组件。

computed: {
  currentState: function() {
    switch(status){
      case "beforeGameStart":
        return "Start";
        break;
      ...
    }
  }
}

如何控制Vue应用程序的流程

1 个答案: