纸牌游戏不能在纸牌之间留出空白

时间:2018-08-25 16:02:23

标签: html css vue.js

我正在构建一个简单的纸牌游戏,并且在纸牌的底部有这样的一行:

enter image description here

当我单击卡时,它与卡的编号匹配,卡消失了,这是预期的行为。问题是,当它消失时,它不会留下一个空白空间,它只会占用下一张卡片的空白空间,如下所示:

enter image description here

**我正在以这种方式制作组件:**

<template>
  <div class="towerLine-wrapper">
    <div class="towerLine">
      <img
        :style="{'left': index * 83 + 'px'}"
        v-for="(line, index) in towerLine"
        @click="removeCard(line, index)"
        :key="line.number"
        class="towerLine__image"
        :src="line.src"
        alt="">
    </div>
    <tri-pack :deckCards="deckCards" />
  </div>
</template>

<script>
import triPack from '../triPack/triPack.vue'

export default {
  data () {
    return {
      currentCard: {}
    }
  },
  props: {
    towerLine: {
      type: Array,
      required: true
    },
    deckCards: {
      type: Array,
      required: true
    }
  },
  methods: {
    removeCard (line, index) {
      this.getCurrentCard()
      const firstCardCheck = this.currentCard.type === 1 && line.type === 13
      const lastCardCheck = this.currentCard.type === 13 && this.currentCard.type === 1
      const otherCardCheck = (line.type + 1 === this.currentCard.type) || (line.type - 1 === this.currentCard.type)
      if ((firstCardCheck || lastCardCheck) || otherCardCheck) {
        this.towerLine.splice(index, 1)
        this.$store.commit('setCurrentCard', line)
      }
    },
    getCurrentCard () {
      this.currentCard = this.$store.getters.getCurrentCard
    }
  },
  components: {
    triPack
  }
}
</script>

<style lang="scss">
  .towerLine {
    display: flex;
    position: relative;
    top: -90px;
    left: -40px;

    &__image {
      width: 80px;
      height: 100px;

      &:not(:first-child) {
        position: absolute;
      }
    }
  }
</style>

我知道这是行不通的,因为当我移出一张卡时,索引的变化和它乘以索引时,它会占据相同的位置来占据空白空间,但是我该如何解决这个问题?

有帮助吗?

0 个答案:

没有答案