Skip to content

Instantly share code, notes, and snippets.

@leoj3n

leoj3n/index.html

Created October 10, 2012 14:31
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save leoj3n/3865993 to your computer and use it in GitHub Desktop.
Save leoj3n/3865993 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>
<body>
<div id="board"></div>
</body>
</html>
Raw
script.js
var k01 = ['Key Found!', 'You found a key in realm 1!', 1];
var k02 = ['Key Found!', 'You found a key in realm 2!', 2];
var k03 = ['Key Found!', 'You found a key in realm 3!', 3];
var k04 = ['Key Found!', 'You found a key in realm 4!', 4];
var xxx = ['', '', 5];
var vvv = ['', '', 0];
var sss = ['START', 'One player may start on this tile.', 7];
var cas = ['CASTLE', 'Enter to win.', 6];
var r01 = ['REWARD', '...', 1];
var r02 = ['REWARD', '...', 2];
var r03 = ['REWARD', '...', 3];
var r04 = ['REWARD', '...', 4];
var board =
[ [k01,r01,r01,vvv,sss,vvv,vvv,r02,r02,k02],
[r01,r01,r01,xxx,xxx,xxx,xxx,r02,r02,r02],
[r01,r01,r01,xxx,xxx,xxx,xxx,r02,r02,r02],
[vvv,xxx,xxx,xxx,xxx,xxx,xxx,xxx,xxx,vvv],
[vvv,xxx,xxx,xxx,cas,cas,xxx,xxx,xxx,sss],
[sss,xxx,xxx,xxx,cas,cas,xxx,xxx,xxx,vvv],
[vvv,xxx,xxx,xxx,xxx,xxx,xxx,xxx,xxx,vvv],
[r04,r04,r04,xxx,xxx,xxx,xxx,r03,r03,r03],
[r04,r04,r04,xxx,xxx,xxx,xxx,r03,r03,r03],
[k04,r04,r04,vvv,vvv,sss,vvv,r03,r03,k03]];
// creates a tile
function tile( i, v ) {
return $('<section class="tile c' + v[2] + (i % 2 ? ' odd' : ' even') + '"><div><figure>' + v[0] + '<br />' + v[1] + '</figure></div></section>');
}
var sndctx = initializeNewWebAudioContext();
sndctx.loadSound( 'http://brochurebeast.com/public_share/Plink_09.ogg', 'plink' );
// create the board
$.each(board, function( index, value ) {
$.each(value, function( i, v ) {
$('#board').append( tile( index, v ) );
});
});
// set percentage-based width/height
$('.tile').css({
'width':(100/board[0].length)+'%',
'height':(100/board.length)+'%'
});
$('.tile').click(function() {
sndctx.playSound( 'plink' );
});
Raw
style.less
.c0 {
background-color:#333333;
}
.c1 {
background-color:#7DBD51;
}
.c2 {
background-color:#ADEEE6;
}
.c3 {
background-color:#FF6B6B;
}
.c4 {
background-color:#7C1E84;
}
.c6 {
background-color:#FFE013;
}
.c7 {
background-color:#A68D6F;
}
.c5 {
background-color:#EEEEEE;
}
.tile.c5.even:nth-child( even ) {
background-color:#CCCCCC;
}
.tile.c5.odd:nth-child( odd ) {
background-color:#CCCCCC;
}
#board {
z-index:999;
height:670px;
width:1030px;
position:absolute;
}
.tile {
float:left;
color:white;
cursor:pointer;
overflow:hidden;
text-align:center;
box-shadow:inset 1px 1px #000000;
text-shadow:1px 1px 2px #000000;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment