Created
May 6, 2012 21:17
-
-
Save slimbo/2624433 to your computer and use it in GitHub Desktop.
Hit the Bits! - CSS3 Leaderboard - Full
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <style type="text/css"> | |
| #leaderboard li { | |
| font-family: sans-serif; | |
| font-size: 12px; | |
| line-height: 12px; | |
| } | |
| #leaderboard #players li { | |
| display:block; | |
| clear: both; | |
| position: absolute; | |
| width: 350px; | |
| -moz-transition-duration: 1s; | |
| -webkit-transition-duration: 1s; | |
| -ms-transition-duration: 1s; | |
| } | |
| #leaderboard #players li.header { | |
| font-weight: bold; | |
| background-color: silver; | |
| background: -moz-linear-gradient(top, #cedce7 0%, #596a72 100%); | |
| background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cedce7), color-stop(100%,#596a72)); | |
| } | |
| #leaderboard #players { | |
| padding: 0; | |
| width: 350px; | |
| position: relative; | |
| border: 1px solid #333; | |
| box-shadow: 2px 2px 5px gray; | |
| height: 132px; | |
| background: -moz-linear-gradient(top, #cedce7 0%, #596a72 100%); | |
| background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cedce7), color-stop(100%,#596a72)); | |
| } | |
| #leaderboard #players div { | |
| display: block; | |
| float: left; | |
| overflow: hidden; | |
| padding: 5px; | |
| } | |
| #leaderboard .player { | |
| background: -moz-linear-gradient(top, #feffff 0%, #e0dace 100%); | |
| background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#feffff), color-stop(100%,#e0dace)); | |
| } | |
| #leaderboard .rank { | |
| width: 50px; | |
| } | |
| #leaderboard .name { | |
| width: 150px; | |
| } | |
| #leaderboard .score { | |
| width: 100px; | |
| } | |
| </style> | |
| <div id="leaderboard"> | |
| <ul id="players"> | |
| <li class="header"> | |
| <div class="rank">Rank</div> | |
| <div class="name">Player</div> | |
| <div class="score">Score</div> | |
| </li> | |
| </ul> | |
| </div> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> | |
| <script language="javascript"> | |
| var players; | |
| var timerId; | |
| var scoreToWin = 2000; | |
| var updateInterval = 2000; | |
| function descending(a, b) { return a.score < b.score ? 1 : -1; } | |
| function reposition() { | |
| var height = $("#leaderboard .header").height(); | |
| var y = height; | |
| for(var i = 0; i < players.length; i++) { | |
| players[i].$item.css("top", y + "px"); | |
| y += height; | |
| } | |
| } | |
| function updateBoard() { | |
| var player = getRandomPlayer(); | |
| player.score += getRandomScoreIncrease(); | |
| player.$item.find(".score").text(player.score); | |
| players.sort(descending); | |
| updateRanks(players); | |
| reposition(); | |
| if(isGameOver(player.score)) { | |
| resetBoard(); | |
| } | |
| } | |
| function isGameOver(score) { | |
| return score >= scoreToWin; | |
| } | |
| function getRandomPlayer() { | |
| var index = getRandomBetween(0, players.length); | |
| return players[index]; | |
| } | |
| function getRandomScoreIncrease() { | |
| return getRandomBetween(50, 150); | |
| } | |
| function getRandomBetween(minimum, maximum) { | |
| return Math.floor(Math.random() * maximum) + minimum; | |
| } | |
| function updateRanks(players) { | |
| for(var i = 0; i < players.length; i++) { | |
| players[i].$item.find(".rank").text(i + 1); | |
| } | |
| } | |
| function resetBoard() { | |
| var $list = $("#players"); | |
| $list.find("li.player").remove(); | |
| if(timerId !== undefined) { | |
| clearInterval(timerId); | |
| } | |
| players = [ | |
| { name: "D35truXion", score: 500 }, | |
| { name: "Lithos", score: 400 }, | |
| { name: "baby.bumpkins", score: 300 }, | |
| { name: "SpreadsheetMan", score: 200 }, | |
| { name: "Eitz", score: 100 } | |
| ]; | |
| for(var i = 0; i < players.length; i++) { | |
| var $item = $( | |
| "<li class='player'>" + | |
| "<div class='rank'>" + (i + 1) + "</div>" + | |
| "<div class='name'>" + players[i].name + "</div>" + | |
| "<div class='score'>" + players[i].score + "</div>" + | |
| "</li>"); | |
| players[i].$item = $item; | |
| $list.append($item); | |
| } | |
| timerId = setInterval("updateBoard();", updateInterval); | |
| reposition(); | |
| } | |
| resetBoard(); | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment