【Tank】9.0 创建玩家；玩家坦克控制、碰撞检测、子弹、坦克互战

Creating a Player

First load the texture
src/config.ts

    // ...
    // Player Tank
    import imgUrlPlayerTop from './static/images/player/top.gif';
    import imgUrlPlayerRight from './static/images/player/right.gif';
    import imgUrlPlayerBottom from './static/images/player/bottom.gif';
    import imgUrlPlayerLeft from './static/images/player/left.gif';


    export default {
      // ...
      images: {
        // Player Tank
        playerTop: imgUrlPlayerTop,
        playerRight: imgUrlPlayerRight,
        playerBottom: imgUrlPlayerBottom,
        playerLeft: imgUrlPlayerLeft
      }
    }
  

Copy Player.ts from Tank.ts
src/canvas/Player.ts

    /**
     * Model
     * Enemy Tank
     */
    import AbstractModel from "./abstract/AbstractModel";
    import {image} from "../service/image";
    import {EnumDirection} from "../enum/enumPosition";

    import {upperFirst} from 'lodash';
    import config from "../config";
    import water from "../canvas/Water";
    import wallBrick from "../canvas/WallBrick";
    import wallSteel from "../canvas/WallSteel";
    import player from "../canvas/Player";
    import utils from "../utils";

    export default class ModelTank extends AbstractModel implements IModel {
      name: string = 'player';

      // Canvas instance
      canvas: ICanvas = player;
      // Inherit parent class abstract method: render texture
      // Some custom actions and behaviors are implemented here
      render(): void {
        // Make the tank move
        this.move()
      }

      // Randomly select one image
      getImage(): HTMLImageElement {
        return image.get(`${this.name}${upperFirst(this.direction)}` as keyof typeof config.images)!
      }

      // Tank movement
      protected move(): void {
        while (true) {
          // Clear canvas
          // this.canvas.clearRect(this.x, this.y, config.model.common.width, config.model.common.height);
          // ********************* Coordinate update *********************
          let x = this.x;
          let y = this.y;
          switch (this.direction) {
            case EnumDirection.top:
              y -= 2
              break;
            case EnumDirection.right:
              x += 2
              break;
            case EnumDirection.bottom:
              y += 2
              break;
            case EnumDirection.left:
              x -= 2
              break;
          }
          if (utils.modelTouch(x, y, [
            ...water.models, // Water
            ...wallBrick.models, // Brick wall
            ...wallSteel.models, // Steel wall
          ]) || utils.isCanvasTouch(x, y)) {
            // Randomly select direction
            this.randomDirection()
          } else {
            this.x = x;
            this.y = y;
            // Exit while loop
            break;
          }
        }
        // ********************* Coordinate update *********************
        // Redraw canvas, render tank model, call here to reduce redraw count
        super.draw()
      }
    }
  

src/model/Player.ts

    /**
     * Model
     * Enemy Tank
     */
    import AbstractModel from "./abstract/AbstractModel";
    import {image} from "../service/image";

    import {upperFirst} from 'lodash';
    import config from "../config";
    import player from "../canvas/Player";

    export default class ModelTank extends AbstractModel implements IModel {
      name: string = 'player';

      // Canvas instance
      canvas: ICanvas = player;
      // Inherit parent class abstract method: render texture
      // Some custom actions and behaviors are implemented here
      render(): void {
        // Initialize model
        super.draw()
        // Control tank movement, add keyboard event listener
        document.addEventListener('keydown', this.changeDirection.bind(this))
      }
      
      /**
       * Direction change
       * @param event Keyboard event
       */
      changeDirection(event: KeyboardEvent) {
        console.log(event)
      }

      // Randomly select one image
      getImage(): HTMLImageElement {
        return image.get(`${this.name}${upperFirst(this.direction)}` as keyof typeof config.images)!
      }
    }
  

src/main.ts

    import player from "./canvas/Player";
    // ...
    const bootstrap = async () => {
      // ...
      player.render() // Canvas rendering: player tank
    }
    // ...
  

image.png