VUE3项目-飞机大战2

重难点：

（1）设置飞机移动时，飞机的坐标是设置在Plane.vue中还是设置在GamePage.vue中？

单纯创建静态飞机的时候放在哪里都可以，但是需要考虑到后续操作。应该设置在GamePage也页面中，因为后续在GamePage操作中（比如碰撞检测）还需要使用到我方飞机的坐标，所以接收到GamePage中，方便后续的使用

（2）兄弟节点之间的通信

兄弟节点之间的数据通信，使用消息订阅与发布失败，npm i pubsub-js后引入不成功？最后使用了，在兄弟组件1（接收方）中定义操作，并把函数暴露出来，在公共的父节点中接收兄弟1的函数，在兄弟2（发送方）的接收函数中创建结构处理兄弟1的操作

（3）如何实现页面滚动和切换逻辑？

页面滚动使用两张页面上下拼接，然后到指定位置更换图片的位置；切换逻辑通过设置一个响应式变量来存储当前页面状态，当页面需要切换时将通过父组件定义的子组件的自定义事件来，在子组件中出发更改页面响应式变量的值来实现页面切换。

页面滚动：

页面切换：

 

（4）碰撞检测（本项目中实现的是矩形碰撞检测，可优化为像素级碰撞检测）