Skip to content

V
vue3-custom-renderer
Commit 8de28214 authored by wanli's avatar wanli
Browse files
Options

🌈 style: 更新代码注释

parent e294e912
Hide whitespace changes
Inline Side-by-side
Showing with 411 additions and 387 deletions
.gitignore
View file @ 8de28214
node_modules node_modules
\ No newline at end of file dist
build
project
\ No newline at end of file
main.js
View file @ 8de28214
import { createApp } from './src/runtime-canvas' import { createApp } from './src/runtime-canvas'
import App from './src/App' import App from './src/App'
import {getCanvasRootContainer} from './src/Game' 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()) createApp(App).mount(getCanvasRootContainer())
\ No newline at end of file
src/App.js
View file @ 8de28214
import {defineComponent,h,computed,ref} from '@vue/runtime-core' import { defineComponent, h, computed, ref } from "@vue/runtime-core";
import startPage from './page/startPage' import startPage from "./page/startPage";
import gamePage from './page/gamePage' import gamePage from "./page/gamePage";
import endPage from './page/endPage' import endPage from "./page/endPage";
// template -> render() // template -> render()
export default defineComponent({ export default defineComponent({
setup() { setup() {
// 创建一个响应式数据对象 // 创建一个响应式数据对象
// 值类型 string number // 值类型 string number
// const currentPageName = ref('startPage') // const currentPageName = ref('startPage')
const currentPageName = ref('gamePage') const currentPageName = ref("gamePage");
// const currentPageName = ref('endPage') // const currentPageName = ref('endPage')
// console.log(currentPageName) // console.log(currentPageName)
// 计算属性 // 计算属性
const currentPage = computed(() => { const currentPage = computed(() => {
if (currentPageName.value === "startPage") { if (currentPageName.value === "startPage") {
return startPage; return startPage;
} else if (currentPageName.value === "gamePage") { } else if (currentPageName.value === "gamePage") {
return gamePage; return gamePage;
} else if (currentPageName.value === "endPage") { } else if (currentPageName.value === "endPage") {
return endPage; return endPage;
} }
}); });
return { return {
currentPageName, currentPageName,
currentPage currentPage,
} };
}, },
render(ctx) { render(ctx) {
// console.log('---ctx---') // console.log('---ctx---')
// console.log(ctx) // console.log(ctx)
return h("Container", [ return h("Container", [
h(ctx.currentPage,{ h(ctx.currentPage, {
onChangePage(page) { onChangePage(page) {
// console.log(page) // console.log(page)
ctx.currentPageName = page ctx.currentPageName = page;
} },
}) }),
]); ]);
// return h("Container", [h(gamePage)]); // return h("Container", [h(gamePage)]);
} },
}); });
\ No newline at end of file
src/Game.js
View file @ 8de28214
import * as PIXI from 'pixi.js' import * as PIXI from "pixi.js";
const game = new PIXI.Application({ const game = new PIXI.Application({
width: 750, width: 750,
height: 1080 height: 1080,
}) });
document.body.appendChild(game.view) document.body.appendChild(game.view);
export function getCanvasRootContainer() { export function getCanvasRootContainer() {
return game.stage return game.stage;
} }
export function getGame() { export function getGame() {
return game; return game;
} }
\ No newline at end of file
src/component/Bullet.js
View file @ 8de28214
// 子弹组件 // 子弹组件
import {defineComponent, h, watch} from '@vue/runtime-core' import { defineComponent, h, watch } from "@vue/runtime-core";
import bullteImg from "../../assets/bunny-self.png"; import bullteImg from "../../assets/bunny-self.png";
export default defineComponent({ export default defineComponent({
props: ['x', 'y'], props: ["x", "y"],
setup(props) {}, setup(props) {},
render(ctx) { render(ctx) {
return h('Container',{x:ctx.x,y:ctx.y},[ return h("Container", { x: ctx.x, y: ctx.y }, [
h('Sprite',{texture: bullteImg}) h("Sprite", { texture: bullteImg }),
]); ]);
} },
}) });
\ No newline at end of file
src/component/EnemyPlane.js
View file @ 8de28214
// 敌军 // 敌军
import {defineComponent,h} from '@vue/runtime-core' import { defineComponent, h } from "@vue/runtime-core";
import enemyImg from "../../assets/enemy.png"; import enemyImg from "../../assets/enemy.png";
export default defineComponent({ export default defineComponent({
props: ['x', 'y'], props: ["x", "y"],
render(ctx) { render(ctx) {
return h('Container',{x:ctx.x,y:ctx.y},[ return h("Container", { x: ctx.x, y: ctx.y }, [
h('Sprite',{texture: enemyImg}) h("Sprite", { texture: enemyImg }),
]); ]);
} },
}) });
\ No newline at end of file
src/component/Map.js
View file @ 8de28214
import {defineComponent,h, ref} from '@vue/runtime-core' import { defineComponent, h, ref } from "@vue/runtime-core";
import mapImg from '../../assets/map.jpg' import mapImg from "../../assets/map.jpg";
import {getGame} from '../Game' import { getGame } from "../Game";
export default defineComponent({ export default defineComponent({
setup() { setup() {
const mapHeight = 1080 const mapHeight = 1080;
const mapY1 = ref(0) const mapY1 = ref(0);
const mapY2 = ref(-mapHeight) const mapY2 = ref(-mapHeight);
// pixi循环 // pixi循环
const speed = 5 const speed = 5;
getGame().ticker.add(() => { getGame().ticker.add(() => {
// console.log('---111---') // console.log('---111---')
mapY1.value += speed mapY1.value += speed;
mapY2.value += speed mapY2.value += speed;
if (mapY1.value >= mapHeight) { if (mapY1.value >= mapHeight) {
mapY1.value = -mapHeight mapY1.value = -mapHeight;
} }
if (mapY2.value >= mapHeight) { if (mapY2.value >= mapHeight) {
mapY2.value = -mapHeight mapY2.value = -mapHeight;
} }
}) });
return { return {
mapY1, mapY1,
mapY2 mapY2,
} };
}, },
render(ctx) { render(ctx) {
return h('Container', [ return h("Container", [
h('Sprite', { texture: mapImg, y: ctx.mapY1} ), h("Sprite", { texture: mapImg, y: ctx.mapY1 }),
h('Sprite', { texture: mapImg, y: ctx.mapY2 }) h("Sprite", { texture: mapImg, y: ctx.mapY2 }),
]) ]);
} },
}) });
\ No newline at end of file
src/component/Plane.js
View file @ 8de28214
import {defineComponent, h, reactive, watch, toRefs, import {
onMounted,onUnmounted} from '@vue/runtime-core' defineComponent,
import planeImg from '../../assets/plane.png' h,
reactive,
watch,
toRefs,
onMounted,
onUnmounted,
} from "@vue/runtime-core";
import planeImg from "../../assets/plane.png";
export default defineComponent({ export default defineComponent({
props: ['x','y'], props: ["x", "y"],
setup(props,ctx) { setup(props, ctx) {
console.log('---props---') console.log("---props---");
console.log(props) console.log(props);
const handleAttack = (e) => { const handleAttack = (e) => {
if (e.code==='Space') { if (e.code === "Space") {
// console.log('attack') // console.log('attack')
// console.log(e.code) // console.log(e.code)
ctx.emit('attack', { ctx.emit("attack", {
x:props.x, x: props.x,
y:props.y y: props.y,
}) });
} }
} };
onMounted(() => { onMounted(() => {
window.addEventListener('keydown',handleAttack) window.addEventListener("keydown", handleAttack);
}) });
onUnmounted(() => { onUnmounted(() => {
window.removeEventListener('keydown',handleAttack) window.removeEventListener("keydown", handleAttack);
}) });
const point = reactive({ const point = reactive({
x: props.x, x: props.x,
y: props.y y: props.y,
}) });
watch(props, (value) => { watch(props, (value) => {
point.x = value.x; point.x = value.x;
point.y = value.y; point.y = value.y;
}) });
console.log('---props---') console.log("---props---");
console.log(props.x) console.log(props.x);
// toRefs // toRefs
const {x,y} = toRefs(props) const { x, y } = toRefs(props);
console.log(x,y) console.log(x, y);
return { return {
x,y x,
} y,
}, };
render(ctx) { },
return h('Container', { x:ctx.x, y:ctx.y }, [ render(ctx) {
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
View file @ 8de28214
// 游戏结束页面 // 游戏结束页面
import {defineComponent,h} from '@vue/runtime-core' import { defineComponent, h } from "@vue/runtime-core";
import endPageImage from '../../assets/end_page.jpg' import endPageImage from "../../assets/end_page.jpg";
import restartBtn from '../../assets/restartBtn.png' import restartBtn from "../../assets/restartBtn.png";
// template->render // template->render
export default defineComponent({ export default defineComponent({
render(ctx) { render(ctx) {
// 显示一张图 // 显示一张图
// <div><img src="" alt=""/></div> // <div><img src="" alt=""/></div>
return h("Container",[ return h("Container", [
h("Sprite",{texture: endPageImage}), h("Sprite", { texture: endPageImage }),
h("Sprite", { h("Sprite", {
texture: restartBtn, x: 210, y: 500, texture: restartBtn,
interactive: true, x: 210,
onClick() { y: 500,
// console.log('---ctx---') interactive: true,
// console.log(ctx) onClick() {
ctx.$emit("changePage", "gamePage") // console.log('---ctx---')
} // console.log(ctx)
}) ctx.$emit("changePage", "gamePage");
]) },
} }),
}) ]);
\ No newline at end of file },
});
src/page/gamePage.js
View file @ 8de28214
import { defineComponent, h, reactive, toRefs, onMounted, onUnmounted } from '@vue/runtime-core' import {
defineComponent,
h,
reactive,
toRefs,
onMounted,
onUnmounted,
} from "@vue/runtime-core";
import Map from '../component/Map' import Map from "../component/Map";
import Plane from '../component/Plane' import Plane from "../component/Plane";
import Bullet from '../component/Bullet' import Bullet from "../component/Bullet";
import EnemyPlane from '../component/EnemyPlane' import EnemyPlane from "../component/EnemyPlane";
import { getGame } from '../Game' import { getGame } from "../Game";
import {hitTestTrctangle} from '../utils/index' import { hitTestTrctangle } from "../utils/index";
export default defineComponent({ export default defineComponent({
setup(props,ctx) { setup(props, ctx) {
const planeInfo = useCreatePlaneInfo();
const planeInfo = useCreatePlaneInfo() // 子弹数据
// 子弹数据 const bullets = reactive([]);
const bullets = reactive([]) // 敌军数据
// 敌军数据 const enemyPlanes = reactive([
const enemyPlanes = reactive([{ {
x:10,y:10, x: 10,
width:308,height:207 y: 10,
}]) width: 308,
height: 207,
},
]);
const handleAttack = (info) => {
const createBulletInfo = () => {
return {
x: info.x + 100,
y: info.y,
};
};
bullets.push(createBulletInfo());
return;
};
const handleAttack = (info) => { getGame().ticker.add(() => {
const createBulletInfo = () => { // 让子弹动起来
return { // 改变子弹的y坐标
x:info.x+100, // const speed = 10;
y:info.y // bullets.forEach(bulletInfo => {
} // bulletInfo.y -= speed;
} // })
bullets.push(createBulletInfo()) moveBullets(bullets);
return // 碰撞💥检测
enemyPlanes.forEach((enemyPlaneInfo) => {
if (hitTestTrctangle(enemyPlaneInfo, planeInfo)) {
ctx.emit("changePage", "endPage");
console.log("hit----");
} }
});
});
getGame().ticker.add(()=>{ // 创建子弹
// 让子弹动起来 return {
// 改变子弹的y坐标 planeInfo,
// const speed = 10; bullets,
// bullets.forEach(bulletInfo => { handleAttack,
// bulletInfo.y -= speed; enemyPlanes,
// }) };
moveBullets(bullets) },
// 碰撞💥检测
enemyPlanes.forEach(enemyPlaneInfo => {
if(hitTestTrctangle(enemyPlaneInfo,planeInfo))
{
ctx.emit('changePage','endPage')
console.log('hit----')
}
})
})
// 创建子弹
return {
planeInfo,
bullets,
handleAttack,
enemyPlanes
}
},
render(ctx) { render(ctx) {
// 渲染子弹
const renderBullets = () => {
return ctx.bullets.map((info) => {
return h(Bullet, { x: info.x, y: info.y });
});
};
// 渲染子弹 // 渲染敌人飞机
const renderBullets = () => { const renderEnemyPlanes = () => {
return ctx.bullets.map((info) => { return ctx.enemyPlanes.map((info) => {
return h(Bullet, { x: info.x, y: info.y }) return h(EnemyPlane, { x: info.x, y: info.y });
}) });
} };
return h("Container", [
// 渲染敌人飞机 h(Map),
const renderEnemyPlanes = () => { h(Plane, {
return ctx.enemyPlanes.map((info) => { x: ctx.planeInfo.x,
return h(EnemyPlane, { x: info.x, y: info.y }) y: ctx.planeInfo.y,
}) onAttack: ctx.handleAttack,
} }),
return h( ...renderBullets(),
"Container", [ ...renderEnemyPlanes(),
h(Map), ]);
h(Plane,{ x:ctx.planeInfo.x, y:ctx.planeInfo.y, onAttack: ctx.handleAttack }), },
...renderBullets(), });
...renderEnemyPlanes()
]
)
}
})
const useCreatePlaneInfo = () => { const useCreatePlaneInfo = () => {
const planeInfo = reactive({ const planeInfo = reactive({
x:240,y:680, x: 240,
width:258,height:364 y: 680,
}) width: 258,
// console.log(planeInfo) height: 364,
// 让飞机动起来 });
const {x, y} = useMovePlane(planeInfo.x,planeInfo.y) // console.log(planeInfo)
planeInfo.x = x; // 让飞机动起来
planeInfo.y = y; const { x, y } = useMovePlane(planeInfo.x, planeInfo.y);
planeInfo.x = x;
planeInfo.y = y;
return planeInfo; return planeInfo;
} };
const useMovePlane = (initX, initY) => { const useMovePlane = (initX, initY) => {
const speed = 20; const speed = 20;
const point = reactive({ const point = reactive({
x:initX, x: initX,
y:initY y: initY,
}); });
const handleKeyDown = (e) => { const handleKeyDown = (e) => {
switch (e.code) { switch (e.code) {
case "ArrowUp": case "ArrowUp":
point.y -= speed; point.y -= speed;
break; break;
case "ArrowDown": case "ArrowDown":
point.y += speed; point.y += speed;
break; break;
case "ArrowLeft": case "ArrowLeft":
point.x -= speed; point.x -= speed;
break; break;
case "ArrowRight": case "ArrowRight":
point.x += speed; point.x += speed;
break; break;
}
} }
onMounted(()=>{ };
window.addEventListener('keydown',handleKeyDown) onMounted(() => {
}) window.addEventListener("keydown", handleKeyDown);
onUnmounted(()=>{ });
window.removeEventListener('keydown',handleKeyDown) onUnmounted(() => {
}) window.removeEventListener("keydown", handleKeyDown);
return toRefs(point); });
} return toRefs(point);
};
const moveBullets = (bullets) => { const moveBullets = (bullets) => {
const speed = 10; const speed = 10;
bullets.forEach(bulletInfo => { bullets.forEach((bulletInfo) => {
bulletInfo.y -= speed; bulletInfo.y -= speed;
}) });
} };
\ No newline at end of file
src/page/startPage.js
View file @ 8de28214
// 开始页面 // 开始页面
import {defineComponent,h} from '@vue/runtime-core' import { defineComponent, h } from "@vue/runtime-core";
import startPageImage from '../../assets/start_page.jpg' import startPageImage from "../../assets/start_page.jpg";
import startBtn from '../../assets/startBtn.png' import startBtn from "../../assets/startBtn.png";
// template->render // template->render
export default defineComponent({ export default defineComponent({
render(ctx) { render(ctx) {
// 显示一张图 // 显示一张图
// <div><img src="" alt=""/></div> // <div><img src="" alt=""/></div>
return h("Container",[ return h("Container", [
h("Sprite",{texture: startPageImage}), h("Sprite", { texture: startPageImage }),
h("Sprite", { h("Sprite", {
texture: startBtn, x: 210, y: 500, texture: startBtn,
interactive: true, x: 210,
onClick() { y: 500,
// console.log('---ctx---') interactive: true,
// console.log(ctx) onClick() {
ctx.$emit("changePage", "gamePage") // console.log('---ctx---')
} // console.log(ctx)
}) ctx.$emit("changePage", "gamePage");
]) },
} }),
}) ]);
\ No newline at end of file },
});
src/runtime-canvas/index.js
View file @ 8de28214
import { createRenderer } from "@vue/runtime-core";
import {createRenderer} from '@vue/runtime-core' import { Graphics, Text, Container, Sprite, Texture } from "pixi.js";
import {Graphics,Text, Container, Sprite, Texture} from 'pixi.js'
// 创建渲染器 // 创建渲染器
const renderer = createRenderer({ const renderer = createRenderer({
// 实现渲染接口 // 实现渲染接口
createElement(type) { createElement(type) {
let element; let element;
// 基于 type 去创建视图 // 基于 type 去创建视图
switch (type) { switch (type) {
case "Container": case "Container":
element = new Container(); element = new Container();
break; break;
case "Sprite": case "Sprite":
element = new Sprite(); element = new Sprite();
break; break;
} }
return element; return element;
}, },
insert(el,parent) { insert(el, parent) {
parent.addChild(el) console.log("==========> insert start <==========");
}, parent.addChild(el);
patchProp(el,key,prevValue,nextValue){ console.log(el);
// console.log(nextValue) console.log(parent);
// PIXI console.log("==========> insert end <==========");
switch (key) { },
case "texture": patchProp(el, key, prevValue, nextValue) {
el.texture = Texture.from(nextValue) console.log("==========> patch prop start <==========");
break; console.log(el)
case "onClick": console.log(key)
// 给pixi元素注册点击事件 console.log(prevValue)
el.on("pointertap", nextValue); console.log(nextValue)
break; switch (key) {
default: case "texture":
el[key] = nextValue el.texture = Texture.from(nextValue);
} break;
}, case "onClick":
setElementText(node,text) { // 给pixi元素注册点击事件
const canvasText = new Text(text) el.on("pointertap", nextValue);
node.addChild(canvasText) break;
}, default:
createText(text){ el[key] = nextValue;
// console.log(text) }
return new Text(text) console.log("==========> patch prop end <==========");
}, },
// 处理注释 setElementText(node, text) {
createComment() {}, const canvasText = new Text(text);
// 获取父节点 node.addChild(canvasText);
parentNode() {}, },
// 获取兄弟节点 createText(text) {
nextSibling() {}, // console.log(text)
// 删除节点时调用 return new Text(text);
remove(el) { },
const parent = el.parent; // 处理注释
if (parent) { createComment() {},
parent.removeChild(el); // 获取父节点
} 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) // console.log(renderer)
export function createApp(rootComponent) { export function createApp(rootComponent) {
// 调用 renderer // 调用 renderer
return renderer.createApp(rootComponent) return renderer.createApp(rootComponent);
} }
\ No newline at end of file
src/utils/index.js
View file @ 8de28214
// 碰撞💥 // 碰撞💥
export function hitTestTrctangle(objA,objB) { export function hitTestTrctangle(objA, objB) {
return ( return (
objA.x + objA.width >= objB.x && objA.x + objA.width >= objB.x &&
objB.x + objB.width >= objA.x && objB.x + objB.width >= objA.x &&
objA.y + objA.height >= objB.y && objA.y + objA.height >= objB.y &&
objB.y + objB.height >= objA.y objB.y + objB.height >= objA.y
) );
}
}
\ No newline at end of file
webpack.config.js
View file @ 8de28214
const path = require("path") const path = require("path")
module.exports = { module.exports = {
mode: "production",
entry: path.resolve(__dirname, "./main.js"), entry: path.resolve(__dirname, "./main.js"),
output: { output: {
filename: 'build.js', filename: 'build.js',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment