From 9e889152a671300d3c073403ae6a47528de48053 Mon Sep 17 00:00:00 2001 From: Anastasia Date: Thu, 19 Dec 2019 19:51:01 +0200 Subject: [PATCH 1/7] cells --- .prettierrc | 3 +++ index.html | 8 ++++++++ models/battleground.js | 15 ++++++++++++++- script.js | 16 ++++++++++++++-- style.css | 23 +++++++++++++++++++++++ utils/dom.js | 13 +++++++++++++ 6 files changed, 75 insertions(+), 3 deletions(-) create mode 100644 .prettierrc create mode 100644 style.css create mode 100644 utils/dom.js diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..544b7b4 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,3 @@ +{ + +} \ No newline at end of file diff --git a/index.html b/index.html index 7203cb1..b93cd28 100644 --- a/index.html +++ b/index.html @@ -5,9 +5,16 @@ Game + + + + + + + @@ -20,6 +27,7 @@ + diff --git a/models/battleground.js b/models/battleground.js index 05002ec..58c356d 100644 --- a/models/battleground.js +++ b/models/battleground.js @@ -1,5 +1,7 @@ var BattleGround = (function() { - function BattleGround(size, amountOfMonsters) { + function BattleGround(element, size, amountOfMonsters) { + this.element = element; + this.size = size; this.amountOfMonsters = amountOfMonsters || size / 2; this.area = new Array(size).fill(1).map(function() { return new Grass(); @@ -16,8 +18,19 @@ var BattleGround = (function() { random(0, monstersArr.length) ](random(1, 3)); }); + this.render(); }; + BattleGround.prototype.render = function() { + var ul = document.querySelector('.ul'); + + for (var i = 1; i < this.size; i++) { + var li = document.createElement('li') + li.innerHTML + ul.append(li) + } +}; + BattleGround.prototype.addCharacter = function(character) { this.area[0] = character; } diff --git a/script.js b/script.js index 095ea28..c78dbe6 100644 --- a/script.js +++ b/script.js @@ -1,6 +1,18 @@ -var bg = new BattleGround(30); +var bg = new BattleGround(document.getElementsByClassName('ul'), 30); bg.fill([Dragon, CrocoTurtle, Monkey, Snake, MonsterBear]); bg.addCharacter(new Character()); -console.log(bg); + +// BattleGround.prototype.render = function() { +// var ul = document.querySelector('.ul'); + +// for (var i = 1; i < this.area.length; i++) { +// var li = document.createElement('li') +// li.innerHTML +// ul.append(li) +// } +// }; + + + diff --git a/style.css b/style.css new file mode 100644 index 0000000..03da81a --- /dev/null +++ b/style.css @@ -0,0 +1,23 @@ +.ul { + padding: 0; + display: flex; + align-items: center; + align-content: center; + justify-content: center; +} + +.ul li { + list-style-type: none; + width: 70px; + height: 30px; + margin: 5px; + align-self: baseline; + border: 1px solid #8B0000; + padding: 5px; +} + +.ul li:hover { + cursor: pointer; + transform: scale(1.2); + box-shadow: inset 0 0 0 1px #B22222; +} \ No newline at end of file diff --git a/utils/dom.js b/utils/dom.js new file mode 100644 index 0000000..14bcfb6 --- /dev/null +++ b/utils/dom.js @@ -0,0 +1,13 @@ +function consoleNodesRecursive(root) { + root.childNodes.forEach(function(child){ + if (child.childNodes && child.childNodes.length) { + console.group('element ' + child.tagName) + consoleNodesRecursive(child) + console.groupEnd(); + } else { + var value = child.nodeType !== Node.TEXT_NODE && child.tagName !== 'script' + ? child.nodeValue.trim() || "" + : ""; + } + }); +} \ No newline at end of file From 19d3d18ed16f616d8e0ea42496b736a599a50554 Mon Sep 17 00:00:00 2001 From: Anastasia Date: Thu, 19 Dec 2019 19:59:12 +0200 Subject: [PATCH 2/7] cells --- style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style.css b/style.css index 03da81a..489c7bb 100644 --- a/style.css +++ b/style.css @@ -2,11 +2,11 @@ padding: 0; display: flex; align-items: center; - align-content: center; justify-content: center; } .ul li { + display: flex; list-style-type: none; width: 70px; height: 30px; From dff089fa2e16a7e98e0983b12ef2ef544c07c4ae Mon Sep 17 00:00:00 2001 From: Anastasia Date: Thu, 19 Dec 2019 20:23:56 +0200 Subject: [PATCH 3/7] CELLS --- index.html | 4 ---- utils/dom.js | 18 ------------------ 2 files changed, 22 deletions(-) diff --git a/index.html b/index.html index 3693505..b93cd28 100644 --- a/index.html +++ b/index.html @@ -9,15 +9,11 @@ -<<<<<<< HEAD
    -======= -
    ->>>>>>> master diff --git a/utils/dom.js b/utils/dom.js index b592eb9..34dea5e 100644 --- a/utils/dom.js +++ b/utils/dom.js @@ -1,5 +1,4 @@ function consoleNodesRecursive(root) { -<<<<<<< HEAD root.childNodes.forEach(function(child){ if (child.childNodes && child.childNodes.length) { console.group('element ' + child.tagName) @@ -12,20 +11,3 @@ function consoleNodesRecursive(root) { } }); } -======= - console.dir(root); - root.childNodes.forEach(function(child) { - if (child.childNodes && child.childNodes.length) { - console.group("ELEMENT " + child.tagName); - consoleNodesRecursive(child); - console.groupEnd(); - } else { - var value = - child.nodeType !== Node.TEXT_NODE && child.tagName !== "SCRIPT" - ? child.nodeValue.trim() || "" - : ""; - console.log(child.nodeName, value); - } - }); -} ->>>>>>> master From 2db9fb6b9afd478bf4c8b2c94b9a82538f422590 Mon Sep 17 00:00:00 2001 From: Anastasia Date: Thu, 19 Dec 2019 20:34:04 +0200 Subject: [PATCH 4/7] Cells --- index.html | 3 --- 1 file changed, 3 deletions(-) diff --git a/index.html b/index.html index b93cd28..b4bb802 100644 --- a/index.html +++ b/index.html @@ -10,11 +10,8 @@ -
      - - From b7f7d5aea1c207e77c3facd6f9466ca4e600e1d6 Mon Sep 17 00:00:00 2001 From: Anastasia Date: Thu, 19 Dec 2019 20:48:06 +0200 Subject: [PATCH 5/7] Cells without conflicts --- .prettierrc | 5 ----- models/battleground.js | 1 - 2 files changed, 6 deletions(-) diff --git a/.prettierrc b/.prettierrc index 0a6e1c4..6253224 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,8 +1,3 @@ { -<<<<<<< HEAD - -} -======= "singleQuote": true } ->>>>>>> master diff --git a/models/battleground.js b/models/battleground.js index 1539cda..d988f97 100644 --- a/models/battleground.js +++ b/models/battleground.js @@ -18,7 +18,6 @@ var BattleGround = (function() { random(0, monstersArr.length) ](random(1, 3)); }); - this.render(); }; BattleGround.prototype.render = function() { From 7a93cf5ea9ba158c4bd4d5cb9144fd090e3d8ffd Mon Sep 17 00:00:00 2001 From: Anastasia Date: Mon, 23 Dec 2019 19:45:49 +0200 Subject: [PATCH 6/7] move --- index.html | 4 +- models/battleground.js | 89 ++++++++++++++++++++++++++++++++++++++---- script.js | 25 +++++++++++- style.css | 47 +++++++++++++++++++++- utils/dom.js | 21 +++++----- 5 files changed, 166 insertions(+), 20 deletions(-) diff --git a/index.html b/index.html index b4bb802..d70a2aa 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,9 @@ -
        + + +
        diff --git a/models/battleground.js b/models/battleground.js index f6432b5..b5d87c1 100644 --- a/models/battleground.js +++ b/models/battleground.js @@ -1,3 +1,56 @@ +// var BattleGround = (function() { +// function BattleGround(element, size, amountOfMonsters) { +// this.wrapperElement = null; +// this.cellsElement = null; +// this.controllsElement = null; +// this.element = element; +// this.size = size; +// this.amountOfMonsters = amountOfMonsters || size / 2; +// this.area = new Array(size).fill(1).map(function() { +// return new Grass(); +// }); +// this.render(); +// this.update(); +// } + +// BattleGround.prototype.fill = function(monstersArr) { +// var self = this; +// Array(this.amountOfMonsters) +// .fill(1) +// .forEach(function() { +// self.area[random(1, self.area.length)] = new monstersArr[ +// random(0, monstersArr.length) +// ](random(1, 3)); +// }); + +// this.update(); +// }; + +// BattleGround.prototype.render = function() { +// var ul = document.querySelector('.ul'); + +// this.area.forEach(function(el) { +// ul.append +// }) +// for (var i = 1; i < this.size; i++) { +// var li = document.createElement('li') +// li.innerHTML +// ul.append(li) +// } +// }; + +// BattleGround.prototype.addCharacter = function(character) { +// this.area[0] = character; +// }; + +// return BattleGround; +// })(); + + + + + + var BattleGround = (function() { function BattleGround(element, size, amountOfMonsters) { this.wrapperElement = null; @@ -27,18 +80,38 @@ var BattleGround = (function() { }; BattleGround.prototype.render = function() { - var ul = document.querySelector('.ul'); + this.wrapper = document.createElement('div'); + this.wrapper.classList.add('game__wrapper'); + this.wrapper.innerHTML = + '
        \ +
        \ + '; - for (var i = 1; i < this.size; i++) { - var li = document.createElement('li') - li.innerHTML - ul.append(li) - } -}; + this.cellsElement = this.wrapper.querySelector('.game__cells'); + this.controllsElement = this.wrapper.querySelector('.game__controls'); + this.wrapper.appendChild(this.cellsElement); + this.wrapper.appendChild(this.controllsElement); + this.element.appendChild(this.wrapper); + }; + + BattleGround.prototype.update = function() { + var self = this; + this.cellsElement.innerHTML = ''; + this.area.forEach(function(el) { + var cell = document.createElement('div'); + var cellElement = el.render(); + + cell.classList.add('game__cells__item'); + cell.appendChild(cellElement); + self.cellsElement.appendChild(cell); + }); + }; BattleGround.prototype.addCharacter = function(character) { this.area[0] = character; }; + + return BattleGround; -})(); +})(); \ No newline at end of file diff --git a/script.js b/script.js index c78dbe6..6e48898 100644 --- a/script.js +++ b/script.js @@ -1,8 +1,31 @@ -var bg = new BattleGround(document.getElementsByClassName('ul'), 30); +var bg = new BattleGround(document.getElementById('wrapper'), 30); bg.fill([Dragon, CrocoTurtle, Monkey, Snake, MonsterBear]); bg.addCharacter(new Character()); +var fnc = function(e) { + switch(e.keyCode) { + case 37: + bg.moveCharacterLeft() + console.log('Left'); + break; + case 38: + bg.moveCharacterJump(); + console.log('Up') + break; + case 39: + bg.moveCharacterRight(); + console.log('Right') + break; + case 40: + bg.moveCharacterCrouch(); + console.log('Down') + break; + } +} + +document.addEventListener('keydown', fnc) + // BattleGround.prototype.render = function() { // var ul = document.querySelector('.ul'); diff --git a/style.css b/style.css index 3b50ca4..d2b8a8d 100644 --- a/style.css +++ b/style.css @@ -1,4 +1,4 @@ -.ul { +/* .ul { padding: 0; display: flex; align-items: center; @@ -20,4 +20,49 @@ cursor: pointer; transform: scale(1.2); box-shadow: inset 0 0 0 1px #B22222; +} */ + + + +html, +body, +#wrapper { + width: 100%; + height: 100%; + padding: 0; + margin: 0; +} + +#wrapper { + display: flex; + justify-content: center; + align-items: center; +} + +.game__wrapper { + display: flex; + width: 100%; + height: 100px; + justify-content: center; +} + +.game__cells { + display: flex; + height: 100%; + flex-direction: row; } + +.game__cells .game__cells__item { + display: flex; + width: 30px; + height: 100%; + margin-left: 10px; + border: 1px solid rgb(144, 144, 144); + border-radius: 2px; +} + +.game__cells .game__cells__item > div { + display: flex; + width: 100%; + height: 100%; +} \ No newline at end of file diff --git a/utils/dom.js b/utils/dom.js index 34dea5e..ea473dc 100644 --- a/utils/dom.js +++ b/utils/dom.js @@ -1,13 +1,16 @@ function consoleNodesRecursive(root) { - root.childNodes.forEach(function(child){ - if (child.childNodes && child.childNodes.length) { - console.group('element ' + child.tagName) - consoleNodesRecursive(child) - console.groupEnd(); - } else { - var value = child.nodeType !== Node.TEXT_NODE && child.tagName !== 'script' + console.dir(root); + root.childNodes.forEach(function(child) { + if (child.childNodes && child.childNodes.length) { + console.group("ELEMENT " + child.tagName); + consoleNodesRecursive(child); + console.groupEnd(); + } else { + var value = + child.nodeType !== Node.TEXT_NODE && child.tagName !== "SCRIPT" ? child.nodeValue.trim() || "" : ""; - } + console.log(child.nodeName, value); + } }); -} + } From a3862d4d150b3587bb55e92167e4e8d20c5b72ca Mon Sep 17 00:00:00 2001 From: Anastasia Date: Wed, 8 Jan 2020 12:35:07 +0200 Subject: [PATCH 7/7] Attack --- models/unit.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/models/unit.js b/models/unit.js index 645de0b..b8b819c 100644 --- a/models/unit.js +++ b/models/unit.js @@ -7,6 +7,16 @@ var Unit = (function() { this.maxHealth = this.health = health + modifier; this.level = level; } + + Unit.prototype.attack = function() { + console.log('Attack', this) + } + + + + Unit.prototype.render = function() { + return this.el; + } return Unit; })();