🌈 style: 更新代码注释

.gitignore

 node_modules
+dist
+build
+project
\ No newline at end of file

main.js

 import { createApp } from './src/runtime-canvas'
 import App from './src/App'
 import {getCanvasRootContainer} from './src/Game'
-// import * as PIXI from 'pixi.js'
-// console.log(PIXI)
-// 创建一个根组件
-
-// const app = createApp(App);
-// console.log(app)
-
-// const game = new PIXI.Application({
-//     width: 750,
-//     height: 1080
-// })
-
-// document.body.appendChild(game.view)
-// mount
-// createApp(App).mount(game.stage)
 
 createApp(App).mount(getCanvasRootContainer())
\ No newline at end of file

src/App.js

-import {defineComponent,h,computed,ref} from '@vue/runtime-core'
-import startPage from './page/startPage'
-import gamePage from './page/gamePage'
-import endPage from './page/endPage'
+import { defineComponent, h, computed, ref } from "@vue/runtime-core";
+import startPage from "./page/startPage";
+import gamePage from "./page/gamePage";
+import endPage from "./page/endPage";
 
 // template -> render()
 export default defineComponent({
@@ -9,7 +9,7 @@ export default defineComponent({
     // 创建一个响应式数据对象
     // 值类型 string number
     // const currentPageName = ref('startPage')
-        const currentPageName = ref('gamePage')
+    const currentPageName = ref("gamePage");
     // const currentPageName = ref('endPage')
     // console.log(currentPageName)
     // 计算属性
@@ -25,20 +25,20 @@ export default defineComponent({
 
     return {
       currentPageName,
-            currentPage
-        }
+      currentPage,
+    };
   },
   render(ctx) {
     // console.log('---ctx---')
     // console.log(ctx)
     return h("Container", [
-            h(ctx.currentPage,{
+      h(ctx.currentPage, {
         onChangePage(page) {
           // console.log(page)
-                    ctx.currentPageName = page
-                }
-            })
+          ctx.currentPageName = page;
+        },
+      }),
     ]);
     // return h("Container", [h(gamePage)]);
-    }
+  },
 });

src/Game.js

-import * as PIXI from 'pixi.js'
+import * as PIXI from "pixi.js";
 
 const game = new PIXI.Application({
   width: 750,
-    height: 1080
-})
+  height: 1080,
+});
 
-document.body.appendChild(game.view)
+document.body.appendChild(game.view);
 
 export function getCanvasRootContainer() {
-    return game.stage
+  return game.stage;
 }
 
 export function getGame() {

src/component/Bullet.js

 // 子弹组件
-import {defineComponent, h, watch} from '@vue/runtime-core'
+import { defineComponent, h, watch } from "@vue/runtime-core";
 import bullteImg from "../../assets/bunny-self.png";
 
 export default defineComponent({
-    props: ['x', 'y'],
+  props: ["x", "y"],
 
   setup(props) {},
 
   render(ctx) {
-        return h('Container',{x:ctx.x,y:ctx.y},[
-            h('Sprite',{texture: bullteImg})
+    return h("Container", { x: ctx.x, y: ctx.y }, [
+      h("Sprite", { texture: bullteImg }),
     ]);
-    }
-})
+  },
+});
\ No newline at end of file

src/component/EnemyPlane.js

 // 敌军
-import {defineComponent,h} from '@vue/runtime-core'
+import { defineComponent, h } from "@vue/runtime-core";
 import enemyImg from "../../assets/enemy.png";
 
 export default defineComponent({
-    props: ['x', 'y'],
+  props: ["x", "y"],
   render(ctx) {
-        return h('Container',{x:ctx.x,y:ctx.y},[
-            h('Sprite',{texture: enemyImg})
+    return h("Container", { x: ctx.x, y: ctx.y }, [
+      h("Sprite", { texture: enemyImg }),
     ]);
-    }
-})
+  },
+});
\ No newline at end of file

src/component/Map.js

-import {defineComponent,h, ref} from '@vue/runtime-core'
+import { defineComponent, h, ref } from "@vue/runtime-core";
 
-import mapImg from '../../assets/map.jpg'
-import {getGame} from '../Game'
+import mapImg from "../../assets/map.jpg";
+import { getGame } from "../Game";
 
 export default defineComponent({
   setup() {
-        const mapHeight = 1080
-        const mapY1 = ref(0)
-        const mapY2 = ref(-mapHeight)
+    const mapHeight = 1080;
+    const mapY1 = ref(0);
+    const mapY2 = ref(-mapHeight);
 
     // pixi循环
-        const speed = 5
+    const speed = 5;
     getGame().ticker.add(() => {
       // console.log('---111---')
-            mapY1.value += speed
-            mapY2.value += speed
+      mapY1.value += speed;
+      mapY2.value += speed;
 
       if (mapY1.value >= mapHeight) {
-                mapY1.value = -mapHeight
+        mapY1.value = -mapHeight;
       }
       if (mapY2.value >= mapHeight) {
-                mapY2.value = -mapHeight
+        mapY2.value = -mapHeight;
       }
-        })
+    });
 
     return {
       mapY1,
-            mapY2
-        }
+      mapY2,
+    };
   },
   render(ctx) {
-        return h('Container', [
-            h('Sprite', { texture: mapImg, y: ctx.mapY1} ),
-            h('Sprite', { texture: mapImg, y: ctx.mapY2 })
-        ])
-    }
-})
+    return h("Container", [
+      h("Sprite", { texture: mapImg, y: ctx.mapY1 }),
+      h("Sprite", { texture: mapImg, y: ctx.mapY2 }),
+    ]);
+  },
+});
\ No newline at end of file

src/component/Plane.js

-import {defineComponent, h, reactive, watch, toRefs,
-onMounted,onUnmounted} from '@vue/runtime-core'
-import planeImg from '../../assets/plane.png'
+import {
+  defineComponent,
+  h,
+  reactive,
+  watch,
+  toRefs,
+  onMounted,
+  onUnmounted,
+} from "@vue/runtime-core";
+import planeImg from "../../assets/plane.png";
 
 export default defineComponent({
-    props: ['x','y'],
-    setup(props,ctx) {
-        console.log('---props---')
-        console.log(props)
+  props: ["x", "y"],
+  setup(props, ctx) {
+    console.log("---props---");
+    console.log(props);
 
     const handleAttack = (e) => {
-            if (e.code==='Space') {
+      if (e.code === "Space") {
         // console.log('attack')
         // console.log(e.code)
-                ctx.emit('attack', {
-                    x:props.x,
-                    y:props.y
-                })
-            }
+        ctx.emit("attack", {
+          x: props.x,
+          y: props.y,
+        });
       }
+    };
     onMounted(() => {
-            window.addEventListener('keydown',handleAttack)
-        })
+      window.addEventListener("keydown", handleAttack);
+    });
     onUnmounted(() => {
-            window.removeEventListener('keydown',handleAttack)
-        })
+      window.removeEventListener("keydown", handleAttack);
+    });
 
     const point = reactive({
       x: props.x,
-            y: props.y
-        })
+      y: props.y,
+    });
     watch(props, (value) => {
       point.x = value.x;
       point.y = value.y;
-        })
+    });
 
-        console.log('---props---')
-        console.log(props.x)
+    console.log("---props---");
+    console.log(props.x);
     // toRefs
-        const {x,y} = toRefs(props)
+    const { x, y } = toRefs(props);
 
-        console.log(x,y)
+    console.log(x, y);
     return {
-            x,y
-        }
+      x,
+      y,
+    };
   },
   render(ctx) {
-        return h('Container', { x:ctx.x, y:ctx.y }, [
-            h('Sprite', { texture: planeImg} )
-        ])
-    }
-})
+    return h("Container", { x: ctx.x, y: ctx.y }, [
+      h("Sprite", { texture: planeImg }),
+    ]);
+  },
+});
\ No newline at end of file

src/page/endPage.js

 // 游戏结束页面
-import {defineComponent,h} from '@vue/runtime-core'
+import { defineComponent, h } from "@vue/runtime-core";
 
-import endPageImage from '../../assets/end_page.jpg'
-import restartBtn from '../../assets/restartBtn.png'
+import endPageImage from "../../assets/end_page.jpg";
+import restartBtn from "../../assets/restartBtn.png";
 
 // template->render
 export default defineComponent({
   render(ctx) {
     // 显示一张图
     // <div><img src="" alt=""/></div>
-        return h("Container",[
-            h("Sprite",{texture: endPageImage}),
+    return h("Container", [
+      h("Sprite", { texture: endPageImage }),
       h("Sprite", {
-                texture: restartBtn, x: 210, y: 500,
+        texture: restartBtn,
+        x: 210,
+        y: 500,
         interactive: true,
         onClick() {
           // console.log('---ctx---')
           // console.log(ctx)
-                    ctx.$emit("changePage", "gamePage")
-                }
-            })
-        ])
-    }
-})
+          ctx.$emit("changePage", "gamePage");
+        },
+      }),
+    ]);
+  },
+});
\ No newline at end of file

src/page/gamePage.js

-import { defineComponent, h, reactive, toRefs, onMounted, onUnmounted } from '@vue/runtime-core'
-
-import Map from '../component/Map'
-import Plane from '../component/Plane'
-import Bullet from '../component/Bullet'
-import EnemyPlane from '../component/EnemyPlane'
-
-import { getGame } from '../Game'
-import {hitTestTrctangle} from '../utils/index'
+import {
+  defineComponent,
+  h,
+  reactive,
+  toRefs,
+  onMounted,
+  onUnmounted,
+} from "@vue/runtime-core";
+
+import Map from "../component/Map";
+import Plane from "../component/Plane";
+import Bullet from "../component/Bullet";
+import EnemyPlane from "../component/EnemyPlane";
+
+import { getGame } from "../Game";
+import { hitTestTrctangle } from "../utils/index";
 
 export default defineComponent({
-    setup(props,ctx) {
-        
-        const planeInfo = useCreatePlaneInfo()
+  setup(props, ctx) {
+    const planeInfo = useCreatePlaneInfo();
     // 子弹数据
-        const bullets = reactive([])
+    const bullets = reactive([]);
     // 敌军数据
-        const enemyPlanes = reactive([{
-            x:10,y:10,
-            width:308,height:207
-        }])
-
+    const enemyPlanes = reactive([
+      {
+        x: 10,
+        y: 10,
+        width: 308,
+        height: 207,
+      },
+    ]);
 
     const handleAttack = (info) => {
       const createBulletInfo = () => {
         return {
-                    x:info.x+100,
-                    y:info.y
-                }
-            }
-            bullets.push(createBulletInfo())
-            return
-        }
-
-        getGame().ticker.add(()=>{
+          x: info.x + 100,
+          y: info.y,
+        };
+      };
+      bullets.push(createBulletInfo());
+      return;
+    };
+
+    getGame().ticker.add(() => {
       // 让子弹动起来
       // 改变子弹的y坐标
       // const speed = 10;
       // bullets.forEach(bulletInfo => {
       //     bulletInfo.y -= speed;
       // })
-            moveBullets(bullets)
+      moveBullets(bullets);
       // 碰撞💥检测
-            enemyPlanes.forEach(enemyPlaneInfo => {
-                if(hitTestTrctangle(enemyPlaneInfo,planeInfo))
-                {
-                    ctx.emit('changePage','endPage')
-                    console.log('hit----')
+      enemyPlanes.forEach((enemyPlaneInfo) => {
+        if (hitTestTrctangle(enemyPlaneInfo, planeInfo)) {
+          ctx.emit("changePage", "endPage");
+          console.log("hit----");
         }
-            })
-        })
+      });
+    });
 
     // 创建子弹
     return {
       planeInfo,
       bullets,
       handleAttack,
-            enemyPlanes
-        }
+      enemyPlanes,
+    };
   },
 
   render(ctx) {
-
     // 渲染子弹
     const renderBullets = () => {
       return ctx.bullets.map((info) => {
-                return h(Bullet, { x: info.x, y: info.y })
-            })
-        }
+        return h(Bullet, { x: info.x, y: info.y });
+      });
+    };
 
     // 渲染敌人飞机
     const renderEnemyPlanes = () => {
       return ctx.enemyPlanes.map((info) => {
-                return h(EnemyPlane, { x: info.x, y: info.y })
-            })
-        }
-        return h(
-            "Container", [
+        return h(EnemyPlane, { x: info.x, y: info.y });
+      });
+    };
+    return h("Container", [
       h(Map),
-                h(Plane,{ x:ctx.planeInfo.x, y:ctx.planeInfo.y, onAttack: ctx.handleAttack }),
+      h(Plane, {
+        x: ctx.planeInfo.x,
+        y: ctx.planeInfo.y,
+        onAttack: ctx.handleAttack,
+      }),
       ...renderBullets(),
-                ...renderEnemyPlanes()
-            ]
-        )
-    }
-})
+      ...renderEnemyPlanes(),
+    ]);
+  },
+});
 
 const useCreatePlaneInfo = () => {
   const planeInfo = reactive({
-        x:240,y:680,
-        width:258,height:364
-    })
+    x: 240,
+    y: 680,
+    width: 258,
+    height: 364,
+  });
   // console.log(planeInfo)
   // 让飞机动起来
-    const {x, y} = useMovePlane(planeInfo.x,planeInfo.y)
+  const { x, y } = useMovePlane(planeInfo.x, planeInfo.y);
   planeInfo.x = x;
   planeInfo.y = y;
 
   return planeInfo;
-}
+};
 
 const useMovePlane = (initX, initY) => {
   const speed = 20;
   const point = reactive({
-        x:initX,
-        y:initY
+    x: initX,
+    y: initY,
   });
 
   const handleKeyDown = (e) => {
@@ -121,19 +132,19 @@ const useMovePlane = (initX, initY) => {
         point.x += speed;
         break;
     }
-    }
-    onMounted(()=>{
-        window.addEventListener('keydown',handleKeyDown)
-    })
-    onUnmounted(()=>{
-        window.removeEventListener('keydown',handleKeyDown)
-    })
+  };
+  onMounted(() => {
+    window.addEventListener("keydown", handleKeyDown);
+  });
+  onUnmounted(() => {
+    window.removeEventListener("keydown", handleKeyDown);
+  });
   return toRefs(point);
-}
+};
 
 const moveBullets = (bullets) => {
   const speed = 10;
-    bullets.forEach(bulletInfo => {
+  bullets.forEach((bulletInfo) => {
     bulletInfo.y -= speed;
-    })
-}
+  });
+};
\ No newline at end of file

src/page/startPage.js

 // 开始页面
-import {defineComponent,h} from '@vue/runtime-core'
+import { defineComponent, h } from "@vue/runtime-core";
 
-import startPageImage from '../../assets/start_page.jpg'
-import startBtn from '../../assets/startBtn.png'
+import startPageImage from "../../assets/start_page.jpg";
+import startBtn from "../../assets/startBtn.png";
 
 // template->render
 export default defineComponent({
   render(ctx) {
     // 显示一张图
     // <div><img src="" alt=""/></div>
-        return h("Container",[
-            h("Sprite",{texture: startPageImage}),
+    return h("Container", [
+      h("Sprite", { texture: startPageImage }),
       h("Sprite", {
-                texture: startBtn, x: 210, y: 500,
+        texture: startBtn,
+        x: 210,
+        y: 500,
         interactive: true,
         onClick() {
           // console.log('---ctx---')
           // console.log(ctx)
-                    ctx.$emit("changePage", "gamePage")
-                }
-            })
-        ])
-    }
-})
+          ctx.$emit("changePage", "gamePage");
+        },
+      }),
+    ]);
+  },
+});
\ No newline at end of file

src/runtime-canvas/index.js

-
-import {createRenderer} from '@vue/runtime-core'
-import {Graphics,Text, Container, Sprite, Texture} from 'pixi.js'
+import { createRenderer } from "@vue/runtime-core";
+import { Graphics, Text, Container, Sprite, Texture } from "pixi.js";
 
 // 创建渲染器
 const renderer = createRenderer({
@@ -18,49 +17,63 @@ const renderer = createRenderer({
     }
     return element;
   },
-    insert(el,parent) {
-        parent.addChild(el)
+  insert(el, parent) {
+    console.log("==========> insert start <==========");
+    parent.addChild(el);
+    console.log(el);
+    console.log(parent);
+    console.log("==========> insert end <==========");
   },
-    patchProp(el,key,prevValue,nextValue){
-        // console.log(nextValue)
-        // PIXI
+  patchProp(el, key, prevValue, nextValue) {
+    console.log("==========> patch prop start <==========");
+    console.log(el)
+    console.log(key)
+    console.log(prevValue)
+    console.log(nextValue)
     switch (key) {
       case "texture":
-                el.texture = Texture.from(nextValue)
+        el.texture = Texture.from(nextValue);
         break;
       case "onClick":
         // 给pixi元素注册点击事件
         el.on("pointertap", nextValue);
         break;
       default:
-                el[key] = nextValue
+        el[key] = nextValue;
     }
+    console.log("==========> patch prop end <==========");
   },
-    setElementText(node,text) {
-        const canvasText = new Text(text)
-        node.addChild(canvasText)
+  setElementText(node, text) {
+    const canvasText = new Text(text);
+    node.addChild(canvasText);
   },
-    createText(text){
+  createText(text) {
     // console.log(text)
-        return new Text(text)
+    return new Text(text);
   },
   // 处理注释
   createComment() {},
   // 获取父节点
-    parentNode() {},
+  parentNode(node) {
+    console.log("==========> parent node start <==========");
+    console.log(node);
+    console.log("==========> parent node end <==========");
+  },
   // 获取兄弟节点
   nextSibling() {},
   // 删除节点时调用
   remove(el) {
+    console.log("==========> remove start <==========");
     const parent = el.parent;
     if (parent) {
       parent.removeChild(el);
     }
-    }
-})
+    console.log("==========> remove end <==========");
+  },
+});
 // console.log(renderer)
 
 export function createApp(rootComponent) {
   // 调用 renderer
-    return renderer.createApp(rootComponent)
+  return renderer.createApp(rootComponent);
 }

src/utils/index.js

 // 碰撞💥
 
-export function hitTestTrctangle(objA,objB) {
+export function hitTestTrctangle(objA, objB) {
   return (
     objA.x + objA.width >= objB.x &&
     objB.x + objB.width >= objA.x &&
     objA.y + objA.height >= objB.y &&
     objB.y + objB.height >= objA.y
-    )
-
+  );
 }

webpack.config.js

 const path = require("path")
 
 module.exports = {
+    mode: "production",
     entry: path.resolve(__dirname, "./main.js"),
     output: {
         filename: 'build.js',