I want to be able to pause a block in place when I click on it

Question

Here is the website with the game/source code and want to try and see if i can pause a block as it falls when i left click it with my mouse but not sure the proper function for it. ( https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/By_example/Raining_rectangles )

Answer 1

As you can see in the code the function drawAnimation() is calling itself every 17ms using setTimeout() JavaScript function (and this is what creates steady animation).

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

In order to pause/stop the animation you would need to use JavaScript function clearTimeout(timer) . Since you want to stop/pause the animation on click event you could just reuse the function playerClick (evt) { ... } from the code you already have and put the function clearTimeout(timer) there.

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

If you want to be able to continue with animation after you have paused it you'll need to implement some switch-logic (pause if it is already playing, play if it is already paused) inside your function playerClick (evt) or to use timers to continue the animation after some time, for example.

Answer 2

You must clearTimeout() to make it paused, I have implemented a toggle on click of box ie play/pause.

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