​

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

​

*/

var ticks = 0;

​

function setup() {

    createCanvas(400, 400);

    player = new Player();

}

​

function draw() {

    background(0);

​

    if (ticks % 2 == 0) {

        player.tick();

    }

​

    player.render();

​

​

    fill(100, 45, 0, 100);

    textSize(14);

    text("Inspired by Magic Survival", 230, 396);

    ticks++;

}

​

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);

            }

        }

​

​

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

            console.log(i);

            var mana = this.manareflist[i];

​

            if (Math.sqrt((mana.x - this.x) * (mana.x - this.x) + (mana.y - this.y) * (mana.y - this.y)) < this.pickuprange) {

                mana.remove(i);

                this.exp++;

                return

            }

        }

​

    }

​

    tick() {

        this.x = (mouseX>20 && mouseX<380) ? mouseX : 200;

        this.y = (mouseY>20 && mouseY<380) ? mouseY : 200;

        this.tickMana();

​

    }

​

    renderHud() {

        fill(255);

        textSize(25);

        stroke(255, 255, 255);

        text("Mana in map: " + this.manareflist.length, 10, 50);

        fill(0, 255, 255);

        text("Exp: " + this.exp, 10, 25);

​

    }

​

    renderPlayer() {

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

        stroke(255, 255, 255, 240);

        strokeWeight(1.6);

        fill(255, 0, 0)

        triangle(this.x, this.y - this.playersize, this.x - this.playersize, this.y + this.playersize, this.x + this.playersize, this.y + this.playersize)

​

    }

​

    renderMana() {

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

            var mana = this.manareflist[i];

            // 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()

      this.renderDebug();

​

    }

      renderDebug(){

        noFill();

        strokeWeight(0.6);

        textSize(9);

        text('view', this.x+1-this.viewsize/2, this.y-this.viewsize/2+9)

        rect(this.x - this.viewsize / 2, this.y - this.viewsize / 2, this.viewsize, this.viewsize);

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

      }

​

}

​

class Mana {

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

        this.x = x;

        this.y = y;

        this.diameter = 10;

        this.fakediameter = 7;

        this.parent = parent;

        this.child = child;

        this.reflist = reflist;

​

    }

​

    setChild(manaChild) {

        this.child = manaChild;

    }

    setParent(manaParent) {

        this.parent = manaParent;

    }

​

    remove(index) {

        // when the mana ball is picked up

        // 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.splice(index, 1);

    }

​

    render() {

        fill(0, 255, 255, 244);

        noStroke();

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

        stroke(1);

        strokeWeight(2);

        if (this.parent != null) {

            stroke(255, 255, 0, 200);

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

        }

    }

​

    fakeRender() {

        fill(0, 255, 255, 100);

        noStroke();

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

        strokeWeight(0.2);

        if (this.parent != null) {

            stroke(0, 255, 0, 155);

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

        }

    }

}