Как исправить ошибку замедления в PhoneGap Build HTML 5 canvas игра - PullRequest
Новая
       43

Как исправить ошибку замедления в PhoneGap Build HTML 5 canvas игра

0 голосов
/ 03 июля 2019

Я создал игровой движок Vanilla JS, использующий холст HTML 5, который упакован и построен с использованием сборки Phonegap.

Я получаю странную ошибку при запуске игры на Android, но только при запуске APK через PhoneGap, игра отлично работает в Chrome на Android и на рабочем столе.

Если вы выполняете жест типа перетаскивания или смахивания в правой части экрана (как если бы вы взаимодействовали с невидимой полосой прокрутки), то рендеринг замедляется при каждом последующем касании холста, почтикак будто событие касания вызывает блокировку основного потока JavaScript.

Я уже пытался запретить использование всех возможных типов событий касания на холсте по умолчанию.Я пробовал все типы исправлений CSS, которые я мог придумать, например, жесткое кодирование размера холста, изменение способа масштабирования холста до полного экрана, скрытое переполнение и т. Д. 

<head>
<style>
* {
        overflow: hidden;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        overscroll-behavior: none;
    }

    html, body {
        padding: 0;
        margin: 0;
        width: 100%;
        height: 100%;
        background: #000;
        overflow: hidden;
    }

    body{
        position: relative;
    }

    canvas {
        background: #FFF;
        transform-origin: 0 0;
        background-image: url("./images/sky.png");
        background-repeat: repeat-x;
        background-size: contain;
        width: 100%;
        margin:0 auto;
        display: block;
    }

    .container {
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: relative;
    }
</style>
</head>

<body scroll="no">
    <div class="container">
        <canvas width="360" height="640" id="idea"></canvas>
    </div>
  <script src="js/bundle.js"></script>
</body>

function updateCanvasSize(){
        const canvas = document.querySelector('.container');
        const scaleX = window.innerWidth / canvas.offsetWidth;
        const scaleY = window.innerHeight / canvas.offsetHeight;
        const scaleToFit = Math.min(scaleX, scaleY);
        if(game.canvas.offsetHeight > window.innerHeight) {
            game.canvas.style.width = 'auto';
            game.canvas.style.height = '100%';
        }
        game.scale = scaleToFit;
    }

function preventDefault(e) {
        e.preventDefault();
    }

document.addEventListener('touchmove', preventDefault, false);
    document.addEventListener('touchcancel', preventDefault, false);
    document.addEventListener('mousemove', preventDefault, false);
    document.addEventListener('dragstart', preventDefault, false);
    document.addEventListener('drag', preventDefault, false);
    document.addEventListener('dragend', preventDefault, false);
    updateCanvasSize();
    window.setTimeout(updateCanvasSize, 2000);
    window.addEventListener('resize', updateCanvasSize, false);

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

this.canvas.addEventListener("click", this.onclick.bind(this));

Но по какой-либо причине прокрутка или пролистываниеЖест вниз по правой стороне экрана заставляет каждое последующее касание замедлять рендеринг до 1 кадра в секунду

...