Aller au contenu

Lancer une balle

Simon

Charger des images
Section intitulée « Charger des images »
load.js
```
const PNG = [
  "ball",
  "grass",
]
```

Charger un son

const MP3 = [
  "throw",
  "bong",
  "wooosh",
  "off",
]

Créer des composants

function throwBall(p) {
  const param = {
    speed: 800,
    margin: vec2(40, 40),
    duration: 4,
    fadeDuration: 0.4,
    bouncing: 0.8,
    friction: 0.4,
    detuneAmp: 400,
    ...p
  }
  return {
    id: "throwBall",
    add() {
      this.on("throw", (facing = 1) => {
        if (this.isAlive) {
          const dir = vec2(facing, -0.5)
          const x = this.pos.x + param.margin.x * facing
          const y = this.pos.y - param.margin.y
          ball = add([
            sprite("ball"),
            pos(x, y),
            lifespan(param.duration, { fade: param.fadeDuration }),
            area(),
            body(),
            bouncingBall({ ...param, ...{ direction: dir } }),
            anchor("center"),
            opacity(),
            "projectile",
          ])
        }
      })
    },
  }
}

function throwBallController(p) {
  const param = {
    shootKey: "space",
    reloadDelay: 0,
    ...p
  }
  return {
    id: "throwBallController",
    require: ["alive", "throwBall"],
    throwSavedTime: 0,
    add() {
      onKeyPress(param.shootKey, () => this.throwBallTrigger())
    },
    throwBallTrigger() {
      if (this.isAlive && time() - this.throwSavedTime > param.reloadDelay) {
        this.trigger("throw", this.facing)
        this.throwSavedTime = time()
      }
    },
  }
}

function bouncingBall(p) {
  const param = {
    direction: vec2(0, 0),
    speed: 0,
    bouncing: 0.8,
    friction: 0.4,
    detuneAmp: 400,
    ...p
  }
  return {
    id: "bouncing ball",
    currentSpeed: 1,
    currentDirection: param.direction,
    add() {
      this.onCollide("body", (obj, col) => {
        let m = vec2(1, 1)
        if (col.isTop() || col.isBottom()) m = vec2(1, -1)
        else if (col.isLeft() || col.isRight()) m = vec2(-1, 1)
        if (col.isBottom()) this.jump(this.currentSpeed * param.speed)
        this.currentDirection = this.currentDirection.scale(m)
        this.currentSpeed = this.currentSpeed * param.bouncing
        this.currentVolume = this.currentVolume * param.bouncing
        this.trigger("bounce", { volume: this.currentSpeed, detune: this.currentSpeed * param.detuneAmp })
      })
    },
    update() {
      this.move(this.currentDirection.scale(this.currentSpeed * param.speed))
      if (this.isGrounded()) this.currentSpeed -= this.currentSpeed * param.friction * dt()
    },
  }
}

function danger(p) {
  const param = {
    damage: 1,
    collisions: ["top", "left", "bot", "right"],
    ongoing: false,
    tag: "alive",
    ...p
  }
  return {
    add() {
      const c = param.ongoing ? "collideUpdate" : "collide"
      this.on(c, (obj, col) => this.checkDangerColission(obj, col))
    },
    checkDangerColission(obj, col) {
      if (obj.is(param.tag) && !this.hidden) {
        for (const c of param.collisions) {
          if (c == "top" && col.isTop()) obj.trigger("hit", param.damage)
          else if (c == "left" && col.isLeft()) obj.trigger("hit", param.damage)
          else if (c == "bot" && col.isBottom()) obj.trigger("hit", param.damage)
          else if (c == "right" && col.isRight()) obj.trigger("hit", param.damage)
        }
      }
    },
  }
}

modifier le joueur

    "#": () => [ // player 1
      throwBallController(),
      throwBall(),
      sprite("bean"),
      platformerController(),
      alive(),
      opacity(),
      scale(),
      health(1, 4),
      area(),
      anchor("bot"),
      body(),
      respawn(),
      falling(),
    ],

Lancer une animation

scene("game", () => {

  const config = { ...LEVEL_CONFIG, ...LEVELS[CURRENT_LEVEL].config }
  const map = LEVELS[CURRENT_LEVEL].map.split("\n")
  const level = addLevel(map, config)

  add([
    multiplayerCamera(),
  ])
  setGravity(config.gravity)
  setBackground(config.backgroundColor)

  on('throw', 'player', () => play('throw'))
  on('bounce', 'bouncing ball', (obj, p) => play('bong', p))
  on('jump', 'player', () => play('wooosh'))
  on('drop', 'player', () => play('off'))
  on('respawn', 'player', (obj) => obj.play('idle'))
  on('sleep', 'player', (obj) => obj.play('sleep'))
  on('awake', 'player', (obj) => obj.play('idle'))
  on('jump', 'player', (obj) => obj.play('jump', { speed: 4, onEnd: () => obj.play('idle') }))
  on('drop', 'player', (obj) => obj.play('worry'))

}

Paramètres

example

throwBall({
  speed: 800,
  margin: vec2(40, 40),
  duration: 4,
  fadeDuration: 0.4,
  bouncing: 0.8,
  friction: 0.4,
  detuneAmp: 400
}),

example

throwBallController({
  shootKey: "space",
  reloadDelay: 0
}),

example

bouncingBall({
  direction: vec2(0, 0),
  speed: 0,
  bouncing: 0.8,
  friction: 0.4,
  detuneAmp: 400
}),

example

danger({
  damage: 1,
  collisions: ["top", "left", "bot", "right"],
  ongoing: false,
  tag: "alive"
}),

Ressources