Tag Archives: javascript

JavaScript Tile Puzzle

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.

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.

Download the code.

JavaScript Game Of Life Pt 2

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.

JavaScript Game Of Life Pt 1

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);

Click to see a demonstration.

And, as always: Download the code!

PS: It looks like terrible in Internet Explorer. No comment.

Sarah Palin Response Generator

I always get jealous whenever I see one of those mildly funny internet random text generators. I’ve finally done something about it. Now hopefully it’ll be (even more) trivial for me to make one of these in the future.

For the time being I’ve filled it up with some juicy Sarah Palin quotes. The question area is irrelevant. Apt.

Sarah Palin Response Generator

and as always…download the code!

JavaScript List Utility

Here’s a little something I was working on today. The goal was to model an HTML unordered list in JavaScript so I could easily add/remove and display elements. I haven’t gotten around to actually writing all of the display methods because I haven’t exactly figured out how I want to use it yet.

PS: I kinda re-remembered the toString method on this one.

PPS: Requires prototype

Example Usage:

set up the list

list1 = new List();
list1.add('a');
list1.add('b');

list2 = new List();
list2.add('b1!');
list2.add('b2!');

// nest away!
list1.add(list2);
list1.add('c');
list1.add('d');

li data

alert(list1.get_at(1).data);

remove li

list1.remove(4);

alert the list

alert(list1);

BAM!

Download the code!

Simple JavaScript Slider/Iterator…Thing

In keeping with my current “blog-more-about-less” stratagem I thought I’d post a little JavaScript utility I wrote. The idea was just to add “next” and “previous” buttons to an existing gallery, but I thought I’d have a little fun with it, as it may come in handy in the future.

The idea was to create a simple slider object that would keep track of the users position in an array of items. I could cycle through the items, backwards and forwards and fire of item methods. For the gallery I only had to worry about a few basic properties and methods, but I wanted to design this in such a way that adding properties and functionality to my objects would be a breeze.

PS: Current the slider object expects your items contain the methods “update” and “show”. I *know* this is bad, but I’ve had a hard time coming up with a solution that I liked better.

PPS: The example code I’m posting below was done using Prototype and ColdFusion, neither of which are required but are there because I thought it made it easier to get the point across.

Alright, enough gibber jabber.

Image Object:

function Image(thumb,large,caption) {
      this.thumb = thumb;
      this.large = large;
      this.caption = caption;
      this.show = function() {
          showPhoto(this.large,this.caption);
      }
      this.update = function() {
          $('largeImg').src = this.large;
          $('photoCaption').update(this.caption);
      }
  }

Create and fill it up!

gallery = new Slider();
// don't forget to escape those special javaScript characters!!!!

      gallery.add(
          new Image('#thumb#','#large#','#caption#')
      );

Attach the “previous” and “next” methods to my links. <3 unobtrusive JavaScript!

Event.observe(
      'previous',
      'click',
      function() {
          gallery.previous();
      }
  );
  Event.observe(
      'next',
      'click',
      function() {
          gallery.next();
      }
  );

And finally, on the actual thumbnails on the page:

Download the code!

As always, this solution is far from perfect, and I’d love feedback!