Just the mindless blathering of a bored nerd

I’ve posted my boilerplate code for my projects on github. It’s set up for you to just drop in and get coding.

https://github.com/david0178418/BackboneJS-AMD-Boilerplate

This boilerplate code contains:

jQuery
Underscore
Backbone (AMD ready fork)
Normalize CSS

Todo Example

I’ve reimplemented a quick todo list app using this

You can see it here

This demo loads dummy data but does not persist it locally or on the server.

Hopefully soon, I’ll be releasing a tutorial on how to recreate the common todo list in this AMD format.

Enjoy!

NakedTransition is a simple transition jQuery plugin for creating fancy transitions between images. Why is it called “Naked Transitions”? Because most other image transition libraries require the use of a full blown gallery. Sometimes, you just need nothing more than to flip an image…with a nice transition.

Get NakedTransition!

See the live demo here

Download Nakedtransition

Usage

Required Markup

Naked Transtion works by replacing the background image of a div with another image that is transitioned in. By the end of the transition, the background-image style property will be replaced with the new image. As a result, the following css is required on the div:

background-image position – absolute or relative

width – must be the width of the background image

height – must be the height of the background image

Additionally, the new image must be the same dimensions of the original image.

Running function

davidgranado.com/demos/naked-transitions

$('div-selector').nakedTransition(newImageLocation)

newImageLocation – A string url of the new image to replace the image in the div. If this form is used, a default animation will run.

$('div-selector').nakedTransition(newImageLocation, params)

newImageLocation – A string url of the new image to replace the image in the div. If this form is used, a default animation will run.

params – an object containing the config options for the animation. Adjust these options to see the effect here in the current version of the demo page

Here are a list of the current options:

strips Integer – number of strips in animation. (default 15)

stripSpeed Integer – time required for each strip to complete animation in ms. (default 500)

stripDelay Integer – time between the start of one strip’s animation and the start of the next strip’s animation animation in ms. (default 500)

position String with possible values ‘top’, ‘bottom’, ‘alternate’, ‘curtain’ – describes where the strips will the animation sequence. (default alternate)

direction String with possible values ‘left’, ‘right’, ‘alternate’, ‘random’, ‘fountain’, ‘fountainAlternate’ – describes which strip will animate first and in which order the next animation will proceed.
(default fountainAlternate)

effect String with possible values ‘curtain’, ‘zipper’, ‘wave’ Preset animations that will override many of the other options (default none)

complete function to run once animation is completed. (default none)

While ago, I posted about two little demos I made one day when I was bored:

Make a Set
Make a Set Mobile

Well, some of you actually had fun with the dinky demo of mine. So I cleaned it up a bit and slapped a domain name onto it.

You can find it here:

MakeASetGame.com

It requires a non-crappy browser (read “anything but Microsoft Internet Explorere”). I would take the time to make it compatible, buuuut I have to do other, more important things right now…like drink a beer.

Hot on the heels of my standard browser version, here comes the mobile version…ish.  That is, it is refactored to run on your Android and iPhone/iPad/iSink.  Additionally, if you add a bookmark to your homescreen, you can run it without net access as an app!

It’s still the same ol’ rules, so if you forget them, check them out here where the first version was posted.

Otherwise…

Play it here!

So I was with my wife’s family over Thanksgiving this year gorging on enough meat and starches to tranquilize a small yak.  After said gorging, my wife pulled out a game that I had never before played.  It was called Set.  And, man, was it fun.  But, man, did I suck.

Anywho, after playing the game, I thought about the rules and said to myself “Dude, that would be an easy thing to make.”  So, I put this bad boy together.

The Rules

If you have not played it before, the premise is simple.  Here are the rules:

The object of the game is to identify a ‘set’ of three cards from 12 cards displayed. Each card has a variation of the following four features:

(A) Color:

Each card is red, green, or purple.

(B) Symbol:

Each card contains circles, squares, or triangles.

(C) Number:

Each card has one, two, or three symbols.

(D) Shading:

Each card is solid, clear, or lightly filled.

A “Set” consists of three cards in which each feature is EITHER the same on each card OR is different on each card. That is to say, any feature in the “Set” of three cards is either common to all three cards or is different on each card.

Examples

Color: All different
Symbol: All the same
Number: All different
Shading: All different
MATCH!

Color: All different
Symbol: All different
Number: All the same
Shading: All the same
MATCH!

Color: All different
Symbol: All the same
Number: All the same
Shading: Two the same, one different
NOT A MATCH!

The Game

It was a quick nasty hack just so my wife and I could quickly get to playing.  So don’t go looking at the code unless you are a fan of Italian food.

As of now, it’s most easily played by one person.  I’ll try and clean it up a bit later and add a “buzz in” feature to make it easier for multiple people to play.

Play it now!

So, I’ve been having quite a bit of fun with javascript and canvas as of late. And one of the best (read “fun”) ways to learn anything with graphics is to make games.

As of yet, I’ve remade Snake and Worm, and now I’m working on an original. Buuuuut given the fact that times are busy right now, and I’m figuring that it will be sometime by the turn of the century.

For now, I’ll just post my incremental progress as I find free time to work on such things.

What it currently features:

• Momentum based movement
• collision detection
• A “life” counter

And what is currently lacking:

• Sound
• Any sort of object
• Screen boundries
• Any sort of impressive visuals

For now, the movement controls are WASD.

The reason for this is that the arrow keys are used for “attacking” (which also has yet to be implements). However, if you’ve got Chrome or Firefox with Firebug, you can open your javascript console and see that an 8 direction charge attack system has been implemented with nothing actually hooking in.

“Play” it here!

Get the code here!

Well, where Snake was my “Hello World” game, this is my “How are you?” game. These both have some admittedly sloppy code and need to have certain level and speed elements balanced out.. However, the main point was just to get something up and running that I can call “done”.

Play it here!

Get the code here!

Now I’m taking these little lessons and hopefully turning out something a little more entertaining. Let’s hope I can have it out in the next month or two.

This was based on a great little tutorial from CanvasDemos.com. It’s a great tutorial that gives a great step-by-step reading of how to create it. However, while the face looks very similar, the actual code takes a different approach. I attempted to go down different path and see how a more object oriented approach would work. The end result is an amalgamation of OOP and procedural code for the main loop. But it’s ok, because I got the education from it that I was looking for.

Play it here!

Get the code here!