diff --git a/lesson2/hw2.html b/lesson2/hw2.html new file mode 100644 index 0000000..b26c00e --- /dev/null +++ b/lesson2/hw2.html @@ -0,0 +1,175 @@ + + + + + home work 2 + + + + + + \ No newline at end of file diff --git a/lesson3/css/style.css b/lesson3/css/style.css new file mode 100644 index 0000000..8c01bd0 --- /dev/null +++ b/lesson3/css/style.css @@ -0,0 +1,6 @@ +* { + margin: 0 auto; +} +body { + background: white; +} \ No newline at end of file diff --git a/lesson3/index.html b/lesson3/index.html new file mode 100644 index 0000000..9fbb9ad --- /dev/null +++ b/lesson3/index.html @@ -0,0 +1,60 @@ + + + + + + + + + + Minimum Bootstrap HTML Skeleton + + + + + +
+
+ +
+
+
+
+

Задание №1

+

С помощью цикла while вывести все простые числа в промежутке от 0 до 100

+

ответ вывел в сonsole

+ + +
+ +

Задание №2

+

Начиная с этого урока, мы начинаем работать с функционалом интернет-магазина. +Предположим, что у нас есть сущность корзины. Нужно реализовать функционал подсчета +стоимости корзины в зависимости от находящихся в ней товаров. Товары в корзине хранятся в +массиве

+

ответ вывел в сonsole

+ +

Задание №3

+

*Вывести с помощью цикла for числа от 0 до 9, НЕ используя тело цикла. То есть +выглядеть должно вот так: +for(…){// здесь пусто}

+

ответ вывел в сonsole

+ + +
+
+
+ +
+ + + + + + + + + diff --git a/lesson3/js/1.js b/lesson3/js/1.js new file mode 100644 index 0000000..c5b3b8f --- /dev/null +++ b/lesson3/js/1.js @@ -0,0 +1,77 @@ +//создаем массив от 1 до 100 добавляем туда цифру 2 и убираем все четные цифры после 2ойки + +let simpleNumb = []; +let i = 1; + +while (i<100) { + i++; + if (i/2 == 1) { + simpleNumb.push(i) + } +} +let z = 1; +while (z<100) { + z++; + if(z%2 == 0) { + continue; + } + simpleNumb.push(z); +} + +//эту часть я списал... думал сделаю быстро но времени не хватило +let a = 4; +let b = 3; +while (a < 100){ + if (a % b ===0 && simpleNumb.indexOf(a) !== -1){ + simpleNumb.splice(simpleNumb.indexOf(a), 1); + }else { + a++; + } +} + +a = 6; +b = 5; +while (a < 100) { + if (a % b === 0 && simpleNumb.indexOf(a) !== -1) { + simpleNumb.splice(simpleNumb.indexOf(a), 1); + } else { + a++; + } +} + + +a = 8; +b = 7; +while (a < 100) { + if (a % b === 0 && simpleNumb.indexOf(a) !== -1) { + simpleNumb.splice(simpleNumb.indexOf(a), 1); + } else { + a++; + } +} + +console.log("Ответ на 1 задачу: " + simpleNumb); + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/lesson3/js/2.js b/lesson3/js/2.js new file mode 100644 index 0000000..efb3b30 --- /dev/null +++ b/lesson3/js/2.js @@ -0,0 +1,20 @@ + +let films = [ + {"name": "Титаник", "money": 1e5}, + {"name": "Смешарики", "money": 2e5+3e4}, + {"name": "Рапунциль", "money": 2e4+3e3}, + {"name": "Один Дома", "money": 4e5+9e4}, +] + +let filmsMoney = 0; + +function countBasketPrice() { + +for (let s in films) { + filmsMoney +=films[s]["money"]; +} +return filmsMoney; +} + +countBasketPrice(); +console.log("ответ на задачу номер 2: " + filmsMoney); \ No newline at end of file diff --git a/lesson3/js/3.js b/lesson3/js/3.js new file mode 100644 index 0000000..259cb82 --- /dev/null +++ b/lesson3/js/3.js @@ -0,0 +1,5 @@ +let l0op; +console.log("ответ на задачу №3") +for ( l0op = 0; l0op <= 9; l0op++){ + console.log(l0op); +} \ No newline at end of file diff --git a/lesson3/lesson3.7z b/lesson3/lesson3.7z new file mode 100644 index 0000000..164fa4c Binary files /dev/null and b/lesson3/lesson3.7z differ diff --git a/lesson4/README.md b/lesson4/README.md index 8a1487d..32aa93c 100644 --- a/lesson4/README.md +++ b/lesson4/README.md @@ -1,2 +1,10 @@ -# js-base -Репозиторий для практических заданий по курсу "JavaScript, базовый уровень" +js-base +Урок 4 + +1. Написать функцию, преобразующую число в объект. Передавая на вход число от 0 до 999, мы должны получить на выходе объект, в котором в соответствующих свойствах описаны единицы, десятки и сотни. Например, для числа 245 мы должны получить следующий объект: +{‘единицы’: 5, ‘десятки’: 4, ‘сотни’: 2}. +Если число превышает 999, необходимо выдать соответствующее сообщение с помощью console.log и вернуть пустой объект. + +2. Для игры, реализованной на уроке, добавить возможность вывода хода номер n (номер задается пользователем) + +3.*На базе игры, созданной на уроке, реализовать игру «Кто хочет стать миллионером?» diff --git a/lesson4/hw/1.js b/lesson4/hw/1.js new file mode 100644 index 0000000..4d71e6b --- /dev/null +++ b/lesson4/hw/1.js @@ -0,0 +1,34 @@ +console.log("4 урок. Задача №1"); +//создаем функцию возвращающую целое число от 0 до 1000 +function intNumb() { + let x = Math.floor(Math.random()*2e3); + return x; +} +// записываем в переменную случайное число из функции выше, и приводим ее к строке, что бы работал length +let b =String(intNumb()); + +// выводим число +console.log(b); + +//объект где будут хранится разбитые числа числа +let objNumb = {}; + +//функция разбивающая число b +function numbInObj() { + + if (b.length > 3) { + console.log(objNumb + " 4х значное число --> Пустой объект" ) + } + else { + //objNumb.map(numb => numb['сотни'] = b[1]); + + objNumb['сотни'] = +b[0],// привели к числу + + objNumb['десятки'] = +b[1], + objNumb['единицы'] = +b[2], + console.log(objNumb) + } +} + +numbInObj(); + + diff --git a/lesson4/hw/2.js b/lesson4/hw/2.js new file mode 100644 index 0000000..977aaa3 --- /dev/null +++ b/lesson4/hw/2.js @@ -0,0 +1,97 @@ +console.log("4 урок. Задача №2"); +/* +**************GOALKEEPER**************** + ------------------------------------- + | topleft | top | topright | + -------------------------- + | left | center | right | + -------------------------- + | bottomleft | bottom | bottomright | + -------------------------------------- +*/ + +const sectors = [ + 'topleft', + 'top', + 'topright', + 'left', + 'center', + 'right', + 'bottomleft', + 'bottom', + 'bottomright', +]; + +const goalKeeper = { + defendSector: null, + savesToWin: 2, + saves: 0, + init() { + console.log('HERE'); + const sectorNum = Math.trunc(Math.random() * 9); + this.defendSector = sectors[sectorNum]; + console.log(this.defendSector); + }, + checkWin() { + if (this.saves === this.savesToWin) { + console.log('Goalkeeper wins!!!'); + return true; + } + console.log('Goalkeeper need ' + (this.savesToWin - this.saves) + ' more saves'); + return false; + }, +}; + + +/* eslint no-param-reassign: 0 */ +const attacker = { + sectorToAttack: null, + goals: 0, + goalsToWin: 10, + init(sector) { + if (sectors.indexOf(sector) >= 0) { + this.sectorToAttack = sector; + return true; + } + return false; + }, + attack(keeper) { + console.log(keeper.defendSector, this.sectorToAttack); + if (keeper.defendSector === this.sectorToAttack) { + console.log('SAVE!!!'); + keeper.saves++; + return false; + } + console.log('GOAL!!!'); + this.goals++; + return true; + }, + checkWin() { + if (this.goals === this.goalsToWin) { + console.log('Attacker wins!!!'); + return true; + } + console.log('Attacker need ' + (this.goalsToWin - this.goals) + ' more goals'); + return false; + }, +}; + +let keeperWins = false; +let attackerWins = false; +let i = 0; +do { + let currentAttacksector; + do { + currentAttacksector = prompt('Choose sector to attack ( ' + sectors.join(', ') + ' )'); +//создаем переменную i. Считаем в нее удары по воротам + i++; +//Выводим удары по воротам + console.log("Вы ударили по воротам: " + i + " раз." ) + } while (!attacker.init(currentAttacksector)); + + goalKeeper.init(); + attacker.attack(goalKeeper); + + keeperWins = goalKeeper.checkWin(); + attackerWins = attacker.checkWin(); +} while (!keeperWins && !attackerWins); \ No newline at end of file diff --git a/lesson4/hw/index.html b/lesson4/hw/index.html new file mode 100644 index 0000000..6244c17 --- /dev/null +++ b/lesson4/hw/index.html @@ -0,0 +1,54 @@ + + + + + + + + + + Home work 4 + + + + + + + + + +
+

Задача №1

+

Написать функцию, преобразующую число в объект. Передавая на вход число от 0 до 999, мы должны получить на выходе объект, в котором в соответствующих свойствах описаны единицы, десятки и сотни. Например, для числа 245 мы должны получить следующий объект: +{‘единицы’: 5, ‘десятки’: 4, ‘сотни’: 2}. +Если число превышает 999, необходимо выдать соответствующее сообщение с помощью console.log и вернуть пустой объект.

+ + +

Ответ в консоли

+
+ +
+

задача №2

+

+ Для игры, реализованной на уроке, добавить возможность вывода хода номер n (номер задается пользователем) +

+ +
+
+

Задача №3

+

+ 3.*На базе игры, созданной на уроке, реализовать игру «Кто хочет стать миллионером?» +

+
+ + + + + + + + + diff --git a/lesson4/hw/style.css b/lesson4/hw/style.css new file mode 100644 index 0000000..e69de29 diff --git a/lesson4/practice/index.html b/lesson4/practice/index.html new file mode 100644 index 0000000..9b5b0ab --- /dev/null +++ b/lesson4/practice/index.html @@ -0,0 +1,14 @@ + + + + + + Title + + + + + + + + \ No newline at end of file diff --git a/lesson4/practice/script.js b/lesson4/practice/script.js new file mode 100644 index 0000000..7580c14 --- /dev/null +++ b/lesson4/practice/script.js @@ -0,0 +1,92 @@ +/* +**************GOALKEEPER**************** + ------------------------------------- + | topleft | top | topright | + -------------------------- + | left | center | right | + -------------------------- + | bottomleft | bottom | bottomright | + -------------------------------------- +*/ + +const sectors = [ + 'topleft', + 'top', + 'topright', + 'left', + 'center', + 'right', + 'bottomleft', + 'bottom', + 'bottomright', +]; + +const goalKeeper = { + defendSector: null, + savesToWin: 2, + saves: 0, + init() { + console.log('HERE'); + const sectorNum = Math.trunc(Math.random() * 9); + this.defendSector = sectors[sectorNum]; + console.log(this.defendSector); + }, + checkWin() { + if (this.saves === this.savesToWin) { + console.log('Goalkeeper wins!!!'); + return true; + } + console.log('Goalkeeper need ' + (this.savesToWin - this.saves) + ' more saves'); + return false; + }, +}; + + +/* eslint no-param-reassign: 0 */ +const attacker = { + sectorToAttack: null, + goals: 0, + goalsToWin: 10, + init(sector) { + if (sectors.indexOf(sector) >= 0) { + this.sectorToAttack = sector; + return true; + } + return false; + }, + attack(keeper) { + console.log(keeper.defendSector, this.sectorToAttack); + if (keeper.defendSector === this.sectorToAttack) { + console.log('SAVE!!!'); + keeper.saves++; + return false; + } + console.log('GOAL!!!'); + this.goals++; + return true; + }, + checkWin() { + if (this.goals === this.goalsToWin) { + console.log('Attacker wins!!!'); + return true; + } + console.log('Attacker need ' + (this.goalsToWin - this.goals) + ' more goals'); + return false; + }, +}; + +let keeperWins = false; +let attackerWins = false; + +do { + let currentAttacksector; + do { + currentAttacksector = prompt('Choose sector to attack ( ' + sectors.join(', ') + ' )'); + } while (!attacker.init(currentAttacksector)); + + goalKeeper.init(); + attacker.attack(goalKeeper); + + keeperWins = goalKeeper.checkWin(); + attackerWins = attacker.checkWin(); +} while (!keeperWins && !attackerWins); \ No newline at end of file diff --git a/lesson4/webinar/index.html b/lesson4/webinar/index.html new file mode 100644 index 0000000..a7a119f --- /dev/null +++ b/lesson4/webinar/index.html @@ -0,0 +1,11 @@ + + + + + Lesson4 - webinar + + + + + + \ No newline at end of file diff --git a/lesson4/webinar/lesson4.js b/lesson4/webinar/lesson4.js new file mode 100644 index 0000000..47496d3 --- /dev/null +++ b/lesson4/webinar/lesson4.js @@ -0,0 +1,33 @@ +const aquarium = { + width:100, + height:150, + isClean:true, + dinnerCount:0, + fishes: [ + 'fish1', + 'fish2', + 'fish3', + 'fish4', +], + foodToFishes() { + if(this.dinnerCount===5) { //this - значит в этом obj + console.log("No more Food!!!"); + return; + } + this.dinnerCount++; + console.log(this.dinnerCount); + } + + +} + +aquarium.foodToFishes(); +console.log(aquarium.fishes); + +const result = delete aquarium.fishes; +console.log(result); +console.log(aquarium.fishes); + +for (const propertyName in aquarium) { + console.log(propertyName); +} \ No newline at end of file diff --git a/lesson4/webinar/practice lesson4 b/lesson4/webinar/practice lesson4 new file mode 100644 index 0000000..7580c14 --- /dev/null +++ b/lesson4/webinar/practice lesson4 @@ -0,0 +1,92 @@ +/* +**************GOALKEEPER**************** + ------------------------------------- + | topleft | top | topright | + -------------------------- + | left | center | right | + -------------------------- + | bottomleft | bottom | bottomright | + -------------------------------------- +*/ + +const sectors = [ + 'topleft', + 'top', + 'topright', + 'left', + 'center', + 'right', + 'bottomleft', + 'bottom', + 'bottomright', +]; + +const goalKeeper = { + defendSector: null, + savesToWin: 2, + saves: 0, + init() { + console.log('HERE'); + const sectorNum = Math.trunc(Math.random() * 9); + this.defendSector = sectors[sectorNum]; + console.log(this.defendSector); + }, + checkWin() { + if (this.saves === this.savesToWin) { + console.log('Goalkeeper wins!!!'); + return true; + } + console.log('Goalkeeper need ' + (this.savesToWin - this.saves) + ' more saves'); + return false; + }, +}; + + +/* eslint no-param-reassign: 0 */ +const attacker = { + sectorToAttack: null, + goals: 0, + goalsToWin: 10, + init(sector) { + if (sectors.indexOf(sector) >= 0) { + this.sectorToAttack = sector; + return true; + } + return false; + }, + attack(keeper) { + console.log(keeper.defendSector, this.sectorToAttack); + if (keeper.defendSector === this.sectorToAttack) { + console.log('SAVE!!!'); + keeper.saves++; + return false; + } + console.log('GOAL!!!'); + this.goals++; + return true; + }, + checkWin() { + if (this.goals === this.goalsToWin) { + console.log('Attacker wins!!!'); + return true; + } + console.log('Attacker need ' + (this.goalsToWin - this.goals) + ' more goals'); + return false; + }, +}; + +let keeperWins = false; +let attackerWins = false; + +do { + let currentAttacksector; + do { + currentAttacksector = prompt('Choose sector to attack ( ' + sectors.join(', ') + ' )'); + } while (!attacker.init(currentAttacksector)); + + goalKeeper.init(); + attacker.attack(goalKeeper); + + keeperWins = goalKeeper.checkWin(); + attackerWins = attacker.checkWin(); +} while (!keeperWins && !attackerWins); \ No newline at end of file diff --git a/lesson4/webinar/practice lesson4.js b/lesson4/webinar/practice lesson4.js new file mode 100644 index 0000000..7580c14 --- /dev/null +++ b/lesson4/webinar/practice lesson4.js @@ -0,0 +1,92 @@ +/* +**************GOALKEEPER**************** + ------------------------------------- + | topleft | top | topright | + -------------------------- + | left | center | right | + -------------------------- + | bottomleft | bottom | bottomright | + -------------------------------------- +*/ + +const sectors = [ + 'topleft', + 'top', + 'topright', + 'left', + 'center', + 'right', + 'bottomleft', + 'bottom', + 'bottomright', +]; + +const goalKeeper = { + defendSector: null, + savesToWin: 2, + saves: 0, + init() { + console.log('HERE'); + const sectorNum = Math.trunc(Math.random() * 9); + this.defendSector = sectors[sectorNum]; + console.log(this.defendSector); + }, + checkWin() { + if (this.saves === this.savesToWin) { + console.log('Goalkeeper wins!!!'); + return true; + } + console.log('Goalkeeper need ' + (this.savesToWin - this.saves) + ' more saves'); + return false; + }, +}; + + +/* eslint no-param-reassign: 0 */ +const attacker = { + sectorToAttack: null, + goals: 0, + goalsToWin: 10, + init(sector) { + if (sectors.indexOf(sector) >= 0) { + this.sectorToAttack = sector; + return true; + } + return false; + }, + attack(keeper) { + console.log(keeper.defendSector, this.sectorToAttack); + if (keeper.defendSector === this.sectorToAttack) { + console.log('SAVE!!!'); + keeper.saves++; + return false; + } + console.log('GOAL!!!'); + this.goals++; + return true; + }, + checkWin() { + if (this.goals === this.goalsToWin) { + console.log('Attacker wins!!!'); + return true; + } + console.log('Attacker need ' + (this.goalsToWin - this.goals) + ' more goals'); + return false; + }, +}; + +let keeperWins = false; +let attackerWins = false; + +do { + let currentAttacksector; + do { + currentAttacksector = prompt('Choose sector to attack ( ' + sectors.join(', ') + ' )'); + } while (!attacker.init(currentAttacksector)); + + goalKeeper.init(); + attacker.attack(goalKeeper); + + keeperWins = goalKeeper.checkWin(); + attackerWins = attacker.checkWin(); +} while (!keeperWins && !attackerWins); \ No newline at end of file diff --git a/lesson5/hw/img/ferzBlack.png b/lesson5/hw/img/ferzBlack.png new file mode 100644 index 0000000..609f01f Binary files /dev/null and b/lesson5/hw/img/ferzBlack.png differ diff --git a/lesson5/hw/img/ferzWhite.png b/lesson5/hw/img/ferzWhite.png new file mode 100644 index 0000000..9597904 Binary files /dev/null and b/lesson5/hw/img/ferzWhite.png differ diff --git a/lesson5/hw/img/horseBlack.png b/lesson5/hw/img/horseBlack.png new file mode 100644 index 0000000..3fa0dbf Binary files /dev/null and b/lesson5/hw/img/horseBlack.png differ diff --git a/lesson5/hw/img/horseWhite.png b/lesson5/hw/img/horseWhite.png new file mode 100644 index 0000000..53e3585 Binary files /dev/null and b/lesson5/hw/img/horseWhite.png differ diff --git a/lesson5/hw/img/kingBlack.png b/lesson5/hw/img/kingBlack.png new file mode 100644 index 0000000..941eeb1 Binary files /dev/null and b/lesson5/hw/img/kingBlack.png differ diff --git a/lesson5/hw/img/kingWhite.png b/lesson5/hw/img/kingWhite.png new file mode 100644 index 0000000..a65e823 Binary files /dev/null and b/lesson5/hw/img/kingWhite.png differ diff --git a/lesson5/hw/img/officerBlack.png b/lesson5/hw/img/officerBlack.png new file mode 100644 index 0000000..a394e82 Binary files /dev/null and b/lesson5/hw/img/officerBlack.png differ diff --git a/lesson5/hw/img/officerWhite.png b/lesson5/hw/img/officerWhite.png new file mode 100644 index 0000000..0fd0919 Binary files /dev/null and b/lesson5/hw/img/officerWhite.png differ diff --git a/lesson5/hw/img/peshkaBlack.png b/lesson5/hw/img/peshkaBlack.png new file mode 100644 index 0000000..d5dbf37 Binary files /dev/null and b/lesson5/hw/img/peshkaBlack.png differ diff --git a/lesson5/hw/img/peshkaWhite.png b/lesson5/hw/img/peshkaWhite.png new file mode 100644 index 0000000..cdf0061 Binary files /dev/null and b/lesson5/hw/img/peshkaWhite.png differ diff --git a/lesson5/hw/img/turaBlack.png b/lesson5/hw/img/turaBlack.png new file mode 100644 index 0000000..5b8ef47 Binary files /dev/null and b/lesson5/hw/img/turaBlack.png differ diff --git a/lesson5/hw/img/turaWhite.png b/lesson5/hw/img/turaWhite.png new file mode 100644 index 0000000..ead3cb2 Binary files /dev/null and b/lesson5/hw/img/turaWhite.png differ diff --git a/lesson5/hw/index.html b/lesson5/hw/index.html new file mode 100644 index 0000000..d3c8de1 --- /dev/null +++ b/lesson5/hw/index.html @@ -0,0 +1,142 @@ + + + + + Chess on js + + + + + +
+

Шахматная доска с фигурами на HTML, CSS, JS

+
+
+
+

8

+
+
+
+
+
+
+
+
+
+
+

7

+
+
+
+
+
+
+
+
+
+
+

6

+
+
+
+
+
+
+
+
+
+
+

5

+
+
+
+
+
+
+
+
+
+
+

4

+
+
+
+
+
+
+
+
+
+
+

3

+
+
+
+
+
+
+
+
+
+
+

2

+
+
+
+
+
+
+
+
+
+
+

1

+
+
+
+
+
+
+
+
+ +
+
+

  

+
+

A

+
+
+

B

+
+
+

C

+
+
+

D

+
+
+

E

+
+
+

F

+
+
+

G

+
+
+

H

+
+
+
+
+
+ + + \ No newline at end of file diff --git a/lesson5/hw/script.js b/lesson5/hw/script.js new file mode 100644 index 0000000..cf871ff --- /dev/null +++ b/lesson5/hw/script.js @@ -0,0 +1,58 @@ +//белые пешки +document.getElementById("a2").style.backgroundImage = "url(img/peshkaWhite.png)"; +document.getElementById("b2").style.backgroundImage = "url(img/peshkaWhite.png)"; +document.getElementById("c2").style.backgroundImage = "url(img/peshkaWhite.png)"; +document.getElementById("d2").style.backgroundImage = "url(img/peshkaWhite.png)"; +document.getElementById("e2").style.backgroundImage = "url(img/peshkaWhite.png)"; +document.getElementById("f2").style.backgroundImage = "url(img/peshkaWhite.png)"; +document.getElementById("g2").style.backgroundImage = "url(img/peshkaWhite.png)"; +document.getElementById("h2").style.backgroundImage = "url(img/peshkaWhite.png)"; + +//ладья белые +document.getElementById("a1").style.backgroundImage = "url(img/turaWhite.png)"; +document.getElementById("h1").style.backgroundImage = "url(img/turaWhite.png)"; + +//коняга белая гнедая +document.getElementById("b1").style.backgroundImage = "url(img/horseWhite.png)"; +document.getElementById("g1").style.backgroundImage = "url(img/horseWhite.png)"; + +//белый офицер +document.getElementById("c1").style.backgroundImage = "url(img/officerWhite.png)"; +document.getElementById("f1").style.backgroundImage = "url(img/officerWhite.png)"; + +// белый ферзь +document.getElementById("d1").style.backgroundImage = "url(img/ferzWhite.png)"; + +//король белых +document.getElementById("e1").style.backgroundImage = "url(img/kingWhite.png)"; + +//черные пешки +document.getElementById("a7").style.backgroundImage = "url(img/peshkaBlack.png)"; +document.getElementById("b7").style.backgroundImage = "url(img/peshkaBlack.png)"; +document.getElementById("c7").style.backgroundImage = "url(img/peshkaBlack.png)"; +document.getElementById("d7").style.backgroundImage = "url(img/peshkaBlack.png)"; +document.getElementById("e7").style.backgroundImage = "url(img/peshkaBlack.png)"; +document.getElementById("f7").style.backgroundImage = "url(img/peshkaBlack.png)"; +document.getElementById("g7").style.backgroundImage = "url(img/peshkaBlack.png)"; +document.getElementById("h7").style.backgroundImage = "url(img/peshkaBlack.png)"; + + +//ладья черная +document.getElementById("a8").style.backgroundImage = "url(img/turaBlack.png)"; +document.getElementById("h8").style.backgroundImage = "url(img/turaBlack.png)"; + +//черный конь +document.getElementById("g8").style.backgroundImage = "url(img/horseBlack.png)" +document.getElementById("b8").style.backgroundImage = "url(img/horseBlack.png)" + +//черный офицер +document.getElementById("c8").style.backgroundImage = "url(img/officerBlack.png)"; +document.getElementById("f8").style.backgroundImage = "url(img/officerBlack.png)"; + +//черная ферзя +document.getElementById("d8").style.backgroundImage = "url(img/ferzBlack.png)"; + +//Король черных +document.getElementById("e8").style.backgroundImage = "url(img/kingBlack.png)"; + + diff --git a/lesson5/hw/style.css b/lesson5/hw/style.css new file mode 100644 index 0000000..f48624a --- /dev/null +++ b/lesson5/hw/style.css @@ -0,0 +1,52 @@ +#wrapper { + margin: 0 auto; + border: 1px solid #ccc; + +} +div.chessdeck { + margin: 5px 20px 5px 20px; + border: 1px solid black; + padding: 45px 15px 5px 30px; + width: 621px; + height: 621px; + border-radius: 10px; +} + +.cell { + width: 69px; + height: 69px; + border: 1px solid black; +} +.row { + display: flex; + justify-content: flex-start; + +} + +.h0 { + margin-right: 10px; + color: #808080; +} + +.letter { + width: 71px; + height: 71px; + border-top: 1px solid black; + } +.letter h3 { + padding-left: 25px; + margin-top: 5px; + color: #808080; +} +.borderTop { + border-top: 2px solid black; +} +.borderRight { + border-right: 2px solid black; +} +.borderLeft { + border-left: 2px solid black; +} +.black { + background: #808080; +} \ No newline at end of file diff --git a/lesson5/practice/index.html b/lesson5/practice/index.html new file mode 100644 index 0000000..c232d79 --- /dev/null +++ b/lesson5/practice/index.html @@ -0,0 +1,44 @@ + + + + + + GOALKEEPER + + + + + + +
+
+

Goalkeeper

+
+
+
+
+
1
+
2
+
3
+
+ +
+
4
+
5
+
6
+
+ +
+
7
+
8
+
9
+
+
+
+
+ + +
+ + + \ No newline at end of file diff --git a/lesson5/practice/script.js b/lesson5/practice/script.js new file mode 100644 index 0000000..f222224 --- /dev/null +++ b/lesson5/practice/script.js @@ -0,0 +1,108 @@ +/* + +**************GOALKEEPER**************** + + ------------------------------------- + | topleft | top | topright | + -------------------------- + | left | center | right | + -------------------------- + | bottomleft | bottom | bottomright | + -------------------------------------- +*/ + +const sectors = [ + 'topleft', + 'top', + 'topright', + 'left', + 'center', + 'right', + 'bottomleft', + 'bottom', + 'bottomright', +]; + +function logAction(actionText) { + document.getElementById('logger').innerHTML += '
* ' + actionText + '
'; +} + +const goalKeeper = { + defendSector: null, + savesToWin: 2, + saves: 0, + init() { + const sectorNum = Math.trunc(Math.random() * 9); + this.defendSector = sectors[sectorNum]; // left + const sectorsElem = document.getElementsByClassName('sector'); + for (let i = 0; i < sectorsElem.length; i++) { + sectorsElem[i].style.backgroundColor = '#fff'; + } + document.getElementById('sector-' + sectors[sectorNum]).style.backgroundColor = 'green'; + }, + checkWin() { + if (this.saves === this.savesToWin) { + logAction('Goalkeeper wins!!!'); + return true; + } + logAction('Goalkeeper need ' + (this.savesToWin - this.saves) + ' more saves'); + return false; + }, +}; + + +/* eslint no-param-reassign: 0 */ +const attacker = { + sectorToAttack: null, + goals: 0, + goalsToWin: 10, + init(sector) { // top + if (sectors.indexOf(sector) >= 0) { + this.sectorToAttack = sector; + const sectorsElem = document.getElementsByClassName('sector'); + for (let i = 0; i < sectorsElem.length; i++) { + sectorsElem[i].style.border = '2px solid #444'; + } + document.getElementById('sector-' + sector).style.border = '2px solid red'; + return true; + } + return false; + }, + attack(keeper) { + if (keeper.defendSector === this.sectorToAttack) { + logAction('SAVE!!!'); + keeper.saves++; + return false; + } + logAction('GOAL!!!'); + this.goals++; + return true; + }, + checkWin() { + if (this.goals === this.goalsToWin) { + logAction('Attacker wins!!!'); + return true; + } + logAction('Attacker need ' + (this.goalsToWin - this.goals) + ' more goals'); + return false; + }, +}; + +let keeperWins = false; +let attackerWins = false; + +function round(attackSector) { + attacker.init(attackSector); + goalKeeper.init(); + attacker.attack(goalKeeper); + + keeperWins = goalKeeper.checkWin(); + attackerWins = attacker.checkWin(); + if (keeperWins || attackerWins) { // reset + goalKeeper.saves = 0; + attacker.goals = 0; + keeperWins = false; + attackerWins = false; + document.getElementById('logger').innerHTML = '
New game started
'; + } +} \ No newline at end of file diff --git a/lesson5/practice/style.css b/lesson5/practice/style.css new file mode 100644 index 0000000..73a97dc --- /dev/null +++ b/lesson5/practice/style.css @@ -0,0 +1,52 @@ +div.main { + width: 1000px; + min-height: 100px; + border: 1px solid #444; + margin: 0 auto; + padding: 5px; +} + +div.header { + background-color: antiquewhite; +} + +div.content { + display: flex; + justify-content: flex-start; + +} + +div.content div.column { + border: 1px solid #444; + margin: 5px; + min-height: 10px; +} + +div.leftColumn { + width: 600px; +} + +div.row { + display: flex; + justify-content: flex-start; +} + +div.leftColumn div.sector { + width: 200px; + height: 150px; + border: 2px solid #444; + font-size: 30px; + text-align: center; +} + +div.rightColumn { + width: 300px; + height: 450px; + padding: 5px; + overflow-y: scroll; +} + +div.rightColumn div { + margin-top: 5px; + border-bottom: '1px solid grey'; +} \ No newline at end of file diff --git a/lesson6/img/big/1.jpeg b/lesson6/img/big/1.jpeg new file mode 100644 index 0000000..04bd51e Binary files /dev/null and b/lesson6/img/big/1.jpeg differ diff --git a/lesson6/img/big/2.jpeg b/lesson6/img/big/2.jpeg new file mode 100644 index 0000000..cad284a Binary files /dev/null and b/lesson6/img/big/2.jpeg differ diff --git a/lesson6/img/big/3.jpg b/lesson6/img/big/3.jpg new file mode 100644 index 0000000..e7b3639 Binary files /dev/null and b/lesson6/img/big/3.jpg differ diff --git a/lesson6/img/small/1.jpg b/lesson6/img/small/1.jpg new file mode 100644 index 0000000..0ececf0 Binary files /dev/null and b/lesson6/img/small/1.jpg differ diff --git a/lesson6/img/small/2.jpg b/lesson6/img/small/2.jpg new file mode 100644 index 0000000..e8b17b6 Binary files /dev/null and b/lesson6/img/small/2.jpg differ diff --git a/lesson6/img/small/3.jpg b/lesson6/img/small/3.jpg new file mode 100644 index 0000000..e85c566 Binary files /dev/null and b/lesson6/img/small/3.jpg differ diff --git a/lesson6/img/small/lesson6.zip b/lesson6/img/small/lesson6.zip new file mode 100644 index 0000000..6bc983f Binary files /dev/null and b/lesson6/img/small/lesson6.zip differ diff --git a/lesson6/index.html b/lesson6/index.html new file mode 100644 index 0000000..9dfa7fc --- /dev/null +++ b/lesson6/index.html @@ -0,0 +1,23 @@ + + + + Lesson 6 + + + + + + + + +
+ +
+ + + +
+ + + + diff --git a/lesson6/practice/index.html b/lesson6/practice/index.html new file mode 100644 index 0000000..5759d97 --- /dev/null +++ b/lesson6/practice/index.html @@ -0,0 +1,22 @@ + + + + + + Tic tac toe + + Ходит игрок X +
+
+
+
+
+
+
+
+
+
+
+ + + \ No newline at end of file diff --git a/lesson6/practice/main.js b/lesson6/practice/main.js new file mode 100644 index 0000000..294fa7c --- /dev/null +++ b/lesson6/practice/main.js @@ -0,0 +1,91 @@ +const ceil = document.getElementsByClassName('game-item'); +const reset = document.getElementById('reset-game'); +const message = document.getElementById('message'); +let player = 'X'; +let stepCount = 0; +const winCombinations = [ + [1, 2, 3], + [1, 4, 7], + [1, 5, 9], + [2, 5, 8], + [3, 6, 9], + [3, 5, 7], + [4, 5, 6], + [7, 8, 9], +]; +let dataX = []; +let dataO = []; + +function changePlayer() { + player === 'X' ? (player = 'O') : (player = 'X'); +} + +function checkWin(arr, number) { + for (let w = 0, wLen = winCombinations.length; w < wLen; w++) { + const someWinArr = winCombinations[w]; + let count = 0; + if (someWinArr.indexOf(number) !== -1) { + for (let k = 0, kLen = someWinArr.length; k < kLen; k++) { + if (arr.indexOf(someWinArr[k]) !== -1) { + count++; + if (count === 3) { + return true; + } + } + } + count = 0; + } + } + return false; +} + +function currentStep() { + const num = +this.getAttribute('data-ceil'); + if (!this.textContent) { + this.innerText = player; + if (player === 'X') { + dataX.push(num); + this.classList.add('x'); + } else { + dataO.push(num); + this.classList.add('o'); + } + if ( + (dataO.length > 2 || dataX.length > 2) + && (checkWin(dataO, num) || checkWin(dataX, num)) + ) { + for (let i = 0; i < ceil.length; i++) { + ceil[i].removeEventListener('click', currentStep); + } + message.innerText = 'Победил игрок ' + player; + return true; + } + changePlayer(); + stepCount++; + if (stepCount === 9) { + message.innerText = 'Ничья'; + } else { + message.innerText = 'Ходит игрок ' + player; + } + } + return false; +} + +for (let i = 0; i < ceil.length; i++) { + ceil[i].addEventListener('click', currentStep); +} + +reset.addEventListener('click', () => { // обработчик кнопки сброса + for (let i = 0; i < ceil.length; i++) { + ceil[i].innerText = ''; // очищаем ячейки + } + dataO = []; + dataX = []; + player = 'O'; + stepCount = 0; + message.innerText = 'Ходит игрок ' + player; + for (let i = 0; i < ceil.length; i++) { + ceil[i].addEventListener('click', currentStep); + ceil[i].classList.remove('x', 'o'); + } +}); \ No newline at end of file diff --git a/lesson6/practice/style.css b/lesson6/practice/style.css new file mode 100644 index 0000000..bb0cbd4 --- /dev/null +++ b/lesson6/practice/style.css @@ -0,0 +1 @@ +*{-webkit-box-sizing:border-box;box-sizing:border-box;outline:none}.game-title{display:block;margin-bottom:30px;font-size:35px;font-weight:bold;text-align:center}.game{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;width:152px;margin:0 auto 50px;border:1px solid #000}.game-item{position:relative;width:50px;height:50px;line-height:48px;border:1px solid #000;cursor:pointer;text-align:center;font-size:30px;font-weight:bold;-webkit-transition:all linear 0.3s;-o-transition:all linear 0.3s;transition:all linear 0.3s}.game-item:hover{background-color:#ccc}.game-item.o{background-color:#abfdab}.game-item.x{background-color:#f99}#reset-game{display:block;margin:0 auto;border:1px solid #000;border-radius:20px;background-color:#fff;padding:10px 20px;cursor:pointer;-webkit-transition:all linear 0.3s;-o-transition:all linear 0.3s;transition:all linear 0.3s}#reset-game:hover{background-color:#ccc} diff --git a/lesson6/script.js b/lesson6/script.js new file mode 100644 index 0000000..15b3907 --- /dev/null +++ b/lesson6/script.js @@ -0,0 +1,43 @@ + +function myProcessor() { + function showBig(event) { + const element = event.target; + const src = element.getAttribute('data-big-src'); + const bigElement = document.getElementById('bigPicture'); + bigElement.innerHTML = ''; + //вешаем обработчик событий onerror на невозможность загрузить большую картинку + // element.removeEventListener('click', showBig); + } + + const images = document.getElementsByTagName('img'); + for (let i = 0; i < images.length; i++) { + const element = images[i]; + element.addEventListener('click', showBig); + } +} + +function myClick() { + console.log('click'); +} + +window.onload = myProcessor; + //проверка на существование по src +/* +function sss() { + const images = document.getElementsByTagName('img'); + let pictSrc = []; + for(let z = 0; z