Jump to content

Great Rash

Expert
  • Posts

    7,974
  • Joined

  • Last visited

  • Days Won

    144

Everything posted by Great Rash

  1. var form = document.querySelector('form'); if (form.checkValidity()) { // форма валидна } else { // форма невалидна }
  2. Зачем идти верстальщиком если вы "очень долго практиковали на С++"? Программист на плюсах зарабатывает гораздо больше верстальщика. Я бы, как минимум, на джуниора по плюсам пошел на вашем месте (даже если первое время по деньгам меньше будет). Очень странный выбор короче.
  3. Просто уберите строку getElementById, чтобы из-за неё ошибка не валилась.
  4. Топикстартер, это тебе
  5. function dR() { o.open("GET", "data.txt?r=" + Math.random(), 1); o.onload = function() { var a = this.responseText; a = a.replace(/\s*[\r\n=]+\s*/g, "="); a = a.replace(/^\s+/, ""); a = a.replace(/\s+$/, ""); a = a.match( /([^=]+)/g); for (var i = 0, len = a.length; i < len; i += 2) { try { document.getElementById(a[i]).innerText = a[i + 1]; if (gauge) { gauge.setValue(a[i + 1]); } } catch(e) {}; } setTimeout("dR()", 500); } o.send(); }
  6. Нафига вам сторонние скрипты если это всё пишется элементарно: var treshold = 10; // пороговое значение (если расстояние тача больше него, значит у нас свайп, а не клик) var touchStart = { // тут храним начальные координаты тача x: 0, y: 0 }; $(elem).on({ 'touchstart': function(e) { var touch = e.originalEvent.changedTouches[0]; // запоминаем начальные координаты тача touchStart.x = touch.clientX; touchStart.y = touch.clientY; }, 'touchend': function(e) { var touch = e.originalEvent.changedTouches[0]; var dx = touch.clientX - touchStart.x; var dy = touch.clientY - touchStart.y; var abs_dx = Math.abs(dx); var abs_dy = Math.abs(dy); // если дельта по x и по y меньше порогового значения, // значит у нас не свайп, а клик if (abs_dx < treshold && abs_dy < treshold) { console.log('this is click'); } // если дельта по x больше порогового значения и она больше дельты по y // значит мы свайпим влево или вправо, но не вверх или вниз if (abs_dx > treshold && abs_dx > abs_dy) { if (dx < 0) { // если дельта меньше нуля, значит свайпнули влево $(this).trigger('swipeLeft', e); } else { $(this).trigger('swipeRight', e); } } // если дельта по y больше порогового значения и она больше дельты по x // значит мы свайпим вверх или вниз, но не влево или вправо if (abs_dy > treshold && abs_dy > abs_dx) { if (dy < 0) { $(this).trigger('swipeUp', e); } else { $(this).trigger('swipeDown', e); } } }, 'swipeLeft': function(e) { console.log('this is swipe left'); }, 'swipeRight': function(e) { console.log('this is swipe right'); }, 'swipeUp': function(e) { console.log('this is swipe up'); }, 'swipeDown': function(e) { console.log('this is swipe down'); } });
  7. 1) Лучше делать своё, чем переделывать чужое. Всегда. 2) Онлайн-уроков по фотошопу в интернетах как грязи.
  8. http://codepen.io/anon/pen/yOWpXj?editors=1010 - IE9+
  9. Инлайн-блок на инлайн-блоке инлайн-блоком погоняет... Вот тут первый ответ фиксит вашу проблему.
  10. Great Rash

    +1 в JS

    Да я не негодую. Просто забавно.
  11. Great Rash

    +1 в JS

    Представляю ситуацию: я упоролся и перевёл у себя на компе время на 5 дней назад - ваша ссылка превратилась в тыкву.
  12. var mediaQuery = window.matchMedia('(min-width: 500px)'); if (mediaQuery.matches) { // я выполнюсь только если ширина экрана 500 или больше }
  13. Вы ещё не отрендерили темплейт, а уже пытаетесь искать в нём дочерние элементы. На момент вызова метода initialize в DOM существует только $el, но внутри он пустой. Вывод: this.$el.find нужно запускать внутри render, после вызова this.$el.html.
  14. Теперь то мы знаем, что форум родился 1-го апреля. Посему разрешите поздравить всех причастных, администрацию и вообще всех кому небезразличен этот маленький заповедник верстальщиков. Па-здра-вля-ю! Смешные картинки про верстку приветствуются!
  15. Можно написать багрепорт в службу поддержки доты.
  16. JS есть абсолютно на любом современном сайте ибо он необходим как минимум для аналитики. Так что это фигня, пара лишних килобайт - не большая цена за удобство разработки.
  17. Ну собственно твоя реализация ничем не отличается от классического БЭМ. Вопрос вкуса как писать модификаторы, через 2 подчёркивания или через одно. Например в твоей реализации элементов придётся в CSS использовать camel case, про который тоже куча народу скажет своё "фи". Так что вкусовщина всё это. Почему в яндексе твой подход не прокатил бы я уже написал собственно.
  18. Ты так пишешь будто длинные названия классов - это что-то плохое. Ну и что, что их три? Главное ведь не длина атрибута class, а понятность чтения кода. Не понимаю чем это хуже той лапши на SASS, которую ты привёл в пример. Особенно забавно получается если приходится разбираться в таком коде, не имея исходников (был у меня такой случай). UPD: Дополню справедливости ради, что я тоже не в восторге от системы модификаторов, предложенной яндексом. Сам то я примерно так пишу: <div class="block-name__elem-name _mod-1 _mod-2"></div> философия БЭМ сохраняется, но код при этом читабельней. Однако это только потому, что ИЕ6 помер наконец. А ведь БЭМ придумывали ещё в эпоху актуальности ИЕ6, в котором (сюрприз-сюрприз) в CSS не работала запись такого вида: .block-name__elem-name._mod-1 { /* ... */ } Именно оттуда растут ноги такого длинного объявления модификаторов.
  19. // 1 способ $(element, context); // 2 способ $(context).find(element);
  20. На самом деле нет. Просто надо уметь его готовить Товарищи из яндекса писали, что у них иногда по дню уходило просто на проектирование разметки (без написания кода). Т.е. наверное треть времени уходит на то чтобы просто понять как разбить макет на БЭМ-элементы. Опять же БЭМ идеально подходит только для больших порталов где есть 100500 повторяющихся элементов с разными скинами. Для лендингов БЕМ бесполезен чуть менее чем полностью.
  21. Я согласен с этим утверждением на все сто. БЭМ дал главное - научил людей избавляться от мусорной свалки в CSS. А ещё я считаю, что все эти ваши SASS, SCSS и т.п. вместе с переменными должны умереть. Как только везде заюзают Web Components всё это станет ненужно. Вот тогда и наступит верстальческий рай
  22. Шаг 5. Чтобы написать код открытия клеток нам придётся провести небольшой рефакторинг. Для начала я лоханулся со спрайтом клеток, наверное вы уже давно поняли что не так Так что первым делом забираем новый спрайт: Вторым делом перепишем метод .placeNumbers(), нам нужно отделить от него метод поиска соседних клеток, так как он понадобится нам при открытии клеток (как водится, часть кода я опущу): var minesweeper = function(game) {}; minesweeper.prototype = { // ... // теперь соседние клетки ищет отдельный метод getNeighbours: function(cell) { var i = cell.index; var u = i - this.game.boardWidth; var d = i + this.game.boardWidth; var l = i - 1; var r = i + 1; var ul = u - 1; var ur = u + 1; var dl = d - 1; var dr = d + 1; // в этот массив будем собирать найденных соседей клетки var indexArr = []; if (cell.posX > 0) { indexArr.push(l); if (cell.posY > 0) { indexArr.push(ul); } if (cell.posY < this.game.boardHeight - 1) { indexArr.push(dl); } } if (cell.posX < this.game.boardWidth - 1) { indexArr.push(r); if (cell.posY > 0) { indexArr.push(ur); } if (cell.posY < this.game.boardHeight - 1) { indexArr.push(dr); } } if (cell.posY > 0) { indexArr.push(u); } if (cell.posY < this.game.boardHeight - 1) { indexArr.push(d); } // возвращаем соседей return indexArr; }, // метод расстановки цифер теперь совсем маленький placeNumbers: function(cell) { var neighbours = this.getNeighbours(cell); for (var i = 0; i < neighbours.length; i++) { this.addNumberToCell(neighbours[i]); } }, // ... }; Не забудьте сделать цифры невидимыми, для этого внутри .addNumberToCell() уберите строку cell.frame. Далее нам нужно немного изменить метод расстановки клеток. А именно добавить клеткам новые свойства: флаг, обозначающий, что наш рекурсивный алгоритм уже проверял данную клетку на наличие мины, а так же обработчик кликов. Приступим: var minesweeper = function(game) {}; minesweeper.prototype = { // ... placeCells: function() { var len = this.game.boardWidth * this.game.boardHeight; var x = 0; var y = 0; var cell = null; for (var i = 0; i < len; i++) { x = i % this.game.boardWidth; y = Math.floor(i / this.game.boardWidth); cell = this.game.add.sprite(x * 56, y * 56, 'cells', 10); cell.posX = x; cell.posY = y; cell.isBomb = false; cell.numBombs = 0; cell.index = i; // отмечаем клетку непроверенной cell.isChecked = false; // разрешаем клетке обрабатывать события // (без этого флага Phaser события не обрабатывает) cell.inputEnabled = true; // навешиваем обработчик клика на клетку cell.events.onInputDown.add(this.onClick, this); this.game.board.add(cell); this.game.board.addToHash(cell); } }, // обработчик клика по клетке onClick: function(cell) { // если мы кликнули не по мине if (!cell.isBomb) { // то открываем клетку this.openCell(cell); } }, // рекурсивный поиск пустых клеток openCell: function(cell) { // соседи текущей клетки var neighbours = []; // текущий сосед var neighbour = null; // если в клетке мина или мы уже проверяли такую клетку if (cell.numBombs > 0 || cell.isChecked) { // открываем её цифру cell.frame = cell.numBombs - 1; // и выходим из рекурсии return; } // отмечаем клетку как проверенную cell.isChecked = true; // открываем клетку (11 кадр - значит пустая, без цифр) cell.frame = 11; // получаем соседние клетки neighbours = this.getNeighbours(cell); // для каждого соседа for (var i = 0; i < neighbours.length; i++) { // находим его в группе neighbour = this.game.board.hash[neighbours[i]]; // если там нет мины if (!neighbour.isBomb) { // открываем его цифру neighbour.frame = neighbour.numBombs - 1; // и рекурсивно вызываем открытие его соседей this.openCell(neighbour); } } }, // ... }; Алгоритм, используемый при открытии клеток, называется Flood Fill. Я использовал связанность по 8 направлениям, но подозреваю, что хватит и 4-х. Однако нам ни к чему делать лишние усложнения в методе .getNeighbours(), всё-таки наша игра слишком проста, чтобы такие оптимизации как-то сильно повлияли на производительность. Вот что у меня получилось (кликнул в верхний левый угол и в нижний правый): Ссылка на архив с игрой.
  23. Потому что консоль такой код превращает в такой: with (typeof __commandLineAPI !== 'undefined' ? __commandLineAPI : { __proto__: null }) { ({alert(1);})}А запись: ({})считается объектом, а не группировкой.Короче всё из-за того, что консоль так устроена.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy