Skip to content

Commit

Permalink
finished main game logic, add failed matching handling
Browse files Browse the repository at this point in the history
  • Loading branch information
@szymonSys
szymonSys committed Aug 30, 2019
1 parent 51afb48 commit eba022c
Show file tree
Hide file tree
Showing 5 changed files with 108 additions and 59 deletions.
4 changes: 1 addition & 3 deletions Controller.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,4 @@ class Controller {
addListener(elem, callback, eventType = "click", binded = this) {
elem.addEventListener(eventType, callback.bind(binded));
}
}

const controller = new Controller()
}
146 changes: 96 additions & 50 deletions Game.js
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,16 @@
// TODO(?): bazowa klasa Game z podstawowymi metodami i właściwościami, z której dziedziczy klasa MemoryGame i rozszerza się o metody bardziej specyficzne dla tej konkretnej gry !!!
class Game {
constructor(username, difficulty) {
this._makeAvailableValues = (from, to) => {
const valuesTab = []
const valuesTab = [];
let currentCodeValue = from.charCodeAt();
const toCodeValue = to.charCodeAt();
for (currentCodeValue; currentCodeValue <= toCodeValue; currentCodeValue++) {
for (
currentCodeValue; currentCodeValue <= toCodeValue; currentCodeValue++
) {
valuesTab.push(currentCodeValue);
}
return [...String.fromCharCode(...valuesTab)];
}
};
const _availableValues = this._makeAvailableValues("A", "Z");
this.getAvailableValues = () => _availableValues;

Expand All @@ -25,15 +26,15 @@ class Game {
}

set stats(stats) {
return this._stats = stats;
return (this._stats = stats);
}

get numberOfSquares() {
return this._numberOfSquares;
}

set numberOfSquares(numberOfSquares) {
return this._numberOfSquares = numberOfSquares;
return (this._numberOfSquares = numberOfSquares);
}

get numberOfMatchedSqueres() {
Expand All @@ -50,29 +51,29 @@ class Game {

set gameState(state) {
if (
typeof state !== "string" || (
state !== "ongoing" &&
typeof state !== "string" ||
(state !== "ongoing" &&
state !== "stopped" &&
state !== "init" &&
state !== "inactive" &&
state !== "failed" &&
state !== "win")
)
throw new Error(
'incorect value of parameter'
);
throw new Error("incorect value of parameter");
return (this._gameState = state);
}

_generateNumberOfSquares(difficulty) {
if (difficulty === "easy") return this.numberOfSquares = 24;
if (difficulty === "normal") return this.numberOfSquares = 36;
if (difficulty === "hard") return this.numberOfSquares = 48;
if (difficulty === "easy") return (this.numberOfSquares = 24);
if (difficulty === "normal") return (this.numberOfSquares = 36);
if (difficulty === "hard") return (this.numberOfSquares = 48);
this.stats.difficulty = "normal";
return this.numberOfSquares = 36;
return (this.numberOfSquares = 36);
}

_getRandomValue(values) {
if (!values.length || !(this.getAvailableValues() instanceof Array)) throw new Error("wrong type of available values");
if (!values.length || !(this.getAvailableValues() instanceof Array))
throw new Error("wrong type of available values");
return values[Math.floor(Math.random() * values.length)];
}

Expand All @@ -81,18 +82,23 @@ class Game {
}

_makeAvailablePositions() {
const availablePositions = []
const availablePositions = [];
let currentIndex = 0;
while (currentIndex < this.numberOfSquares) {
availablePositions.push(currentIndex);
currentIndex++;
}
if (currentIndex !== availablePositions.length || availablePositions.length !== this.numberOfSquares) throw new Error('Incorrect initialization of Available Positions')
if (
currentIndex !== availablePositions.length ||
availablePositions.length !== this.numberOfSquares
)
throw new Error("Incorrect initialization of Available Positions");
return availablePositions;
}

_getRandom(available) {
if (!available.length || !(available instanceof Array)) throw new Error("wrong type of available");
if (!available.length || !(available instanceof Array))
throw new Error("wrong type of available");
return available[Math.floor(Math.random() * available.length)];
}

Expand All @@ -102,7 +108,8 @@ class Game {

_sortSquaresByOrder(tab) {
tab.sort((a, b) => {
if (!(a instanceof Square && b instanceof Square)) throw new Error('Element of Array has not require type');
if (!(a instanceof Square && b instanceof Square))
throw new Error("Element of Array has not require type");
return a.order - b.order;
});
}
Expand All @@ -117,12 +124,14 @@ class Game {
}

setSquare(index, newSquare) {
if (!(newSquare instanceof Square)) throw new Error('new square must be instance of Square class!');
return this.squares[index] = newSquare;
if (!(newSquare instanceof Square))
throw new Error("new square must be instance of Square class!");
return (this.squares[index] = newSquare);
}

addSquare(newSquare) {
if (!(newSquare instanceof Square)) throw new Error('new square must be instance of Square class!');
if (!(newSquare instanceof Square))
throw new Error("new square must be instance of Square class!");
this.squares.push(newSquare);
return newSquare;
}
Expand All @@ -133,15 +142,19 @@ class Game {

makeMatch() {
this._numberOfMatchedSqueres += 2;
if (this.checkIfWin()) this.gameState = 'win';
if (this.checkIfWin()) this.gameState = "win";
}

resetMatches() {
return this._numberOfMatchedSqueres = 0;
return (this._numberOfMatchedSqueres = 0);
}

initRandomizedSquares() {
if (!this.getAvailableValues() || !(this.getAvailableValues() instanceof Array)) throw new Error("wrong type of available values");
if (
!this.getAvailableValues() ||
!(this.getAvailableValues() instanceof Array)
)
throw new Error("wrong type of available values");

if (this.squares.length) this.squares.length = 0;

Expand All @@ -152,11 +165,17 @@ class Game {
const randomValue = this._getRandom(values);
let randomPosition = this._getRandom(availablePositions);
const sqr = this.addSquare(new Square(randomValue, randomPosition));
this._removeAscribed(availablePositions, availablePositions.indexOf(randomPosition));
this._removeAscribed(
availablePositions,
availablePositions.indexOf(randomPosition)
);
randomPosition = this._getRandom(availablePositions);
this.addSquare(new Square(randomValue, randomPosition, sqr));
this._removeAscribed(values, values.indexOf(randomValue));
this._removeAscribed(availablePositions, availablePositions.indexOf(randomPosition));
this._removeAscribed(
availablePositions,
availablePositions.indexOf(randomPosition)
);
}

this._sortSquaresByOrder(this.squares);
Expand All @@ -167,69 +186,96 @@ class Game {
_mainGameAction() {
const prev = {
active: null,
activeSquare: null
activeSquare: null,
state: false
};
return e => {
if (!this.getSquare(e.target.dataset.order).isMatched) {
if (!(this.getSquare(e.target.dataset.order).isMatched || this.gameState === 'failed')) {
this.stats.updateActionsCounter();
if (prev.active === null) {
if (prev.active === null || prev.state === false) {
prev.active = e.target;
prev.activeSquare = this.squares[prev.active.dataset.order];
prev.activeSquare = this.getSquare(prev.active.dataset.order);
prev.activeSquare.changeActivity();
prev.active.textContent = prev.activeSquare.value;
prev.active.style.backgroundColor = prev.activeSquare.color;
prev.state = true;
return;
}


const active = e.target;
const activeSquere = this.getSquare(active.dataset.order);
const activeSquare = this.getSquare(active.dataset.order);

active.textContent = activeSquare.value;

if (activeSquare.makeMatching(prev.activeSquare)) {
this.makeMatch()
active.style.backgroundColor = activeSquare.getMatchedColor();
prev.active.style.backgroundColor = prev.activeSquare.getMatchedColor();
} else {
this.gameState = 'failed';
active.style.backgroundColor = activeSquare.getFailedColor();
prev.active.style.backgroundColor = prev.activeSquare.getFailedColor();
}

if (this.gameState === 'failed') {
setTimeout(() => {
active.style.backgroundColor = activeSquare.getPassiveColor();
prev.active.style.backgroundColor = activeSquare.getPassiveColor();
prev.active.textContent = "";
active.textContent = "";

this.gameState = 'ongoing';
}, 500)
}

if (activeSquere.makeMatching(prev.activeSquare)) this.makeMatch();
active.style.backgroundColor = activeSquere.color;
prev.active.style.backgroundColor = activeSquere.color;
prev.active = null;
prev.activeSquare = null;
if (this.gameState === 'ongoing') {
prev.active = null;
prev.activeSquare = null;
}

// prev.active = active;
// prev.activeSquare = activeSquare;
prev.state = false;
// active = prev.active;
// activeSquere = prev.activeSquare;
}
};
}

_gameEventHandler = this._mainGameAction();

initGame(grid, timer, counter = null) {
console.log(this)
if (this.gameState === "ongoing" || this.gameState === "stopped") this.resetGame(grid, timer, counter)
if (this.gameState === "ongoing" || this.gameState === "stopped")
this.resetGame(grid, timer, counter);
this.gameState = "init";
grid.root.className = `game-grid ${this.stats.difficulty.toString()}`;
grid.render(this.initRandomizedSquares());

}

startGame(grid, timer) {
if (!(this.gameState === "init" || this.gameState === "stopped")) return;
this.gameState = "ongoing";
grid.root.addEventListener('click', this._gameEventHandler);
grid.root.addEventListener("click", this._gameEventHandler);
this.stats.startTimer(timer);
}

resetGame(grid, timer, counter) {
this.gameState = "inactive";
grid.root.removeEventListener('click', this._gameEventHandler);
grid.root.removeEventListener("click", this._gameEventHandler);
this.stats.resetTimer(timer);
this.stats.resetActionsCounter(counter);
this.resetMatches();
}

stopGame(grid) {
this.gameState = "stopped";
grid.root.removeEventListener('click', this._gameEventHandler);
grid.root.removeEventListener("click", this._gameEventHandler);
this.stats.stopTimer();
}

checkIfWin() {
// return this.numberOfMatchedSqueres === 2 ? true : false;
return this.numberOfMatchedSqueres === this.numberOfSquares ? true : false;
}
}

// const game = new Game("Szymon", "hard");
// const grid = new Grid("grid");
// game.initGame(grid);
// game.startGame(grid);
}
2 changes: 1 addition & 1 deletion Grid.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ class Grid {

renderSquare(wrapper, square, index) {
const elem = document.createElement('div');
elem.textContent = square.value;
// elem.textContent = square.value;
elem.id = `sq-${index + 1}`;
elem.classList.add('game-square');
elem.dataset.value = square.value;
Expand Down
14 changes: 9 additions & 5 deletions Square.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,14 @@ class Square {
const _COLORS = {
passive: "#CCCCCC",
active: "#1ED760",
matched: "#4169E1"
matched: "#4169E1",
failed: "#ff0000"
};

this.getPassiveColor = () => _COLORS.passive;
this.getActiveColor = () => _COLORS.active;
this.getMatchedColor = () => _COLORS.matched;
this.getFailedColor = () => _COLORS.failed;

this._value = value;
this._order = order;
Expand Down Expand Up @@ -65,8 +67,6 @@ class Square {
return (this._isActive = !this._isActive);
}

// Może zrobić osobną klase statyczną z metodami takimi jak: sprawdzanie dopasowania, nadawanie nasłuchiwania itp?

checkMatching(square) {
if (square.isActive) {
square.changeActivity();
Expand All @@ -82,8 +82,12 @@ class Square {
this.partner.color = this.getMatchedColor();
return true;
} else {
this.color = this.getPassiveColor();
square.color = this.getPassiveColor();
this.color = this.getFailedColor();
square.color = this.getFailedColor();
setTimeout(() => {
this.color = this.getPassiveColor();
square.color = this.getPassiveColor();
}, 1000)
return false;
}
}
Expand Down
1 change: 1 addition & 0 deletions main.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
const controller = new Controller()

0 comments on commit eba022c

Please sign in to comment.