Как заставить этот javascript фейерверк по коду клика работать и на сенсорных экранах?

Я хотел сделать простую временную страницу «Happy 2017» на своем сайте, и я нашел на Code.pen код JS для фейерверка, который выглядел довольно интересно:

https://codepen.io/chuongdang/pen/yzpDG

Код прекрасно работает с мышью, так как фейерверк взрывается именно там, где вы щелкнули, но он вообще не работает с сенсорными командами, что делает его вообще не интерактивным на сенсорных экранах. Я вижу, что код вызывает события mousedown, mousemove и mouseup, но не touchstart и touchend:

 if( timerTick >= timerTotal ) {
    if( !mousedown ) {
        fireworks.push( new Firework( cw / 2, ch, random( 0, cw ), random( 0, ch / 2 ) ) );
        timerTick = 0;
    }
} else {
    timerTick++;
}

if( limiterTick >= limiterTotal ) {
    if( mousedown ) {
        fireworks.push( new Firework( cw / 2, ch, mx, my ) );
        limiterTick = 0;
    }
} else {
    limiterTick++;
}

Я думаю, это проблема, но, будучи полным новичком в JS, мне не хватает знаний, чтобы заставить его распознавать сенсорные координаты. Есть ли простой способ сделать это?


ios android javascript touch touchstart
person Johann Carnasciali    schedule 20.12.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Это предложение, оно может сработать или нет.

Попробуйте связать это с другим событием.

По отправленной вами ссылке (https://codepen.io/chuongdang/pen/yzpDG) , есть два прослушивателя событий для обработки событий onmousedown и onmouseup.

canvas.addEventListener( 'mousedown', function( e ) {
    e.preventDefault();
    mousedown = true;
});

canvas.addEventListener( 'mouseup', function( e ) {
    e.preventDefault();
    mousedown = false;
});

Попробуйте заменить их следующим кодом:

canvas.addEventListener( 'click', function( e ) {
    e.preventDefault();
    mousedown = true;
  setTimeout(function() {
    mousedown = false;
  }, 20);
});

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

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

Надеюсь, это помогло! знак равно

person Vinas    schedule 20.12.2016
comment
Это сработало! Большое спасибо за быстрый ответ =) - person Johann Carnasciali; 20.12.2016