vue版-雷霆战机

先看效果

vue-雷霆战机

node + vue + element

图片是网上找的，后期还得再改，目前实现了拖动发射子弹

部分代码

<template>
  <div class="common-layout">
    <el-container>
      <el-header>战机游戏</el-header>
      <el-main @mousemove="mousemove" ref="elePlane">
        <my-plane :coo="coo"></my-plane>
        <img src="@/assets/game/bullit.jpeg"  class="my-bullit" :style="{top:item.y  + 'px',left:item.x + 'px'}" 
        v-for="(item,index) in bullitList" :key="index"/>
      </el-main>
    </el-container>
  </div>
</template>
  
  
  <script>
import myPlane from "@/components/game/myPlane.vue";
export default {
  name: "gameIndex",
  components: {
    myPlane,
  },
  data() {
    return {
      coo: {},
      containerHeight: 0,
      containerWidth:0,
      bullitList:[]
    };
  },
  mounted() {
    this.containerHeight = this.$refs.elePlane.$el.offsetHeight;
    this.containerWidth = this.$refs.elePlane.$el.offsetWidth;
    setInterval(()=>{
      if(this.bullitList.length > 20){
        this.bullitList.splice(0,1)
      }
      this.bullitList.push({x:this.coo.x,y:this.coo.y})
      this.bullitList.forEach(e=>{
        e.y = e.y-100
      })
    },100)
  },
  methods: {
    mousemove(e) {
      if (e.y >= 100 && e.y <= this.containerHeight+20 && e.x >= 30 && e.x < this.containerWidth - 30) {
        this.coo = { x: e.x, y: e.y };
      }
    },
  },
};
</script>
<style scoped>
.el-header {
  background-color: antiquewhite;
  height: 60px;
  line-height: 60px;
  text-align: center;
}
.el-main {
  background-color: aqua;
  height: calc(100vh - 60px);
}
.my-bullit{
  width: 20px;
  height: 50px;
  /**默认位置在最下面 */
  position: absolute;
  transform: translate(-50%);
}
</style>