Your SlideShare is downloading. ×
0
TrackPad Destroyer
TrackPad Destroyer
TrackPad Destroyer
TrackPad Destroyer
TrackPad Destroyer
TrackPad Destroyer
TrackPad Destroyer
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

TrackPad Destroyer

107

Published on

See the blog post here: http://www.pubnub.com/blog/trackpad-destroyer-whos-got-the-fastest-fingers/ …

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!

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
107
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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 wantedat 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 asfast 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 TimerI used setTimeout and clearTimeout to implement thecountdown timer. There are two variables to recordthe time left. seconds represents seconds left andmillisec represents tenths of seconds left. Thefrequency of the update is a tenth of a second, so Iset the 100 milliseconds interval to setTimeout. Onething to mention is that the callback of setTimeout willonly execute once, which means that you need tocall setTimeout inside your callback to keep it working.The callback here is display(). It updates time left andpixels scrolled by both you and your opponent. Whentime is due, clearTimeout is called to stop the timer andpixels scrolled are compared to check who won.
  • 5. The TrackHere is what I used to generate space to scroll. I tookthe supplant function from the PubNub Javascript APIand used it to generate colorful divs. It replaced thestring inside of {} and {} itself with the value passed. Ina loop, I pushed the div string filled with differentbackground colors into an array called tiers and usejoin(‘’’) 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 ofthe window, and use an anonymous function thatupdates pixels scrolled as the scroll event handler.So how do we make it multiplayer and keep bothscreens 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 tookthe supplant function from the PubNub Javascript APIand used it to generate colorful divs. It replaced thestring inside of {} and {} itself with the value passed. Ina loop, I pushed the div string filled with differentbackground colors into an array called tiers and usejoin(‘’’) 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 publishthe 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!

×