update README for JavaScript

code/JavaScript/README.md

@@ -1,5 +1,18 @@
 # JavaScript
 
+## Взаимодействие с HTML
+
+- [`element.classList`](DOM/addClass.js) - Добавление/удаление классов элемента
+- [`document.createElement`](DOM/addElements.js) - Создание HTML элемента
+- [`addEventListener()`](DOM/addEventListenter.js) - Добавление обработчика событий
+- [attributes.js](DOM/attributes.js) - Примеры методов работы с атрибутами элемента
+- []() - 
+
+## Массивы
+
+- [arrays.js](Arrays/arrays.js) - Примеры методов работы с массивами
+- [`forEach`](Arrays/forEach.js) - Пример метода `forEach`
+
 ## Basic
 - [Arrays](arrays.js) - работа с массивами
 - [Spread syntax](spread.js) - распаковка массива в аргументы
@@ -19,12 +32,12 @@
 - [xhr](xhrPostForm.js) - отправка формы POST запросом используя XHR
 
 ## Other
-- [Webpack](webpack.md) example config
+- [Webpack](webpack.md) - Пример конфигурации `webpack`
 
 ## Canvas
-- [Drawing text](drawing-text.js) - примеры рисования текста на CANVAS
-- [`measureText()`](measureText.js) - возвращает информацию об измеренном тексте, например ширину
-- [`drawImage()`](canvas.drawImage.js) - метод Canvas 2D API рисования изображения на холсте
+- [drawText.js](Canvas/drawText.js) - Примеры рисования текста на `<canvas>`
+- [`measureText()`](Canvas/measureText.js) - Возвращает информацию о тексте, например ширину
+- [`drawImage()`](Canvas/drawImage.js) - Метод Canvas 2D API для отрисовки изображения на холсте
 
 ## GameDev
-- Canvas [GameLoop](gameloop.js) example
+- Canvas [GameLoop](gameLoop.js) - Пример игрового цикла

code/JavaScript/gameLoop.js

@@ -0,0 +1,113 @@
+// Main variables
+let DEBUG = true;
+let canvas;
+let context;
+let cW;
+let cH;
+
+// FPS
+let secondsPassed;
+let oldTimeStamp;
+let fps;
+
+let dragging = false;
+
+function mMove(e) {
+  'use strict';
+
+  if (dragging) {
+    point.pX = e.offsetX * cW / canvas.clientWidth | 0;
+    point.pY = e.offsetY * cH / canvas.clientHeight | 0;
+  };
+}
+
+function mDown(e) {
+  'use strict';
+
+  dragging = true;
+}
+
+function mUp(e) {
+  'use strict';
+
+  dragging = false;
+}
+
+function clearContext() {
+  'use strict';
+
+  context.fillStyle = '#b27e56';
+  context.fillRect(0, 0, cW, cH);
+}
+
+// Init
+window.onload = function() {
+  'use strict';
+
+  canvas = document.getElementById('game');
+  context = canvas.getContext('2d');
+  cW = canvas.width;
+  cH = canvas.height;
+
+  canvas.style.height = window.innerHeight + "px";
+  if (DEBUG) {
+    console.log('Canvas set size to ' + window.innerHeight + 'px');
+    console.log(canvas.getBoundingClientRect());
+  };
+
+  canvas.addEventListener('mousedown', mDown, false);
+  canvas.addEventListener('mouseup', mUp, false);
+  canvas.addEventListener('mousemove', mMove, false);
+
+  canvas.addEventListener('touchstart', mDown, false);
+  canvas.addEventListener('touchend', mUp, false);
+  canvas.addEventListener('touchmove', mMove, false);
+
+  window.requestAnimationFrame(gameLoop);
+};
+
+window.addEventListener('resize', function() {
+  'use strict';
+
+  let canvas = document.getElementById('game');
+  canvas.style.height = window.innerHeight + "px";
+
+  if (DEBUG) {
+    console.log('Canvas resized to ' + window.innerHeight + 'px');
+    console.log(canvas.getBoundingClientRect());
+  };
+}, true);
+
+// GameLoop
+function gameLoop(timeStamp) {
+  'use strict';
+
+  // fps counter
+  secondsPassed = (timeStamp - oldTimeStamp) / 1000;
+  oldTimeStamp = timeStamp;
+  fps = Math.round(1 / secondsPassed);
+  // end fps counter
+
+  update();
+  draw();
+
+  if (DEBUG) {
+    context.font = '15px Arial';
+    context.fillStyle = '#101024';
+    context.fillText('FPS: ' + fps, 10, 20);
+  };
+
+  window.requestAnimationFrame(gameLoop);
+}
+
+function update() {
+  'use strict';
+
+  //
+}
+
+function draw() {
+  'use strict';
+
+  clearContext();
+}

code/JavaScript/webpack.md

@@ -1,5 +1,7 @@
 ## WebPack
+
 `packages.json`
+
 ```json
 "scripts": {
     "serve": "webpack serve",
@@ -13,7 +15,9 @@
     "webpack-dev-server": "^3.11.2"
 }
 ```
+
 `webpack.config.js`
+
 ```javascript
 const path = require('path');