Code Conventions¶
De code conventies van de vorige blok (duidelijke naamgeving, commentaar, code layout en vermijden van magische getallen) zijn nog steeds toegepast. Bovendien worden sommigen van de nieuwe Google code conventions gebruikt.
class Character {
//De coördianten van waar de personage moet getekend worden
#x
#y
#role
//De huidige en maximale hp van de personage
#hp
#maxhp
_damage
_spritesheet
#size
#color
//Deze parameters zijn voor animaties bedoeld
#animationstate = 0;
#animationtime = 0;
#animationtimetotal = 900;
//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 bewgen 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;
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;
}
fill(255, 0, 0);
stroke(0);
strokeWeight(5);
rect(this.#x, this.#y, this.#size, 30, 10);
if (this.#hp > 0) {
fill(0, 255, 0);
stroke(0);
strokeWeight(3);
rect(this.#x, this.#y, this.#size * (this.#hp / this.#maxhp), 30, 10);
}
if (this.#animationstate == 2) {
fill(this.#color);
textSize(100);
textFont(gameManager.getFont("medieval"));
text(this._damage, this.#x + this.#size / 3, this.#y - this.#size);
}
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;
}
}
}
update(deltaTime) {
if (this.#animationstate > 0) {
this.#animationtime += deltaTime;
if (this.#animationstate == 1) {
this.draw(this._spritesheet.idle);
}
else if (this.#animationstate == 2) {
this.draw(this._spritesheet.attack);
}
else if (this.#animationstate == 3) {
this.draw(this._spritesheet.hurt);
}
else if (this.#animationstate == 4) {
this.draw(this._spritesheet.dead);
}
}
}
constructor(x, y, role, hp, size, color) {
this.#x = x;
this.#y = y;
this.#role = role;
this.#hp = hp;
this.#maxhp = hp;
this.#size = size;
this.#color = color
this.#animationstate = 1;
}
};
class Hero extends Character {
//Hier wordt de held aangemaakt
constructor(x, y, size) {
super(x, y, "pc", 500, size, color(0, 0, 255));
this._damage = 0;
this._spritesheet = {
idle: gameManager.getImage("knight_idle"),
attack: gameManager.getImage("knight_attack"),
hurt: gameManager.getImage("knight_hurt"),
dead: gameManager.getImage("knight_dead")
};
};
};
class Tile {
//Dit zijn de coördinaten van een tile
#x;
#y;
//Dit zijn de coördinaten van de tilegrid waarin de tegel geplaatst wordt
#gridx;
#gridy;
//Dit is de grootte van de tegel
#size;
//De tegels hebben een bepaalde image afhankelijk van de type
_image;
#visible;
_type;
#shift;
//Sommige tegels hebben durability (duurzaamheid) die daalt als de tegel ernaast is vernietigd
#durability
//Hier worden de tegels getekend
draw(time) {
let coord = this.getTileCoordinate(0, time * this.#shift);
if (this.#visible && this._type > 0) {
fill(128, 0, 0);
stroke(80, 0, 0);
strokeWeight(3);
rect(coord.x, coord.y, this.#size, this.#size);
image(this._image, coord.x, coord.y, this.#size, this.#size);
}
}
//De functie die coördinaten berekent van waar de tegel meot getekend worden.
getTileCoordinate(shiftx, shifty) {
let tilex = this.position.x + shiftx * this.#size;
let tiley = this.position.y + shifty * this.#size;
return { x: tilex, y: tiley }
}
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;
}
}
};
// Hier is de breedte en de hoogte van de canvas
let width = 800;
let height = 1400;
//Hier zijn de booleans voor winnen en verlies
let victory = false;
let defeat = false;
//Dit boolean controleert of de level is aangemaakt
let done = false;
//Hier zijn de personages, namelijk de held en de vijand
let hero;
let enemies = [];
//Dit boolean is voor het startscherm
let start = true;
//Hier wordt geteld na hoeveel moves gaat de vijand aanvallen.
let movesleft;
//Hier is de framerate (aantal frames per seconde)
const fr = 60;
//Hier staan minuten en seconden voor de timer
let seconds = 0;
let minutes = 0;
//Hier wordt totaal aantal moves per sessie opgeslagen
let moves = 0;
/*Hier worden de parameters voor tileGrid aangemaakt, namelijk: hoogte, breedte, grootte van de tiles
en de coördinaten van de TileGrid */
const tileWidth = 6, tileHeight = 6, tileSize = 120;
const gridx = (width - (tileHeight * tileSize)) / 2;
const gridy = height - (tileHeight * tileSize) - gridx;
//Hier staat op welke hoogte de sprites voor personages worden getekend.
const chary = 450;
//Hier worden vooral de images en de fonts geladen
function preload() {
new GameManager();
lair = gameManager.getImage("lair");
bgimage = gameManager.getImage("background");
font = gameManager.getFont("medieval");
canvaswrap = document.getElementById("canvas-wrap");
}
//Hier wordt de canvas gemaakt en framerate gezet
function setup() {
//Hier wordt de canvas gemaakt
let canvas = createCanvas(width, height);
canvas.parent(canvaswrap);
frameRate(fr);
}
Bronnen¶
Propedeuse, T. (z.d.-a). Naamgeving - Knowledgebase. https://knowledgebase.hbo-ict-hva.nl/1_beroepstaken/software/realiseren/code_conventies/naamgeving/0_naamgeving/;
JavaScript comments. (z.d.). https://www.w3schools.com/js/js_comments.asp;
Propedeuse, T. (z.d.). Code Layout - Knowledgebase. https://knowledgebase.hbo-ict-hva.nl/1_beroepstaken/software/realiseren/code_conventies/code_layout/;
Propedeuse, T. (z.d.-b). Magic Numbers - Knowledgebase. https://knowledgebase.hbo-ict-hva.nl/1_beroepstaken/software/realiseren/code_conventies/magic_numbers/;
Google TypeScript Style Guide. (z.d.). https://google.github.io/styleguide/tsguide.html;
Google JavaScript Style Guide. (z.d.). https://google.github.io/styleguide/jsguide.html;
Last update:
January 25, 2024