How to use pixi.js to make simple Parkour games

How to use pixi.js Make simple Parkour Games

This article mainly explains “ How to use pixi.js Make simple Parkour Games ”, The explanation in the text is simple and clear , Easy to learn and understand , Next, please follow Xiaobian's ideas and go deeper slowly , Study and learn together “ How to use pixi.js Make simple Parkour Games ” Well ！

Initialize project

Use vite Initialize project

pnpm create vite my-vue-app

install pixi.js and pixi-tweener

pixi-tweener An open source library for over animation

pnpm i pixi.js pixi-tweener

The main logic

useParkour

This function is used to create pixi app, Put the scene , obstacle , People added to app in

• containerRef canvas The container of

• gameStart Start the game

• start Start state

• score fraction

• hp Blood volume

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

This function is used to create the sky 、 Ground scene

Load the sky 、 Ground texture , Create tile sprites (TilingSprite), This TilingSprite Class is more convenient for moving scenes

establish ticker Diminishing elf x Coordinates realize scene movement

export function useScene() {  const loader = new Loader();  const scene = new Container();  scene.height = 130;  scene.zIndex = 1;  const ticker = new Ticker();  loader    .add("footer", FooterImg)    .add("sky", SkyImg)    .load(() => {      const footer = new TilingSprite(        loader.resources.footer.texture as Texture,        BODY_HEIGHT,        130      );      footer.y = BODY_WIDTH - 130;      footer.zIndex = 2;      const sky = new TilingSprite(        loader.resources.sky.texture as Texture,        BODY_HEIGHT,        BODY_WIDTH - 80      );      sky.tileScale.y = 0.6;      sky.zIndex = 1;      sky.y = -30;      scene.addChild(footer);      scene.addChild(sky);      scene.sortChildren();      const sceneTicker = () => {        footer.tilePosition.x -= 3;        sky.tilePosition.x -= 3;      };      ticker.add(sceneTicker);    });  function runScene() {    ticker.start();  }  function stopScene() {    ticker.stop();  }  return { scene, runScene, stopScene };}

useHurdle

This function is used to create obstacles

It's similar to creating a scene , But the obstacles are ordinary elves (Sprite), establish ticker Move it x

Do collision detection with people when moving , If you collide, your health will be reduced , If not, increase the score

export function useHurdle() {  const loader = new Loader();  const trap = new Container();  const ticker = new Ticker();  const textures: Texture[] = [];  let player: Sprite | null = null;  const hp = ref(100);  const score = ref(0);  let timer: NodeJS.Timer;  trap.zIndex = 3;  loader.add("trap", TrapImg).load((_, resources) => {    TrapTexturePosition.forEach((position) => {      const t = new Texture(        resources.trap.texture as any,        new Rectangle(...position)      );      textures.push(t);    });  });  loader.load(() => {    timer = setInterval(() => {      const index = Math.floor(Math.random() * 2) + 1;      const item = new Sprite(textures[index]);      item.width = 80;      item.height = 40;      item.x = BODY_HEIGHT;      item.y = BODY_WIDTH - 120;      trap.addChild(item);      let scoreFlag = true;      let hpFlag = true;      let isHit = false;      function itemTicker() {        item.x -= 8;        if (player && !isHit) {          isHit = hitTestRectangle(player, item);          if (hpFlag && isHit) {            hp.value -= 10;            hpFlag = false;            if (hp.value === 0) stopGame();          } else if (scoreFlag && item.x < player.x) {            score.value++;            scoreFlag = false;          }        }        if (item.x < -item.width) {          ticker.remove(itemTicker);          trap.removeChild(item);        }      }      ticker.add(itemTicker);    }, 2000);  });  function runHurdle(target: Sprite) {    player = target;    ticker.start();  }  function stopGame() {    timer && clearInterval(timer);    ticker.stop();  }  return { trap, runHurdle, score, hp };}

Player

Player class ： Realize running 、 Jump up 、 Sliding shovel 、 The effect of admission

By changing Sprite Of texture Achieve running effect , Listening to keyboard events , Decrease when pressing the key y, Change the sliding shovel texture when pressing the key

export class Player extends Sprite {  defaultY = BODY_WIDTH - 160;  textures: Texture[] = [];  status: "run" | "jump" | "slide" = "run";  ticker = new Ticker();  constructor() {    super();    this.width = 80;    this.height = 80;    this.x = -120;    this.y = this.defaultY;    this.zIndex = 10;    this.loader();    this.watchEvent();  }  private loader() {    const loader = new Loader();    loader.add("player", PlayerImg).load((_, resources) => {      PlayerTexturePosition.forEach((position, i) => {        const texture = new Texture(          resources.player.texture as any,          new Rectangle(...position)        );        this.textures.push(texture);      });    });  }  private watchEvent() {    document.addEventListener("keydown", this.keydown);    document.addEventListener("keyup", this.keyup);  }  private clearEvent() {    document.removeEventListener("keyup", this.keydown);    document.removeEventListener("keydown", this.keyup);  }  private keydown = (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 }        );      }    } else if (e.code === "ArrowDown") {      this.status = "slide";      this.texture = this.textures[10];    }  };  private keyup = () => {    this.status = "run";  };  stop() {    this.ticker.stop();    this.clearEvent();  }  play() {    this.ticker.autoStart = true;    const runTicker = () => {      this.down();      this.entrance();      if (this.status === "run") this.run();      else if (this.status === "jump") this.jump();    };    this.ticker.add(runTicker);  }  //  run   run() {    this.texture = this.textures[Math.floor(Date.now() / 100) % 8];  }  jump() {    this.texture = this.textures[(Math.floor(Date.now() / 100) % 5) + 11];  }  //  whereabouts   down() {    if (this.y < this.defaultY) {      this.status = "jump";      this.y += 5;    } else {      if (this.status === "jump") {        this.status = "run";      }    }  }  //  admission   entrance() {    if (this.x < 120) this.x += 5;  }}

Thank you for reading , That's all “ How to use pixi.js Make simple Parkour Games ” Content. , After learning this article , I believe everyone knows how to use it pixi.js I have a deeper understanding of the problem of making simple Parkour Games , The specific use needs to be verified by practice . This is billion speed cloud , Xiaobian will push you articles with more relevant knowledge points , Welcome to your attention ！