diff options
| author | Einar Egilsson <einar@einaregilsson.com> | 2012-05-18 23:44:19 +0200 |
|---|---|---|
| committer | Einar Egilsson <einar@einaregilsson.com> | 2012-05-18 23:44:19 +0200 |
| commit | b4ade9ab9a9b2b204a763c2c05b9f103b7d7973f (patch) | |
| tree | 370d11ded63561d718e7efe2db18f27c717bd6f7 | |
| parent | 6cf1bff2bb4d213f3b0fd73ce7b439108d6e0a27 (diff) | |
More examples
| -rw-r--r-- | cards.js | 46 | ||||
| -rw-r--r-- | demo.html | 98 |
2 files changed, 92 insertions, 52 deletions
@@ -14,6 +14,16 @@ var cards = (function() { var zIndexCounter = 1; var all = []; //All the cards created. + function mouseEvent(ev) { + var card = $(this).data('card'); + if (card.container) { + var handler = card.container._click; + if (handler) { + handler.func.call(handler.context||window, card, ev); + } + } + } + function init(options) { if (options) { for (var i in options) { @@ -40,6 +50,8 @@ var cards = (function() { if (opt.redJoker) { all.push(new Card('rj', 0, opt.table)); } + + $('.card').click(mouseEvent); shuffle(all); } @@ -75,9 +87,6 @@ var cards = (function() { cursor:'pointer' }).addClass('card').data('card', this).appendTo($(table)); this.showCard(); - $(this.el).click(function() { - alert($(this).data('card').name); - }); this.moveToFront(); }, @@ -113,7 +122,7 @@ var cards = (function() { }, hideCard : function(position) { - var y = opt.cardback == 'red' ? -2 : -1; + var y = opt.cardback == 'red' ? 0*opt.cardSize.height : -1*opt.cardSize.height; $(this.el).css('background-position', '0px ' + y + 'px'); this.rotate(0); }, @@ -167,20 +176,15 @@ var cards = (function() { }, click : function(func, context) { - if (!this._click) { - this._click = []; - var me = this; - $('.card').click(function() { - var card = $(this).data('card'); - if (card.container === me) { - for (var i = 0; i < me._click; i++) { - var obj = me._click[i]; - obj.func.call(obj.context||window, card); - } - } - }); - } - this._click.push({callback:func, context:context}); + this._click = {func:func,context:context}; + }, + + mousedown : function(func, context) { + this._mousedown = {func:func,context:context}; + }, + + mouseup : function(func, context) { + this._mouseup = {func:func,context:context}; }, render : function(options) { @@ -194,7 +198,7 @@ var cards = (function() { var top = parseInt($(card.el).css('top')); var left = parseInt($(card.el).css('left')); if (top != card.targetTop || left != card.targetLeft) { - var props = {top:card.targetTop, left:card.targetLeft}; + var props = {top:card.targetTop, left:card.targetLeft, queue:false}; if (options.immediate) { $(card.el).css(props); } else { @@ -262,12 +266,12 @@ var cards = (function() { var i = 0; var totalCount = count*hands.length; function dealOne() { - if (me.length == 0 || i > totalCount) { + if (me.length == 0 || i == totalCount) { return; } hands[i%hands.length].addCard(me.topCard()); - i++; hands[i%hands.length].render({callback:dealOne, speed:speed}); + i++; } dealOne(); } @@ -3,25 +3,33 @@ <head> <title>cards.js - Write card games in Javascript.</title> <style> - html { background-color:#ddd; } + html { background-color:#092E20; } body { - border-radius:3px; + border-radius:8px; box-shadow:black 0px 0px 2px; width: 600px; - background:white; + background:#FFF; margin:20px auto; border:solid 1px black; font-family: arial, sans-serif; padding:50px; } - + #buttons { + text-align:center; + } + button { + height:30px; + width:100px; + margin:8px auto; + } code { - border:solid 1px black; - width:600px; + border:dotted 1px black; + width:590px; + margin:auto; display:block; height:150px; white-space:pre; - padding:4px; + padding:7px; display:none; } @@ -29,13 +37,13 @@ background-color:green; height:400px; width:600px; - border:solid 4px brown; + border:solid 6px brown; border-radius:8px; -webkit-border-radius:8px; -moz-border-radius:8px; -ms-border-radius:8px; -o-border-radius:8px; - box-shadow:#333 0px 0px 7px; + box-shadow:#111 1px 1px 2px; } a:visited {color:blue;} </style> @@ -43,19 +51,47 @@ <script src="cards.js"></script> <script> var exampleCounter = 1; + var max = 0; + function stateChange() { + if (exampleCounter == 1) { + $('#exec').attr('disabled', 'disabled'); + } else { + $('#prev').removeAttr('disabled'); + } + if (exampleCounter > max) { + $('#exec').removeAttr('disabled'); + } else { + $('#exec').attr('disabled', 'disabled'); + } + if (exampleCounter <= max) { + $('#next').removeAttr('disabled'); + } else { + $('#next').attr('disabled', 'disabled'); + } + $('code').hide(); + $('code#ex' + exampleCounter).css('display', 'block'); + } + function next() { + exampleCounter++; + stateChange(); + } + function prev() { + exampleCounter--; + stateChange(); + } function execute() { var code = $('code#ex' + exampleCounter).text(); eval(code); - $('code#ex' + exampleCounter).hide(); - exampleCounter++; - $('code#ex' + exampleCounter).css('display', 'block'); + max = exampleCounter; + stateChange(); } </script> </head> <body> <h1>Cards.js</h1> - <code id="ex1" style="display:block"> -//Start by initalizing the library + <h3>The easiest way to write card games in Javascript</h3> + <p>cards.js is a library to write good looking card games in javascript. It's not a framework, it does not try to tell you how to write your game logic, it's only about rendering playing cards, animating them and giving you a nice and simple way to use them in your games.</p> + <code id="ex1" style="display:block">//Start by initalizing the library cards.init({table:'#card-table'}); //Create a new deck of cards deck = new cards.Deck(); @@ -64,36 +100,36 @@ deck.addCards(cards.all); //No animation here, just get the deck onto the table. deck.render({immediate:true}); </code> - <code id="ex2"> -//Now lets create a couple of hands, one face down, one face up. + <code id="ex2">//Now lets create a couple of hands, one face down, one face up. upperhand = new cards.Hand({faceUp:false, y:50}); lowerhand = new cards.Hand({faceUp:true, y:350}); //Deck has a built in method to deal to hands. -deck.deal(25, [upperhand, lowerhand], 50) +deck.deal(5, [upperhand, lowerhand], 50) </code> - <code id="ex3"> -//Lets setup a handler to draw cards + <code id="ex3">//Lets setup a handler to draw cards deck.click(function(card){ if (card === deck.topCard()) { - //Normally you'd have some more specific logic here - //to determine whether we can play a card right now. lowerhand.addCard(deck.topCard()); lowerhand.render(); } }); alert('Try clicking the deck now'); </code> - <code id="ex4"> -function computerPlay() { - for (var i = 0; i < upperhand.length; i++) { - var topcard = discardPile.topCard(); - if (upperhand[i].rank == topCard.rank) { - - } - } -} + <code id="ex4">//Let's move the deck and setup a discard pile +deck.x -= 50; +deck.render() +discardPile = new cards.Deck({faceUp:true}); +discardPile.x += 50; +deck.render(); +discardPile.addCard(deck.topCard()); +discardPile.render(); + </code> - <button onclick="execute()">Next</button> + <div id="buttons"> + <button id="prev" onclick="prev()" disabled>Previous</button> + <button id="exec" onclick="execute()">Execute code</button> + <button id="next" onclick="next()" disabled>Next</button> + </div> <div id="card-table"> </div> </body> |