See the blog post here: http://www.pubnub.com/blog/trackpad-destroyer-whos-got-the-fastest-fingers/ Ever wondered how many pixels you can scroll in 30 seconds? Ever had a friend tell you to scroll faster? Looking for a simple yet extremely addicting multiplayer game? Introducing TrackPad Destroyer. The game is simple. Two players scroll their trackpads as fast as possible before the timer counts down to zero. Whoever scrolls more pixels wins. Built at PubNub's Hackathon, Rongchao Fan walks you through how to make one of your own. Happy scrolling!

1. TrackPad Destroyer: Whoʼs Got the Fastest Fingers?"
by Rongchao Fan

2. We love games at PubNub. So when I was presented with the opportunity to make whatever I wanted
at the PubNub Hackathon, I knew I wanted to make a fun game with a single input. Inspired by the
“boring” Android game Toilet Paper Man, I wanted my game to be both multiplayer and dead simple.
As a result, TrackPad Destroyer was born. The game is simple. Two players scroll their trackpads as
fast as possible before the timer counts down to zero. Whoever scrolls more pixels wins.

3. That’s it. You’ll soon find out that your trackpad isn’t the only thing that’ll get destroyed:
You can check out the Github Repository here, and I’ll walk you through the code below.

4. // TIMER
// CREDITS : http://houtz.tv/javascript/timer.html
function start(){
var seconds = 30;
var millisec = 0;
var timer;
function display(){
if (millisec <= 0){
millisec=9;
seconds-=1;
publish(pos);
}else
millisec-=1;
if (seconds<=0 && millisec<=0 ){
end();
}else
timer = setTimeout(display, 100);
$('#count-down').html(seconds+'.'+millisec);
}
function end(){
clearTimeout(timer);
whowin();
}
function whowin(){
if (pos > other){
$('#score-board').html("<div class=result>You Win ;)</div>")
return;
}
if (pos < other){
$('#score-board').html("<div class=result>You Lose ;(</div>")
return;
}
else{
$('#score-board').html("<div class=result>Tie, LOL</div>")
return;
}
console.log('pos', pos, 'other', other);
}
display();
}
The Timer
I used setTimeout and clearTimeout to implement the
countdown timer. There are two variables to record
the time left. seconds represents seconds left and
millisec represents tenths of seconds left. The
frequency of the update is a tenth of a second, so I
set the 100 milliseconds interval to setTimeout. One
thing to mention is that the callback of setTimeout will
only execute once, which means that you need to
call setTimeout inside your callback to keep it working.
The callback here is display(). It updates time left and
pixels scrolled by both you and your opponent. When
time is due, clearTimeout is called to stop the timer and
pixels scrolled are compared to check who won.

5. The Track
Here is what I used to generate space to scroll. I took
the supplant function from the PubNub Javascript API
and used it to generate colorful divs. It replaced the
string inside of {} and {} itself with the value passed. In
a loop, I pushed the div string filled with different
background colors into an array called tiers and use
join(‘’’) to concatenate into a string and then render.
<div id=screen><div>
// UTILS
function supplant( str, values ) {
return str.replace( /{([w-]+)}/g, function( _, match )
{
return values[match] || _
} );
}
// TIERS
var tiers = []
var tier ='<div class=tier style="background-color:
{color}"></div>'
var colors = ["#ff4646", "#0863bf", "#3d4c6b", "#ec9319",
"#7d9906", "#dd641f", "#8dc050", "#f18822",
"#8fb037", "#785A3A", "#E7A800", "#1A8FC9",
"#681D2A", "#af4009", "#0f8c98", "#f18822",
"#005eac", "#f64000", "#3b5998"];
for(var i=0; i<10000; i++){
var color = colors[Math.floor(Math.random()
*colors.length)];
var _tier = supplant(tier, {'color': color});
tiers.push(_tier);
}
$(function(){
$('#screen').html(tiers.join(''));
start();
});

6. We use window.scrollTop() to get the offset to the top of
the window, and use an anonymous function that
updates pixels scrolled as the scroll event handler.
So how do we make it multiplayer and keep both
screens synchronized? Use PubNub! Here’s how:
First, initialize pubnub with pub_key and sub_key.
On Your Mark, Get Set, Go!
Here is what I used to generate space to scroll. I took
the supplant function from the PubNub Javascript API
and used it to generate colorful divs. It replaced the
string inside of {} and {} itself with the value passed. In
a loop, I pushed the div string filled with different
background colors into an array called tiers and use
join(‘’’) to concatenate into a string and then render.
var other = 0;
var pos=0;
// GET SCROLL POSITION
$window = $(window);
$window.scroll(function(){
pos = $window.scrollTop();
$('#scrolled-me').html(pos);
});
var pubnub = PUBNUB.init({
publish_key : 'demo',
subscribe_key : 'demo'
});

7. function publish(m){
pubnub.publish({
channel:'trackpad-destroyer-1',
message: m
});
pubnub.subscribe({
channel: 'trackpad-destroyer-2',
message: update
});
// CALLBACK FOR SUBSCRIBE
function update(m){
other = m;
$('#scrolled-other').html(m);
}
Next, use publish to publish messages to channel. Here, I publish
the pixels scrolled.
Lastly, subscribe to receive pixels scrolled by your competitors.
That’s it. Now we have a multiplayer game with dead simple input.
Have fun!