使用pixi.js做一个简单的跑酷游戏

前言本项目使用pixi.js和vue实现，部分素材来自爱盖网。本项目仅供pixi.js学习使用，如有侵权立即删除。项目地址shellingfordly/pixi-gamesdemo地址pixi-games初始化项目使用vite初始化项目pnpmcreatevitemy-vue-appinstallpixi.js和pixi-tweenerpixi-tweener过度动画的开源库pnpmipixi.jspixi-tweener主要逻辑useParkour该函数用于创建一个pixiapp，在appgameStart中的containerRef画布容器中添加场景、障碍物、角色。=参考（）；constapp=newApplication({width:BODY_HEIGHT,height:BODY_WIDTH,backgroundColor:0xffffff,});常量开始=参考（假）；Tweener.init(app.ticker);constcontainer=newContainer();app.stage.addChild(容器);constplayer=newPlayer();const{scene,runScene,stopScene}=useScene();const{trap,runHurdle,score,hp}=useHurdle();.addChild（场景）；container.addChild（陷阱）；container.sortChildren();运行场景（）；functiongameStart(){start.value=true;播放器.play();const计时器=setTimeout(()=>{runHurdle(玩家);clearTimeout(计时器);},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类更方便场景移动。创建ticker，减少sprite的x坐标，实现场景移动。导出函数useScene(){constloader=newLoader();constscene=newContainer();场景。高度=130；场景。zIndex=1;constticker=newTicker();loader.add("footer",FooterImg).add("sky",SkyImg).load(()=>{constfooter=newTilingSprite(loader.resources.footer.textureasTexture,BODY_HEIGHT,130);页脚。y=BODY_WIDTH-130;footer.zIndex=2;constsky=newTilingSprite(loader.resources.sky.texture作为纹理，BODY_HEIGHT，BODY_WIDTH-80）；天空.tileScale.y=0.6;天空.zIndex=1;天空.y=-30;scene.addChild（页脚）；scene.addChild(天空);scene.sortChildren();constsceneTicker=()=>{footer.tilePosition.x-=3;天空.tilePosition.x-=3;};ticker.add(sceneTicker);});函数runScene(){ticker.start();}functionstopScene(){ticker.stop();}return{scene,runScene,stopScene};}useHurdle这个函数是用来创建障碍物和创建场景的，但是障碍物是普通的精灵类（Sprite），创建一个ticker移动它的x在移动的时候和角色做碰撞检测,如果碰撞,减少生命值,如果没有,增加分数exportfunctionuseHurdle(){constloader=newLoader();consttrap=newContainer();constticker=newTicker();常量纹理：Texture[]=[];让玩家：雪碧|空=空；常量马力=参考（100）；常量分数=参考（0）；NodeJS.定时器；trap.zIndex=3;loader.add("trap",TrapImg).load((_,resources)=>{TrapTexturePosition.forEach((position)=>{constt=newTexture(resources.trap.textureasany,newRectangle(...position));textures.push(t);});});loader.load(()=>{timer=setInterval(()=>{constindex=Math.floor(Math.random()*2)+1;constitem=newSprite(textures[index]);item.width=80;item.height=40;item.x=BODY_HEIGHT;item.y=BODY_WIDTH-120;trap.addChild(item);设scoreFlag=true;设hpFlag=true;设isHit=false;函数itemTicker(){item.x-=8;if(player&&!isHit){isHit=hitTestRectangle(player,item);if(hpFlag&&isHit){hp.value-=10;hpFlag=false;if(hp.value===0)stopGame();}elseif(scoreFlag&&item.x{PlayerTexturePosition.forEach((position,i)=>{consttexture=newTexture(resources.player.textureasany,newRectangle(...position));this.textures.push(texture);});});}privatewatchEvent(){document.addEventListener("keydown",this.keydown);document.addEventListener("keyup",this.keyup);}privateclearEvent(){document.removeEventListener("keyup",this.keydown);document.removeEventListener("keydown",this.keyup);}privatekeydown=(e:any)=>{if(e.code==="ArrowUp"){this.status="jump";if(this.y===this.defaultY){Tweener.add({target:this,duration:0.3,ease:Easing.easeInOutQuint},{y:this.y-120});}}elseif(e.code==="ArrowDown"){this.status="slide";this.texture=this.textures[10];}};privatekeyup=()=>{this.status="run";};停止（）{this.ticker.stop（）;这个.clearEvent();}play(){this.ticker.autoStart=true;construnTicker=()=>{this.down();这个入口（）；if(this.status==="run")this.run();elseif(this.status==="jump")this.jump();};this.ticker.add(runTicker);}//跑run(){this.texture=this.textures[Math.floor(Date.now()/100)%8];}jump(){this.texture=this.textures[(Math.floor(Date.now()/100)%5)+11];}//下载down(){if(this.y