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