Заставка загружает изображение в обычном месте после неактивности, перезапускается, если пользователь что-то делает

Question

У меня есть следующие две части кода (ужасно, но я понятия не имею, что я делаю):

var stage = new createjs.Stage("canvas");
createjs.Ticker.on("tick", tick);

// Simple loading for demo purposes.
var image = document.createElement("img");
image.src = "http://dossierindustries.co/wp-content/uploads/2017/07/DossierIndustries_Cactus-e1499205396119.png";

var _obstacle = new createjs.Bitmap(image);
setInterval(clone, 1000);

function clone() {
    var bmp = _obstacle.clone();
    bmp.x= Math.floor((Math.random() * 1920) + 1);
    bmp.y = Math.floor((Math.random() * 1080) + 1);
    stage.addChild(bmp);
}

function tick(event) {
    stage.update(event);
}

<script>
$j=jQuery.noConflict();
jQuery(document).ready(function($){
    var interval = 1;

setInterval(function(){
   if(interval == 3){
       $('canvas').show(); 
       interval = 1; 
   }
   interval = interval+1;
    console.log(interval);
},1000);

$(document).bind('mousemove keypress', function() {
    $('canvas').hide();
    interval = 1; 
});
});

<script src="https://code.createjs.com/easeljs-0.8.2.min.js"></script>
<canvas id="canvas" width="1920" height="1080"></canvas>

По сути, я надеюсь достичь того, что, когда пользователь неактивен в течение x раз, полная страница (независимо от размера) медленно заполняется повторяющимся изображением. Когда что-то происходит, они все очищаются, и это начинается снова после заданного количества бездействия.

Приведенный выше код опирается на внешний ресурс, которого я хотел бы избежать и который должен работать на Wordpress.

Сайт доступен для просмотра на http://dossierindustries.co/

Answer 1

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

Большая разница в том, что рисование новых изображений с течением времени будет складываться (они должны отображаться в каждом кадре), поэтому в этом подходе используется кэшированный контейнер с одним дочерним элементом, и каждый тик он просто добавляет в кеш больше (аналогично Демо " updateCache " в GitHub.

Вот скрипка. http://jsfiddle.net/dcs5zebm/

Ключевые части:

// Move the contents each tick, and update the cache
shape.x = Math.random() * stage.canvas.width;
shape.y = Math.random() * stage.canvas.height;
container.updateCache("source-over");

// Only do it when idle
function tick(event) {
  if (idle) { addImage(); }
  stage.update(event);
}

// Use a timeout to determine when idle. Clear it when the mouse moves.
var idle = false;
document.body.addEventListener("mousemove", resetIdle);
function resetIdle() {
    clearTimeout(this.timeout);
    container.visible = false;
    idle = false;
    this.timeout = setTimeout(goIdle, TIMEOUT);
}
resetIdle();
function goIdle() {
    idle = true;
    container.cache(0, 0, stage.canvas.width, stage.canvas.height);
    container.visible = true;
}

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