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

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.

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.

// 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.

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(); });

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' });

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!