User Stories¶
We hebben een paar user stories zelf geschreven gebaseerd op één van onze inspiraties: Puzzle & Dragons . Hier is hoe we hebben die uitgewerkt:
Personages¶
We hebben voor deze spel een typische middeleewse fantasy gekozen. Nadat we hebben spritesheets voor onze personages gedownload, starten we die te animeren door gebruik van Javascript en p5.Image. De methode die we hebben daarvoor gebruikt is:
Hierbij wordt de sx parameter steeds verschoven om een andere deel van de spritesheet weer te geven.class Character{
//De functies bewegen worden uitgevoerd afhakelijk van of de personage valt aan, geraakt wordt, of doodgaat.
attack(enemy) {
if (this.#hp > 0) {
this.#animationstate = 2;
this.#animationtime = 0;
enemy.hp -= this._damage;
enemy.hurt();
}
}
hurt() {
this.#animationstate = 3;
this.#animationtime = 0;
}
death() {
this.#animationstate = 4;
}
//De twee functies beneden zorgen voor het tekenen van de personages
draw(sprite) {
let frame;
let time = Math.floor(this.#animationtime / (this.#animationtimetotal / Math.round(sprite.width / 128)));
const distance = 128;
let spritex;
const spritesize = this.#size * 1.5;
//Afhakelijk van of de personage de held of de vijand is, sommige parameters zullen verschillen
if (this.#role == "pc") {
frame = distance * time;
spritex = this.#x;
}
else if (this.#role == "npc") {
frame = sprite.width - distance * (1 + time);
spritex = this.#x - (spritesize - this.#size) / 2;
}
image(sprite, spritex, this.#y - spritesize, spritesize, spritesize, frame, 0, sprite.height, sprite.height);
if ((frame >= sprite.width && this.#role == "pc") || (frame < 0 && this.#role == "npc")) {
if (this.#animationstate > 0 && this.#animationstate < 4) {
this.#animationstate = 1;
frame = 0;
this.#animationtime = 0;
}
else if (this.#animationstate == 4) {
this.#animationstate = 0;
}
}
}
}
Setting¶
Voor de setting hebben we typische middeleeuwse fantasy gekozen en een grot van de tovenaar als achtergrond. Ook hebben we een ridder als held gekozen en middeleeuwe monsters als vijanden, zoals de tovenaar, een skelet, of een slijmmonster.
Speciale tegels¶
Dit user story was door Candy Crush geïnspireerd. Voor speciale tegels hebben we hout en steen als images gekozen. Hout heeft een duurzaamheid van 3 en steen de duurzaamheid van 5.
class Tile {
#durability
get durability() {
return this.#durability;
}
set durability(value) {
this.#durability = value;
}
constructor(type, size, x, y, gridx, gridy) {
this._type = type;
this.#size = size;
this.#x = x;
this.#y = y;
this.#gridx = gridx;
this.#gridy = gridy;
this.#shift = 0;
this.#visible = true;
if(type == 6){
this.#durability = 3;
}
else if (type == 8){
this.#durability = 5;
}
else{
this.#durability = Infinity;
}
}
}
class TileGrid {
//Hier woordt door elke cluster over elke cluster
#loopClusters() {
for (let i = 0; i < this.#clusters.length; i++) {
let cluster = this.#clusters[i];
let coffset = 0;
let roffset = 0;
for (let j = 0; j < cluster.length; j++) {
let tile = this.#tiles[cluster.column + coffset][cluster.row + roffset];
tile.type = -1;
for (let x = tile.x - 1; x <= tile.x + 1; x++) {
if (x < 0) {
continue;
}
else if (x >= this.#width) {
break;
}
for (let y = tile.y - 1; y <= tile.y + 1; y++) {
if (y < 0) {
continue;
}
else if (y >= this.#height) {
break;
}
let tile2 = this.getTileAtGridIndex(x, y);
if (tile2 != null) {
tile2.durability -= 1;
if (tile2.durability <= 0) {
tile2.type = -1;
}
}
}
}
if (cluster.horizontal) {
coffset++;
}
else {
roffset++;
}
}
}
}
}