​

Idea:

(inspired by magic survival)

​

spawn 'mana' balls out of sight. these are nodes. every so often, the ones in~around sight should update and place a new ball somewhere further out of sight.

​

moving too far from a ball unloads it from sight but it should still exist

​

TODO

- some hud with manabar

​

*/

​

​

function setup() {

  createCanvas(400, 400);

  player = new Player();

}

​

function draw() {

  background(220);

  player.tick();

  player.render();

}

​

class Player {

  /* the mouse is the player and it has a view around it 

  */

  constructor(){

    this.x=mouseX;

    this.y=mouseY;

    this.range = 10; // px range

    this.playersize = 5;

    this.pickuprange = 5;

    this.viewsize = 55;

    this.spawnMargin = 10;

    this.manareflist = [];

    this.manatick = 0;

    this.exp = 0;

  }

  tickMana(){

​

    this.manatick ++;

    if (this.manatick % 25 === 0){

        var angle = Math.random()*Math.PI*2;

        var radius = this.viewsize+this.spawnMargin + random(-5,5);

        var x = this.x + Math.cos(angle)*radius;

        var y = this.y + Math.sin(angle)*radius;

      if (this.manareflist.length == 0){

        this.manareflist.push(new Mana(x, y, null, null, this.manareflist));

      } else {

        var lastMana = this.manareflist[this.manareflist.length - 1];

        var newMana = new Mana(x, y, lastMana, null, this.manareflist);

        lastMana.setChild(newMana);

        this.manareflist.push(newMana);

      }

    }

    //console.log(this.manareflist.length)

    //console.log(this.manatick)

  }

  tick(){

    this.x = mouseX;

    this.y = mouseY;

    this.tickMana();

  }

  renderHud(){

    fill(255);

    textSize(25);

    text(this.exp, 10, 25);

  }

  renderPlayer(){

        fill(color(100,15,15,100));

    triangle(mouseX, mouseY-this.playersize, mouseX-this.playersize, mouseY+this.playersize, mouseX+this.playersize, mouseY+this.playersize)

    noFill();

    rect(mouseX-this.viewsize/2, mouseY-this.viewsize/2, this.viewsize, this.viewsize);

    ellipse(this.x, this.y, this.viewsize*2, this.viewsize*2);

  }

  renderMana(){

    for (var i = this.manareflist.length-1; i>0; --i){

      var mana = this.manareflist[i];

      console.log(mana.x + " " + mana.y);

      // see if mana within reach

      if (mana.x < this.x+this.pickuprange && 

          mana.x > this.x-this.pickuprange &&

          mana.y < this.y+this.pickuprange &&

          mana.y > this.y-this.pickuprange){

        mana.remove();

        this.exp++;

      }

      // see if mana within view

      if (mana.x < this.x+this.viewsize && 

          mana.x > this.x-this.viewsize &&

          mana.y < this.y+this.viewsize &&

          mana.y > this.y-this.viewsize){

        mana.render();

      } else {

        mana.fakeRender();

      }

​

    }

  }

​

  render(){

    this.renderPlayer();

    this.renderMana();

    this.renderHud()

​

  }

}

​

class Mana {

  constructor(x, y, parent, child, reflist) {

    this.x=x;

    this.y=y;

    this.diameter = 7;

    this.parent=parent;

    this.child=child;

    this.reflist=reflist;

​

  }

  setChild(manaChild){

    this.child=manaChild;

  }

  setParent(manaParent){

    this.parent=manaParent;

  }

  remove(){

    // when the mana ball is picked up

    console.log('removing ' + this)

    // mana in middle

    if (this.parent != null && this.child != null){

      this.parent.setChild(this.child);

      this.child.setParent(this.parent);

      // mana is root

    } else if (this.parent === null && this.child != null){

      this.child.setParent(null);

      // mana is endnode

    } else if (this.parent != null && this.child === null){

      this.parent.setChild(null);

    }

    this.reflist.pop(this);

  }

​

  render() {

    fill(0,255,255,100);

​

    ellipse(this.x, this.y, this.diameter, this.diameter);

    if (this.parent != null){

      stroke(1);

      strokeWeight(0.5);

      line(this.x, this.y, this.parent.x, this.parent.y)

    }

  }

  fakeRender(){

     fill(0,255,255,10);

    ellipse(this.x, this.y, this.diameter, this.diameter);

    if (this.parent != null){

      stroke(0,0,0,15)

      strokeWeight(0.2);

      line(this.x, this.y, this.parent.x, this.parent.y)

    }

  }

}

​

/*

Following along with SimonDev's spacial hash grid tutorial https://www.youtube.com/watch?v=sx4IIQL0x7c

​

*/

class SpacialHashGrid{

  constructor(bounds, dimensions){

    this._bounds = bounds;

    this._dimensions = dimensions;

    this._cells = new Map();

  }

}