D27 - 「来互相伤害啊！」：运筹帷幄

来规划游戏蓝图吧。

视窗规划

基本上和小恐龙单元一样。

视窗主体

负责提供脚位资料、设定栏位。
游戏场景

包含所有游戏角色等等。

不过设定栏位要怎麽设计呢？要先了解摇杆的讯号组成才行，就让我们留到下一章再来研究。

游戏规划

依照场景进行规划。

欢迎场景

D26 - 规划游戏场景：欢迎场景.png

主角

使用摇杆可以控制人物移动，可用於让玩家确认控制器是否正常。
提示文字

告知玩家按下摇杆按钮即可开始。

主场景

进行游戏的主要场景，中央河流分隔，人物不可跨越。

D26 - 规划游戏场景：主场景.png

主角
- 透过摇杆控制人物移动，按下按钮发射武器
- 按下按钮发射武器，并播放发射动画
- 血量显示在左上角，预设 5 点
- 被敌人武器击中时，播放被击中动画并减少生命值
- 生命值归零时，触发死亡事件
主角武器
- 会与敌人发生碰撞
- 向下飞行、随机旋转
- 最多只能存在 1 个武器，不能连续发射
敌人
- 上下随机移动，左右则追着主角移动
- 随机发射武器并播放发射动画
- 血量显示在左上角，预设 10 点
- 被主角武器击中时，播放被击中动画并减少生命值
- 生命值归零时，触发死亡事件
敌人武器
- 会与主角发生碰撞
- 向上飞行、随机旋转
- 最多只能存在 5 个武器，不能连续发射

结束场景

表示游戏结束。

D26 - 规划游戏场景：结束场景.png

主角

依照胜败显示不同人物图片。
提示文字

依照胜败显示不同文字并提示按下摇杆按钮即可重新开始。

建立「视窗主体」

建立 window-app-cat-vs-dog 资料夹管理相关组件并建立 window-app-cat-vs-dog.vue 视窗组件。

概念与「跑跑小恐龙」相同。

src\components\window-app-cat-vs-dog\window-app-cat-vs-dog.vue <script>

/**
 * @typedef {import('@/script/modules/port-transceiver').default} PortTransceiver
 *
 * @typedef {import('@/types/type').PinInfo} PinInfo
 * @typedef {import('@/types/type').PinCapability} PinCapability
 */

import { mapState } from 'vuex';

import mixinWindow from '@/mixins/mixin-window';

import BaseWindow from '@/components/base-window.vue';
import BaseSelectPin from '@/components/base-select-pin.vue';

export default {
  name: 'WindowAppCarVsDog',
  components: {
    'base-window': BaseWindow,
    'base-select-pin': BaseSelectPin,
  },
  mixins: [mixinWindow],
  props: {},
  data() {
    return {};
  },
  computed: {
    ...mapState({
      boardPins: (state) => state.board.info.pins,
    }),

    /** 设定栏位是否完成 */
    isSettingOk() {
      return false;
    },
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    handlePinSelect(newVal, oldVal) {
      if (newVal) {
        this.$store.commit('window/addOccupiedPin', {
          id: this.id,
          pin: newVal,
        });
      }

      if (oldVal) {
        this.$store.commit('window/deleteOccupiedPin', {
          id: this.id,
          pin: oldVal,
        });
      }
    },
    handleErr(msg) {
      this.$q.notify({
        type: 'negative',
        message: msg,
      });
    },
  },
};

src\components\window-app-cat-vs-dog\window-app-cat-vs-dog.vue <template lang="pug">

base-window.window-app-cat-vs-dog(
  :pos='pos',
  header-icon='r_videogame_asset',
  body-class='c-col',
  title='猫狗大战'
)
  .h-full.overflow-hidden
    // 游戏场景

    transition(name='fade-up')
      .setting-form(v-if='!isSettingOk')
        .form-section
          .form-item.mb-20px
            q-icon.mr-10px(name='r_gamepad', size='20px')
            .text-18px.font-700
              | 设定控制器

src\components\window-app-cat-vs-dog\window-app-cat-vs-dog.vue <style scoped lang="sass">

@import '@/styles/quasar.variables.sass'

.setting-form
  position: absolute
  top: 0%
  left: 0px
  width: 100%
  height: 100%
  padding: 20px
  background: rgba(white, 0.9)
  backdrop-filter: blur(4px)
  display: flex
  justify-content: center
  align-items: center
  .form-section
    padding: 20px
    width: 80%
    border-radius: $border-radius-m
    box-shadow: $focus-shadow

  .form-item
    display: flex
    align-items: center
    margin-bottom: 20px

接着回到 app.vue，将右键选单内加入『新增「跑跑小恐龙」』选项，并引入组件。

src\app.vue <template lang="pug">

.screen(@click='handleClick')
  // ...

	// 右键选单
  q-menu(context-menu, content-class='border-radius-s')
    q-list.min-w-260px
      q-item(@click='addWindow("window-digital-io")', clickable, v-close-popup)
        q-item-section
          | 新增「数位 I/O 视窗」
			q-item(@click='addWindow("window-analog-input")', clickable, v-close-popup)
        q-item-section
          | 新增「类比输入视窗」
			q-item(@click='addWindow("window-pwm-output")', clickable, v-close-popup)
        q-item-section
          | 新增「PWM 输出视窗」
			q-separator

      q-item(
        @click='addWindow("window-app-rgb-led-palette")',
        clickable,
        v-close-popup
      )
        q-item-section
          | 新增「RGB LED 调色盘」
			q-item(
        @click='addWindow("window-app-google-dino")',
        clickable,
        v-close-popup
      )
        q-item-section
          | 新增「跑跑小恐龙」
			q-item(
        @click='addWindow("window-app-cat-vs-dog")',
        clickable,
        v-close-popup
      )
        q-item-section
          | 新增「猫狗大战」

src\app.vue <script>

// ...

import WindowDigitalIo from '@/components/window-digital-io.vue';
import WindowAnalogInput from '@/components/window-analog-input.vue';
import WindowPwmOutput from '@/components/window-pwm-output.vue';

import WindowAppRgbLedPalette from '@/components/window-app-rgb-led-palette/window-app-rgb-led-palette.vue';
import WindowAppGoogleDino from '@/components/window-app-google-dino/window-app-google-dino.vue';
import WindowAppCarVsDog from '@/components/window-app-cat-vs-dog/window-app-cat-vs-dog.vue';

export default {
  name: 'App',
  components: {
		'dialog-system-setting': DialogSystemSetting,
    
    'window-digital-io': WindowDigitalIo,
    'window-analog-input': WindowAnalogInput,
    'window-pwm-output': WindowPwmOutput,

		'window-app-rgb-led-palette': WindowAppRgbLedPalette,
		'window-app-google-dino': WindowAppGoogleDino,
		'window-app-cat-vs-dog': WindowAppCarVsDog,
  },
  // ...
};

D27 - 建立猫狗大战视窗.gif