asdf-games/examples/shooter/src/main.js

import asdf from "../../../asdf/index.js";
const { Container, CanvasRenderer, KeyControls, MouseControls, Text, Texture, Sprite } = asdf;

// Board Setup
  const w = 640;
  const h = 300;
  const renderer = new CanvasRenderer(w, h);
  document.querySelector("#board").appendChild(renderer.view);

// Setup game variables
  let dt = 0;
  let last = 0;
  let lastShot = 0;
  let lastSpawn = 0;
  let spawnSpeed = 1.0;
  let scoreAmount = 0;
  let gameOver = false;

// Setup game objects
  const scene = new Container();

// Load game textures
  const textures = {
    background: new Texture("./res/images/bg.png"),
    spaceship: new Texture("./res/images/spaceship.png"),
    bullet: new Texture("./res/images/bullet.png"),
    baddie: new Texture("./res/images/baddie.png")
  }

// Spaceship
  const controls = new KeyControls();
  const ship = new Sprite(textures.spaceship);
  ship.pos.x = 120;
  ship.pos.y = h / 2 - 16;
  ship.update = function(dt, t) {
    const { pos } = this;
    pos.x += controls.x * dt * 300;
    pos.y += controls.y * dt * 300;

    if (pos.x < 0) pos.x = 0;
    if (pos.x > w - 32) pos.x = w - 32;
    if (pos.y < 0) pos.y = 0;
    if (pos.y > h - 32) pos.y = h - 32;
  }

// Bullets
   const bullets = new Container();
   function fireBullet(x, y) {
     const bullet = new Sprite(textures.bullet);
     bullet.pos.x = x;
     bullet.pos.y = y;
     bullet.update = function(dt, t) {
       bullet.pos.x += 400 * dt;
     }
     bullets.add(bullet);
   }

// Bad guys
  const baddies = new Container();
  function spawnBaddie(x, y, speed) {
    const baddie = new Sprite(textures.baddie);
    baddie.pos.x = x;
    baddie.pos.y = y;
    baddie.update = function(dt) {
      this.pos.x += speed * dt;
      this.pos.y += Math.sin(this.pos.x / 15) * 1;
    };
    baddies.add(baddie);
  }

// Show score
  const score = new Text(`${scoreAmount}`, {
    font: "15pt Visitor",
    fill: "#000000",
    align: "left"
  });
  score.pos.x = 50;
  score.pos.y = 15;
  score.update = function() {
    if (gameOver) {
      score.pos.x = w / 2;
      score.pos.y = (h / 3) * 2;
      score.text = `Score:  ` + `${scoreAmount}`;
      score.style.align = "center";
      score.style.font = "24pt Visitor"
    } else {
      score.text = `${scoreAmount}`;
    }
  }

// Gameover
  function doGameOver() {
    const gameOverMessage = new Text(`Game Over`, {
      font: "45pt Visitor",
      fill: "#000000",
      align: "center"
    });
    gameOverMessage.pos.x = w / 2;
    gameOverMessage.pos.y = h / 3;

    scene.add(gameOverMessage);
    scene.remove(ship);
    scene.remove(baddies);
    scene.remove(bullets);
    gameOver = true;
  }

// Add game objects
  scene.add(new Sprite(textures.background));
  scene.add(ship);
  scene.add(bullets);
  scene.add(baddies);
  scene.add(score);


// Looping Code
function loopme(ms) {
  requestAnimationFrame(loopme);
  const t = ms / 1000;
  dt = t - last;
  last = t;

  // Game logic code
  if (controls.action && t - lastShot > 0.15) {
    lastShot = t;
    fireBullet(ship.pos.x + 24, ship.pos.y + 10);
  }

  // Spawn bad guys
  if (t - lastSpawn > spawnSpeed) {
    lastSpawn = t;
    const speed = -50 - (Math.random() * Math.random() * 100);
    const position = Math.random() * (h - 24);
    spawnBaddie(w, position, speed);

    spawnSpeed = spawnSpeed < 0.05 ? 0.6 : spawnSpeed * 0.97 + 0.001;
  }

  // Destroy bullets when they go out of the screen
  baddies.children.forEach(baddie => {
    bullets.children.forEach(bullet => {
      let dx_b = baddie.pos.x + 16 - (bullet.pos.x + 8);
      let dy_b = baddie.pos.y + 16 - (bullet.pos.y + 8);
      if (Math.sqrt(dx_b * dx_b + dy_b * dy_b) < 24) {
        bullet.dead = true;
        baddie.dead = true;
        if (!gameOver) {
          scoreAmount += Math.floor(t);
        }
      }

      if (bullet.pos.x > w + 20) {
        bullet.dead = true;
      }
    });
    let dx_s = baddie.pos.x + 16 - (ship.pos.x + 16)
    let dy_s = baddie.pos.y + 16 - (ship.pos.y + 16)
    if (Math.sqrt(dx_s * dx_s + dy_s * dy_s) < 32) {
      if (!gameOver) {
        doGameOver();
      }
      baddie.dead = true;
    }

    if (baddie.pos.x < -32) {
      if (!gameOver) {
        doGameOver();
      }
      baddie.dead = true;
    }
  });



  scene.update(dt, t);
  renderer.render(scene);
}
requestAnimationFrame(loopme);