Azurasky1/DragonArena

creating a 2d game with js and html

Andrea Sonny

@andreasonny83

you make that change

and see what happen

Billy B.

@Azurasky1

looks like i will need to remove this from everything in there

  modules.Projectiles = (function() {
    var projectiles = [];
    return {
      new: function(cv, x, y, width, height, direction, speed) {
        projectiles.push(
          new Projectile(cv, x, y, width, height, direction, speed));
      },

      getActive: function() {
        return projectiles.length;
      },

      draw: function() {
        for (var i = 0; i < projectiles.length; i++) {
          projectiles[i].draw();
        }
      }
    };
  })();

how does that look

Andrea Sonny

@andreasonny83

yes

give that a try and see if that still works

Billy B.

@Azurasky1

ok i changed a lot of stuff so haven't run anything yet

i will get to it

Andrea Sonny

@andreasonny83

that’s bad practice

you should always verify after changing something

Billy B.

@Azurasky1

i will have a lot of debugging to do lol

Andrea Sonny

@andreasonny83

Billy B.

@Azurasky1

can't seem to get an .avatar property to stick to my new _game.enemy

keeps just coming back null even when i explicitly assign it to something

i'm too tired to figure this out cuz i've been up all night so i'll try again later

Andrea Sonny

@andreasonny83

how did you assign that?

Billy B.

@Azurasky1

well

i'll show you

  Enemy.prototype.init = function(game, avatar, enemyInfo) {
    _game = game;

    _game.enemy.avatar = new Image();
    _game.enemy.avatar.src = avatar;
    console.log(_game.enemy.avatar.src);

Andrea Sonny

@andreasonny83

ok, you need firat to create the enemy object

Billy B.

@Azurasky1

  Enemy.prototype.draw = function () {
    _game.cv.drawImage(
      _game.enemy.avatar.src,

Andrea Sonny

@andreasonny83

_game.enemy = {}; after _game = game;

Billy B.

@Azurasky1

but i already define app.game.enemy within ready() in app.js

Andrea Sonny

@andreasonny83

app.game.enemy = {}; ?

Billy B.

@Azurasky1

  function ready() {
    window.removeEventListener('load', ready, false);

    // Create an instance of the app
    app = new App();

    // Make sure the game Object is empty before starting a new game
    app.game = {
      fps: fps
    };

    app.game.player = {};
    app.game.enemy = {};
    app.game.bodies = [];

    // Initialize modules
    app.modules.Overlays.init(app.el.overlays, app.game);

    // Start the welcome screen once the app is loaded
    app.modules.Overlays.startWelcome();
  }

  window.addEventListener('load', re

Andrea Sonny

@andreasonny83

what happen when you log game object inside Enemy.prototype.init?

Enemy.prototype.init = function(game, avatar, enemyInfo) {
    _game = game;

  console.log(_game);

can you see the enemy object in there?

Billy B.

@Azurasky1

i just checked and yes

what is this error here 25enemy.js:29 Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap)'

Andrea Sonny

@andreasonny83

something wrong inside your Enemy.prototype.draw function

Billy B.

@Azurasky1

  Enemy.prototype.draw = function () {
    _game.cv.drawImage(
      _game.enemy.avatar,
      _game.enemy.frame.width * _game.enemy.frame.current,
      _game.enemy.frame.direction * _game.enemy.frame.height,
      _game.enemy.frame.width, _game.enemy.frame.height,
       // centered on canvass
      _game.enemy.pos.x, _game.enemy.pos.y,
      // image size to draw
      _game.enemy.frame.width * _game.scaleFactor,
      _game.enemy.frame.height * _game.scaleFactor
    );

    this.drawHealth();

  }

i explicitly assign .enemy.avatar to a new image, then i assign the src to a path

and when i try to draw it with that function, i get that error

Andrea Sonny

@andreasonny83

show me where you assign _game.enemy.avatar

Billy B.

@Azurasky1

Enemy.prototype.init = function(game, avatar, enemyInfo) {
    _game = game;
    console.log(_game);

    _game.enemy.avatar = new Image();
    _game.enemy.avatar.src = avatar;
    console.log(_game.enemy.avatar.src);

  _game.enemy.pos = {
      x: Math.floor((Math.random() * 600) + 100) * _game.scaleFactor,
      y: Math.floor((Math.random() * 400) + 100) * _game.scaleFactor
    };

    _game.enemy.animation = {
      x: 0,
      y: 0
    };

  _game.enemy.frame = {
      current: 0,
      direction: Math.floor((Math.random() * 3)),
      total: enemyInfo.frames,
      width: (enemyInfo.width / enemyInfo.frames),
      height: (enemyInfo.height / enemyInfo.frames)
    };

    _game.enemy.health = {
      total: 100,
      current: 100,
      percent: 100
    };

    _game.enemy.speed = .05;
    _game.enemy.avatar = null;
    _game.bodies.push(_game.enemy);

  }

  modules.Enemy = new Enemy();
  window.$modules = modules;
})(window.$modules || {});

Andrea Sonny

@andreasonny83

and what is avatar ?

Billy B.

@Azurasky1

the path

a string

Andrea Sonny

@andreasonny83

is that correct?

Billy B.

@Azurasky1

it's passed in when the function is called

same format as player

here is the app.js

    app.modules.Player.init(app.game,
      '/images/players/player_00' + player + '.png', {
        frames: 4,
        width: playersInfo[player - 1].width,
        height: playersInfo[player - 1].height
      });


  app.modules.Enemy.init(app.game,
    '/images/dragons/dragon.png', {
      frames: 10,
      width: (750 / 10),
      height: (560 / 8)

    });

Andrea Sonny

@andreasonny83

so, does the dragon.png exists in that path?

Billy B.

@Azurasky1

yes i checked

Andrea Sonny

@andreasonny83

ok, so, inside your Enemy.prototype.draw = function () { function

console.log(_game.enemy);

Where communities thrive

People

Repo info

Activity