Константин Китманов

screenGame.backgroundPositionX += 5 + "px";

У вас на каждом шаге будет конкатенация строк, а не сложение. Значения будут такими: 0%, 0%5px, 0%5px5px и так далее. Поэтому, наверное, и не работает?

Есть несколько вариантов.

js-to-native, нативное приложение с бизнес-логикой на js и нативными виджетами:

• react-native
  
• NativeScript — на выбор angular, с недавних пор vue, чистый js
  
• weex — аналог react-native для vue.js, из коробки так же работает под веб. С документацией пока грустновато, но народ работает.
  

Вроде как из этого react-native самый проработанный и стабильный. Имел дело только с ним, если это стабильно и проработанно, то в остальное даже страшно заглядывать (хотя NativeScript+ionic мне хвалили). Выглядит нативно на каждой платформе. Знания html и css по большей части не пригодятся: тэги/компоненты свои, css-свойства работают не все и не во всех сочетаниях.

webview, гибридное приложение, браузер на весь экран:

• cordova, старейшее живое решение
  

Вроде как взял html, завернул и готово. Иногда полученное приложение несколько притормаживает, хотя я думаю что если это каталог товаров или меню ресторана, то проблем быть не должно. Выглядит одинаково на каждой платформе.

прочее:

• *.webmanifest и PWA, нечто среднее между установкой приложения и добавлением сайта в закладки.
  

По идее идеал, часто юзаешь сайт — типа ставишь приложение, редко — открываешь из браузера. У разработчика голова не болит как подружить веб, iOS и Android: везде выглядит и работает одинаково. На практике поддержка пока что пятнистая.

Ну вообще не очень.

// вставим весь html разом чтобы не дергать reflow и repaint на каждый чих
const tableContent = res.map((name) => {
  return `
    <tr>
      <th>
        <img src="${name.photo}" alt="${name.name}" class="img-fluid"/>
        <!-- ай-яй-яй, img с пустым alt --> 
      </th>
      <td>
          <p>${name.name}</p>
      </td>
      <td>${name.age} years old</td>
      <td>${name.adress}</td>
  </tr>`;
}).join('');
$('table tbody').append(tableContent);

// давать браузеру время закончить отрисовку предыдущего куска прежде чем вставлять новый
// анимации будут работать и интерфейс реагировать на ввод пользователя
res.map((name) => {
  const row = `
    <tr>
      <th><img src="${name.photo}" alt="${name.name}" class="img-fluid"/></th>
      <td>
          <p>${name.name}</p>
      </td>
      <td>${name.age} years old</td>
      <td>${name.adress}</td>
  </tr>`;

  requestAnimationFrame(() => {
    $('table tbody').append(row);
  })
});

Если я правильно понял и у вас всего 20 строк, то, наверное, пофиг.

Да вот еще не хватало! Пользователь должен давать явное согласие открыть сайт на полный экран, так что без нажатий на кнопки никак, к счастью.

Внимательно прочитайте текст ошибки и свой код:) В слове append не хватает буквы d.

https://codepen.io/hogart/pen/bRgrNd

jquery ui resizeable или какой-нибудь аналог для старта и шпаргалки и много кастомного кода