Mini Game: Tốc độ cuộn chuột của bạn là bao nhiêu?

Scroll as fast as you can!

Bạn muốn kiểm tra tốc độ cuộn chuột của bạn, hãy chơi thử mini game bên dưới của Iris Tips nhé. Nhưng đừng chơi hăng say quá nhé, kẻo lại phải mua chuột mới đấy ^^

Sau khi vào trò chơi sẽ hiển thị tốc cuộn chuột của bạn là bao nhiêu pixels trên giây, bạn có thể chơi nhiều lần trò chơi sẽ hiển thị tốc độ tốt nhất mà bạn đã đạt được, nếu muốn reset kết quả bạn hãy tải lại trang nhé.

Chơi ngay

• VÀO GAME

Thêm vào website của bạn

1Nếu bạn yêu thích mini game này và muốn thêm nó website thì hãy sử dụng đoạn code bên dưới nhé.

<style type="text/css">
html{min-height:100%;min-width:100%}
body{font-family:sans-serif;background-color:#2ecc71}
.container{font-size:42px;text-align:center;color:white;font-weight:bold;padding:auto;position:absolute;margin:auto;top:0;right:0;bottom:0;left:0;width:100%;height:50px;border-radius:3px}
@keyframes pulse{from{font-size:32px}to{font-size:40px}}
.headline{text-align:center;font-size:42px;color:#ecf0f1;font-weight:bold;animation-name:pulse;animation-duration:1s;animation-iteration-count:infinite;animation-direction:alternate;position:absolute;margin:auto;top:0;right:0;bottom:0;left:0;width:100%;height:50px}
.best{margin-top:20px}
<style>
<div class="headline">Scroll as fast as you can!</div>
<div class="container">
  <div class="pixels"></div>
</div>
<script type='text/javascript'>
var rainbow = new Rainbow();
var best = 0;
rainbow.setSpectrum("#2ecc71","#ff9a42","#e74c3c");
rainbow.setNumberRange(0, 25000);
window.addEventListener('wheel', mouseWheelEvent);   
var lastSecond = [];

function mouseWheelEvent(e) {
  lastSecond.push({delta:Math.floor(Math.abs(e.deltaY)), timestamp: new Date().getTime()});
}
setInterval(function(){
  var pixelsPerSecond = displayLastSecond();
  if(pixelsPerSecond > best){
    best = pixelsPerSecond;
  }
  $(".pixels").text(numberWithCommas(pixelsPerSecond) + " pixels per second");
  console.log(makeGradient(pixelsPerSecond));
  $("body").css("background", "#" + rainbow.colourAt(pixelsPerSecond));
  $(".pixels").css("font-size",fontSize(pixelsPerSecond) + "px");
  if(pixelsPerSecond > 0){
    $(".headline").css("display", "none");
    $(".container").css("display", "block");
  }else{
    var headline = "Scroll as fast as you can!";
    if(best > 0){
      headline += "<div class='best'>Your best is "+ numberWithCommas(best)+" pixels per second</div>";
      $(".headline").css("height", "100px");
    }
    $(".headline").html(headline);
    $(".headline").css("display", "block");
    $(".container").css("display", "none");
  }
}, 50);

function displayLastSecond(){
  var now = new Date().getTime();
  var total = 0;
  var timestamps = 0;
  for(var x = 0; x < lastSecond.length; x++){
    if(now - lastSecond[x].timestamp <= 1000){
      total += lastSecond[x].delta;
      timestamps++;
    }else{
      lastSecond.splice(x, 1);
      x--;
    }
  }
  if(timestamps == 0){
    return 0;
  }
  return Math.round(total);
}
function fontSize(pps){
  return 32 + 20 * pps/25000;
}
function numberWithCommas(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
function makeGradient(pps){
  var color1 = rainbow.colourAt(pps);
  var color2 = rainbow.colourAt(pps+5000);
  return "radial-gradient(40% 40% at center, #" + color2 + ", #" + color1 + ")";
}
</script>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://sites.google.com/site/iristipsblogger/file/rainbowvis.js'></script>

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by Neal Agarwal/Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm