关于pixi.js:使用pixijs制作简单的跑酷小游戏
前言此我的项目应用pixi.js和vue实现，局部素材来自爱给网，本我的项目仅作用于 pixi.js 学习用处，侵权立删。 我的项目地址shellingfordly/pixi-games demo地址pixi-games 初始化我的项目应用vite初始化我的项目 pnpm create vite my-vue-app装置pixi.js和pixi-tweener pixi-tweener一个做适度动画的开源库 pnpm i pixi.js pixi-tweener次要逻辑useParkour此函数用于创立pixi app，将场景，障碍物，人物增加到app中containerRef canvas的容器gameStart 开始游戏start 开始状态score 分数hp 血量export function useParkour() { const containerRef = ref(); const app = new Application({ width: BODY_HEIGHT, height: BODY_WIDTH, backgroundColor: 0xffffff, }); const start = ref(false); Tweener.init(app.ticker); const container = new Container(); app.stage.addChild(container); const player = new Player(); const { scene, runScene, stopScene } = useScene(); const { trap, runHurdle, score, hp } = useHurdle(); container.addChild(player); container.addChild(scene); container.addChild(trap); container.sortChildren(); runScene(); function gameStart() { start.value = true; player.play(); const timer = setTimeout(() => { runHurdle(player); clearTimeout(timer); }, 1000); } watch(hp, (value) => { if (value === 0) { player.stop(); stopScene(); start.value = false; } }); onMounted(() => { if (containerRef.value) containerRef.value.appendChild(app.view); }); return { containerRef, app, score, hp, gameStart, start };}useScene此函数用于创立天空、高空场景加载天空、高空纹理，创立平铺精灵(TilingSprite)，这个TilingSprite类比拟不便做场景的挪动 ...