Suck the cat with code! This paper is participating in[Cat Essay Campaign].

Demo address

Address first: Tigger

Game shows

Long press the charge, release the jump.

Technology USES

Vite packaging, typescript syntax, pixiJS rendering engine.

Step 1: Create a project

Method 1: Create the project using Vite, remove everything related to vUE except ts, vite, and then execute NPM install pixijs

Method 2: NPM init then use NPM to install vite, typescript, pixiJS and configure vite, tsconfig

I’m lazy, so I chose the first one

Delete all SRC files and folders except main.ts, then create components, Control,utils folder, which represent components, controls, tools respectively.

Step 2: Create the scene

First introduced pixijis

import * as PIXI from 'pixi.js';
Copy the code

Then initialize the stage and add it under the body

const app = new PIXI.Application({width: 640.height: 360});
document.body.appendChild(app.view);
Copy the code

Running the project will have a black background

Here I directly use the pixi loader.shared to load the background, floating ground, cat and other resources, as follows:

PIXI.Loader.shared.add(['./image/bg.png'.'./image/ground.png'.'./image/replay.png'.'./image/jump_cat.json']).load(() = > setup(app));
Copy the code

So the image resource is loaded, but it’s still not used, so to use the resource, we pass in a setup function, and in that function, Can through the PIXI. Loader. Shared. Resources [your resource path (as shown above. / image/bg. PNG)]. Get the image texture texture, it passed to the new PIXI. Sprite (photo texture); , you can get the Sprite instance.

Create a function:

/** * Create Sprite *@returns * /
  private createSprite(): PIXI.Sprite{
    let Sprite = PIXI.Sprite;
    let loader = PIXI.Loader.shared;
    return new Sprite(loader.resources[this.spritePath].texture);
  }
Copy the code

Once you’ve created a Sprite, how do you put it on the stage? Here’s a function:

this.app.stage.addChild(this.sprite);

Details are as follows:

    this.sprite = new Sprite(texture);
    this.sprite.width = 640; // Set the width
    this.sprite.height = 480; // Set the height
    this.sprite.position.set(0.0); // Set the coordinates
    this.app.stage.addChild(this.catSprite); // Add stage
Copy the code

Operation effect:

Step 3: Create suspended ground

The method is basically the same as above, except that it needs to generate multiple, and randomly increase the x coordinate value and random width value, the effect is as follows:

Step 4: Generate a cat

First: We have to have a cat:

Then find the cat template online and make a horizontal version of her cat in PS. The effect is as follows:

Then import the cat cat picture resource, add it to the stage with the same method as above, set the coordinates, the effect is as follows:

Final step: Implement the game logic

Uh.. Uh.. Uh..

The code is bad, it is hard to describe, has been open source, we want to see the source 😣😣😣.

Part code:

import * as PIXI from 'pixi.js';
import SceneSprite from '.. /components/scene';
import RoleSprite from '.. /components/role';
import { formatPower } from '.. /utils/common';
import { hitTestRectangle } from '.. /utils/testHit';
import Gameover from '.. /components/gameover';

export function setup (app:PIXI.Application) {
  
  let clickStatus = 0;
  let pointerTime = 0;
  // Build the scene
  const scene = new SceneSprite(app);
  const role = new RoleSprite(app);
  

  function reset(){
    scene.reset();
    role.reset();
    app.stage.interactive = true;
    app.stage.buttonMode = true;
    clickStatus = 0;
  }
  const over = new Gameover(app, reset);
  

  app.stage.interactive = true;
  app.stage.buttonMode = true;
  app.stage.on('pointerdown'.() = > {
    pointerTime = Date.now();
  })
  app.stage.on('pointerup'.() = > {
    if(clickStatus ! = =0) {
      return;
    }
    clickStatus = 1;
    const power = formatPower(Date.now() - pointerTime);
    role.jump(power, (offsetX: number) = > {
      const { children } = scene.getSprite().children[1] as PIXI.Container;
      let isHit = false;
      const {width,height,x,y} = role.getSprite();
      const newSize = {
        width: width - 50,
        height,
        x: x + 20,
        y
      }
      for (let i = 0; i < children.length; i++) {
        const groundSprite = children[i] as PIXI.Sprite;
        constct = { ... groundSprite.getGlobalPosition(),width: groundSprite.width, height: groundSprite.height }
        isHit = isHit || hitTestRectangle(newSize, ct);
      }
      // If there is a collision, continue
      if (isHit) {
        let counter = 0;
        const speed = 5;
        const executeAnimation = () = > {
          counter+=speed;
          scene.move(speed);
          role.move(speed);
          if (counter >= offsetX) {
            clickStatus = 0;
            app.ticker.remove(executeAnimation);
          }
        }
        app.ticker.add(executeAnimation);
      } else { // If there is no collision, the game is over
        let counter = 0;
        const executeDown = () = > {
          counter+=10;
          role.down(10);
          if (counter >= 160) {
            app.ticker.remove(executeDown);
            app.stage.interactive = false;
            app.stage.buttonMode = false; over.show(role.getScore()); } } app.ticker.add(executeDown) } }); })}Copy the code

conclusion

Write the essay for the first time, is really don’t know what to write, then think always wanted to do a small game, besides the cat cat (up) with me more than three years, she is love jump jump run run (although fat now), so he had the biggest cat little game, later will have time to update, gradually achieve y random floating floor, joining other obstacles, to join the music and so on.