Skip to content

Instantly share code, notes, and snippets.

@jacktandrew
Created March 20, 2012 03:58
Show Gist options
  • Save jacktandrew/2131145 to your computer and use it in GitHub Desktop.
Save jacktandrew/2131145 to your computer and use it in GitHub Desktop.
Create Dominoes
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<style>
div.tile {height: 70px; width: 35px; border-radius: 7px; float: left; margin: 10px;}
div.tile, div.bar {border: 2px outset #444;}
div.pips {height: 30px; width: 35px;position: relative; margin-top: 2px;}
div.pips div {border-radius: 5px; height: 4px; width: 5px; background: #333; position: absolute; border:2px inset #444;}
div.bar {height:0px; width: 25px; margin: 0 3px;}
.pips._1 div {top: 11px; left: 13px;}
.pips._2 div, .pips._4 div {top: 5px; left: 6px;}
.pips._2 div:last-child, .pips._4 div:last-child {top: 17px; left: 20px;}
.pips._3 div, .pips._5 div {top: 3px; left: 4px;}
.pips._3 div:nth-child(1), .pips._5 div:nth-child(2) {top: 11px; left: 13px;}
.pips._3 div:last-child, .pips._5 div:last-child {top: 19px; left: 22px;}
.pips._4 div:nth-child(1) {top: 5px; left: 20px;}
.pips._4 div:nth-child(2) {top: 17px; left: 6px;}
.pips._5 div:nth-child(1) {top: 3px; left: 22px;}
.pips._5 div:nth-child(3) {top: 19px; left: 4px;}
.pips._6 div {top: 1px; left: 4px;}
.pips._6 div:nth-child(1) {top: 11px; left: 4px;}
.pips._6 div:nth-child(2) {top: 21px; left: 4px;}
.pips._6 div:nth-child(3) {top: 1px; left: 22px;}
.pips._6 div:nth-child(4) {top: 11px; left: 22px;}
.pips._6 div:nth-child(5) {top: 21px; left: 22px;}
</style>
</head>
<body>
</body>
<script>
var boneyard = ['_0_0', '_0_1', '_1_1', '_0_2', '_1_2', '_2_2', '_0_3', '_1_3', '_2_3', '_3_3', '_0_4', '_1_4', '_2_4', '_3_4', '_4_4', '_0_5', '_1_5', '_2_5', '_3_5', '_4_5', '_5_5', '_0_6', '_1_6', '_2_6', '_3_6', '_4_6', '_5_6', '_6_6']
var bar = '<div class="bar"></div>'
var tile = '<div class="tile new"></div>'
var _0 = '<div class="pips _0"></div>'
var _1 = '<div class="pips _1"><div></div></div>'
var _2 = '<div class="pips _2"><div></div><div></div></div>'
var _3 = '<div class="pips _3"><div></div><div></div><div></div></div>'
var _4 = '<div class="pips _4"><div></div><div></div><div></div><div></div></div>'
var _5 = '<div class="pips _5"><div></div><div></div><div></div><div></div><div></div></div>'
var _6 = '<div class="pips _6"><div></div><div></div><div></div><div></div><div></div><div></div></div>'
function draw(n) {
for (i = 0; i < n; i++) {
var r = Math.floor(Math.random() * boneyard.length)
var pair = boneyard.splice(r,1)[0]
var top = eval( pair.slice(0,2) )
var bottom = eval( pair.slice(2,4) )
$('body').append(tile)
$('.new').removeClass('new').addClass( pair ).append( top + bar + bottom )
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment