Skip to content

V
vue3-custom-renderer
Commit e294e912 authored by songchunfan's avatar songchunfan
Browse files
Options

first commit

parents
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 545 additions and 0 deletions
.DS_Store 0 → 100644
View file @ e294e912
File added
.gitignore 0 → 100644
View file @ e294e912
node_modules
\ No newline at end of file
dist/build.js 0 → 100644
View file @ e294e912
!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t){console.log("main")}]);
\ No newline at end of file
dist/index.html 0 → 100644
View file @ e294e912
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body style="margin: 0;width: 100%;">
<script src="./build.js"></script>
</body>
</html>
\ No newline at end of file
main.js 0 → 100644
View file @ e294e912
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
package-lock.json 0 → 100644
View file @ e294e912
This diff is collapsed.
package.json 0 → 100644
View file @ e294e912
{
"name": "vue3.0_play-plane",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"serve": "webpack-dev-server --open"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"file-loader": "^6.0.0",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.12"
},
"dependencies": {
"@vue/runtime-core": "^3.0.0-beta.20",
"pixi.js": "^5.3.0",
"webpack-dev-server": "^3.11.0"
}
}
src/App.js 0 → 100644
View file @ e294e912
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;
}
});
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
src/Game.js 0 → 100644
View file @ e294e912
import * as PIXI from 'pixi.js'
const game = new PIXI.Application({
width: 750,
height: 1080
})
document.body.appendChild(game.view)
export function getCanvasRootContainer() {
return game.stage
}
export function getGame() {
return game;
}
\ No newline at end of file
src/component/Bullet.js 0 → 100644
View file @ e294e912
// 子弹组件
import {defineComponent, h, watch} from '@vue/runtime-core'
import bullteImg from "../../assets/bunny-self.png";
export default defineComponent({
props: ['x', 'y'],
setup(props) {},
render(ctx) {
return h('Container',{x:ctx.x,y:ctx.y},[
h('Sprite',{texture: bullteImg})
]);
}
})
\ No newline at end of file
src/component/EnemyPlane.js 0 → 100644
View file @ e294e912
// 敌军
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
src/component/Map.js 0 → 100644
View file @ e294e912
import {defineComponent,h, ref} from '@vue/runtime-core'
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)
// 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
}
})
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
src/component/Plane.js 0 → 100644
View file @ e294e912
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)
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;
})
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
src/page/endPage.js 0 → 100644
View file @ e294e912
// 游戏结束页面
import {defineComponent,h} from '@vue/runtime-core'
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
src/page/gamePage.js 0 → 100644
View file @ e294e912
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()
// 子弹数据
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
}
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
}
},
render(ctx) {
// 渲染子弹
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 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;
return planeInfo;
}
const useMovePlane = (initX, 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;
}
}
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
src/page/startPage.js 0 → 100644
View file @ e294e912
// 开始页面
import {defineComponent,h} from '@vue/runtime-core'
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
src/runtime-canvas/index.js 0 → 100644
View file @ e294e912
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);
}
}
})
// console.log(renderer)
export function createApp(rootComponent) {
// 调用 renderer
return renderer.createApp(rootComponent)
}
\ No newline at end of file
src/utils/index.js 0 → 100644
View file @ e294e912
// 碰撞💥
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
webpack.config.js 0 → 100644
View file @ e294e912
const path = require("path")
module.exports = {
entry: path.resolve(__dirname, "./main.js"),
output: {
filename: 'build.js',
path: path.resolve(__dirname, "./dist")
},
devServer: {
contentBase: path.resolve(__dirname, "./dist"),
port: 8081
},
module: {
rules: [
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: "file-loader",
options: {
outputPath: "assets/",
publicPath: ""
}
}
]
}
]
}
}
\ No newline at end of file
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