Question

这是一个带有游戏/源代码的网站，想尝试一下，当我用鼠标左键单击它时，是否可以暂停某个块，因为它下落但不确定其功能是否正确。（https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/By_example/Raining_rectangles）

Answer 1

您可以在代码中看到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)内实现一些切换逻辑（如果已经播放则暂停，如果已经暂停则播放）或使用计时器在一段时间后继续播放动画。

Answer 2

您必须清除clearTimeout（）使其暂停，我实现了单击框的切换，即播放/暂停。

(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>

我希望能够在单击某个块时将其暂停在适当的位置

2 个答案: