A co-worker of mine sent me some advice on the JavaScript deck of cards I set up a while back. Everything he said was spot on. Jim, if you're out there, you're insight and advice is always welcome and highly respected. Thanks!
Read your blog.
![]()
In the interest of academic feedback (don't take any of this in a negative way), I have a few comments.
It's hard to tell from the current function names, but if the "same_suit" and "same_type" Card methods are meant to be "is_same_..." functions, they you need to change the "=" to "==".
Card = Class.create({ initialize: function(type,suit) { this.type = type; this.suit = suit; }, same_suit: function(suit) { return this.suit == suit; }, same_type: function(type) { return this.type == type; }, toString: function(){ return this.type + ' of ' + this.suit; } });
JS supports the '+=' operator for strings, so you could change the "message = message + ..." to "message += ..." in the Deck::toString method.
The first time through the Deck::toString function, the modulo check will be true, resulting in message beginning with a '\n' character. Wasn't sure if that is what you wanted.
Here's a minor optimization for the Deck::toString function. It removes the modulo operation from the loop, which is performed 52 times on a full deck, and handles the all of the leading/trailing whitespace (tabs and newlines) automatically:
toString: function() { var message = ''; var i = 0, n = this.cards.length - 2; for(; i < n; ) { message += this.cards[i++] + '\t\t' + this.cards[i++] + '\n'; } if (i < this.cards.length) { message += this.cards[i++]; } if (i < this.cards.length) { message += '\t\t' + this.cards[i]; } return message; }
The following code:
var face_cards = "King,Queen,Jack" face_cards = face_cards.split(',');Could be:
var face_cards = ["King","Queen","Jack"];
I don't think you need the "var i" in the Deck::add_card method.
PS: One other minor update, I got started thinking about UNO and decided to break out the French or Anglo American deck specifications out to a separate class and file.
PPS: Jim caught me using a "=" in place of a "==". These were methods that I hadn't tried yet, but knew that I would need in the future. This is exactly the sort of thing that would have been instantly caught had I written out some tests. I'm a bit late to the game on TDD, but it's something I've been toying with in Ruby and I'm starting to come around. I don't even know where to start unit testing in JavaScript, but I plan on doing a bit of homework on the matter so stay tuned!
Download the code!
JavaScript Deck of Cards V2
Current Version
Tags: cards, javascript, prototype
I wrote up a basic model for a 52 card deck of playing cards in JavaScript (using beloved Prototype. I plan on using it to make some very simple card games in the near future. I thought it'd be interesting to post this before I actually used it anywhere so I could take a look at how much it changed after I actually implemented it.
There's not much to see at the moment. You can just shuffle and get a card dump:
<html> <head> <title>JavaScript Deck of Cards</title> <script src="/common/prototype.js" type="text/javascript"></script> <script src="deck_of_cards_v1.js" type="text/javascript"></script> </head> <body> <script> d = new Deck(); alert(d); d.shuffle(); alert(d); </script> </body> </html>
Download the code!
JavaScript Deck of Cards V1
Current Version
Tags: cards, javascript, prototype
I was tinkering a bit while watching the tube tonight and I thought it might be fun to make a simple JavaScript tile puzzle. Might look terrible in other browsers.
First step was to write a little ruby script (using the GD Graphics Library) to read in a file and cut it up into individual tiles. (Photoshop is for wussies)
if __file__ = $0 #pass the image name, tile size through the command line t = Tile_Cropper.new ARGV[0], ARGV[1].to_i t.crop_tiles end
Then I used a slightly modified method I read about in Ben Nadel's blog to scramble the tiles.
<cffunction name="ShuffleArray" output="no"> <cfargument name="tiles" required="yes"/> <cfset var random = StructNew()/> <cfset var i = ""/> <cfloop from="0" to="#arguments.tiles - 1#" index="i"> <cfset random[i] = RandRange( 1111, 9999 ) /> </cfloop> <cfreturn ArrayToList(StructSort(random, "numeric"))> </cffunction>
A little bit of CSS magic:
#puzzle { width: 500px; margin: 0px; padding: 0px; } .piece { list-style: none; display: inline; margin: 0px; padding: 0px; } img { border: 1px solid gray; }
And finally I used scriptaculous and prototype for the obnoxious drag-and-drop sorting. Not that I'm complaining. the Sortable methods weren't intended to be used for something like this.
function init() { Sortable.create('puzzle'); }
Complete the puzzle to find out what I was watching!. Here, I'll give you a hint. It's Dexter.
Tags: coldfusion, css, gd2, javascript, prototype, ruby, scriptaculous
I changed up the code up a little bit for implementation of Conway's Game Of Life. Turns out I had misread the rules a bit. My original code turned all cells on when they had 2 or 3 neighbors, regardless of their current state. That's how live cells are supposed to work, but dead cells are only supposed to change their state when they have exactly 3 neighbors.
Also I've updated my JavaScript objects to use the Prototype Class.create method. As far as I know the method I had been using works in all browsers, but I like Prototypes implementation of constructors and inheritance.
Finally, I increased the number of live starting cells, shrunk the number of boxes and increased the time delay between frames to hopefully grant a better user experience. It probably still looks terrible in Internet Explorer. Once again, that's what you get.
So check it out and download the code!
PS: You can still download and view the original version if you like.
Tags: game of life, javascript, prototype
I thought it would be fun to implement Conway's Game Of Life. I used ColdFusion a bit in my example to ease some typing but the "engine" is all JavaScript. Beloved Prototype is also being used a bit behind the scenes.
So without further ado, here's a
// set up a game of size 30 x 30 g = new Game_Of_Life(30); // set some random tiles, note that you // have way more of these for a size // 30 board. g.set_tile(2,26,1); g.set_tile(19,20,1); // draw inital board g.draw(); // run the game, 1/25s "frame-rate" g.run(.25);
And, as always: Download the code!
PS: It looks like terrible in Internet Explorer. No comment.
Tags: coldfusion, game of life, javascript, prototype