Вот веб-сайт с игрой / исходным кодом, и я хочу попробовать посмотреть, смогу ли я приостановить блок, когда он падает, когда я щелкаю по нему левой кнопкой мыши, но не уверен, что функция для него подходит. (https://developer.mozilla.org/en -US / docs / Web / API / WebGL_API / By_example / Raining_rectangles)

1
njohn 15 Апр 2019 в 07:08

2 ответа

Лучший ответ

Вы должны очистить Timeout (), чтобы сделать его приостановленным, я реализовал переключение по щелчку окна, т.е.

(function() {
        "use strict"
        window.addEventListener("load", setupAnimation, false);
        var gl,
            timer,
            rainingRect,
            scoreDisplay,
            missesDisplay,
            status,
            paused = false;

        function setupAnimation(evt) {
            window.removeEventListener(evt.type, setupAnimation, false);
            if (!(gl = getRenderingContext()))
                return;
            gl.enable(gl.SCISSOR_TEST);

            rainingRect = new Rectangle();
            timer = setTimeout(drawAnimation, 17);
            document.querySelector("canvas")
                .addEventListener("click", playerClick, false);
            var displays = document.querySelectorAll("strong");
            scoreDisplay = displays[0];
            missesDisplay = displays[1];
            status = displays[2];
        }

        var score = 0,
            misses = 0;

        function drawAnimation() {
            gl.scissor(rainingRect.position[0], rainingRect.position[1],
                rainingRect.size[0], rainingRect.size[1]);
            gl.clear(gl.COLOR_BUFFER_BIT);
            rainingRect.position[1] -= rainingRect.velocity;
            if (rainingRect.position[1] < 0) {
                misses += 1;
                missesDisplay.innerHTML = misses;
                rainingRect = new Rectangle();
            }
            // We are using setTimeout for animation. So we reschedule
            // the timeout to call drawAnimation again in 17ms.
            // Otherwise we won't get any animation.
            timer = setTimeout(drawAnimation, 17);
        }

        function playerClick(evt) {
            // We need to transform the position of the click event from
            // window coordinates to relative position inside the canvas.
            // In addition we need to remember that vertical position in
            // WebGL increases from bottom to top, unlike in the browser
            // window.
            var position = [
                evt.pageX - evt.target.offsetLeft,
                gl.drawingBufferHeight - (evt.pageY - evt.target.offsetTop),
            ];
            // if the click falls inside the rectangle, we caught it.
            // Increment score and create a new rectangle.
            var diffPos = [position[0] - rainingRect.position[0],
                position[1] - rainingRect.position[1]
            ];
            if (diffPos[0] >= 0 && diffPos[0] < rainingRect.size[0] &&
                diffPos[1] >= 0 && diffPos[1] < rainingRect.size[1]) {
                score += 1;
                scoreDisplay.innerHTML = score;
                // rainingRect = new Rectangle();
                if (!paused) {
                    clearTimeout(timer)
                    paused = true;
                    status.innerHTML = 'Paused';
                } else {
                    timer = setTimeout(drawAnimation, 17);
                    paused = false;
                    status.innerHTML = 'Playing';
                }
            }
        }

        function Rectangle() {
            // Keeping a reference to the new Rectangle object, rather
            // than using the confusing this keyword.
            var rect = this;
            // We get three random numbers and use them for new rectangle
            // size and position. For each we use a different number,
            // because we want horizontal size, vertical size and
            // position to be determined independently.
            var randNums = getRandomVector();
            rect.size = [
                5 + 120 * randNums[0],
                5 + 120 * randNums[1]
            ];
            rect.position = [
                randNums[2] * (gl.drawingBufferWidth - rect.size[0]),
                gl.drawingBufferHeight
            ];
            rect.velocity = 1.0 + 6.0 * Math.random();
            rect.color = getRandomVector();
            gl.clearColor(rect.color[0], rect.color[1], rect.color[2], 1.0);

            function getRandomVector() {
                return [Math.random(), Math.random(), Math.random()];
            }
        }

        function getRenderingContext() {
            var canvas = document.querySelector("canvas");
            canvas.width = canvas.clientWidth;
            canvas.height = canvas.clientHeight;
            var gl = canvas.getContext("webgl") ||
                canvas.getContext("experimental-webgl");
            if (!gl) {
                var paragraph = document.querySelector("p");
                paragraph.innerHTML = "Failed to get WebGL context." +
                    "Your browser or device may not support WebGL.";
                return null;
            }
            gl.viewport(0, 0,
                gl.drawingBufferWidth, gl.drawingBufferHeight);
            gl.clearColor(0.0, 0.0, 0.0, 1.0);
            gl.clear(gl.COLOR_BUFFER_BIT);
            return gl;
        }
    })();
<style>
    body {
        text-align: center;
    }

    canvas {
        display: block;
        width: 280px;
        height: 210px;
        margin: auto;
        padding: 0;
        border: none;
        background-color: black;
    }

    button {
        display: block;
        font-size: inherit;
        margin: auto;
        padding: 0.6em;
    }
</style>
<p>You caught
    <strong>0</strong>.
    You missed
    <strong>0</strong>
    Status
    <strong>Playing</strong>.</p>
<canvas>Your browser does not seem to support
    HTML5 canvas.</canvas>
0
Shoyeb Sheikh 15 Апр 2019 в 05:26

Как вы можете видеть в коде, function drawAnimation() вызывает себя каждые 17 мс, используя setTimeout() функцию JavaScript (и это то, что создает устойчивую анимацию).

function drawAnimation() {
    .
    .
    .
    timer = setTimeout(drawAnimation, 17);
}

Чтобы приостановить / остановить анимацию, вам нужно использовать функцию JavaScript clearTimeout(timer). Поскольку вы хотите остановить / приостановить анимацию при нажатии, вы можете просто использовать function playerClick (evt) { ... } из кода, который у вас уже есть, и поместить туда функцию clearTimeout(timer).

function playerClick (evt) {
    .
    .
    .
    clearTimeout(timer);
}

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

0
Emir 15 Апр 2019 в 04:58