scriptNode / Shark!

Shark!

Advanced

Published August 3rd, 2008 by Matt Hackett

Well, this year's Shark Week is over. In its memory, I offer up a script that makes sharks swim around on the screen. You should see a few sharks swimming about right now! Here's the source code:

/**
 * Global Shark constructor
 * Options for ops: dir, speed, url, x, y, zIndex
 * @constructor
 * @public
 */
Shark = function(ops) {

var Y = YAHOO.util,
		DEFAULT_SPEED = 2,
		DEFAULT_ZINDEX = 1000,
		DELAY = 25,
		LEFT = 'l',
		RIGHT = 'r',
		SCREEN_WIDTH = Y.Dom.getViewportWidth(),
		SCREEN_HEIGHT = Y.Dom.getViewportHeight(),
		SHARK_WIDTH = 242,
		SHARK_HEIGHT = 82;

var interval,
		that = this;

that.active = true;
	that.dir = LEFT;
	that.el = {};
	that.onOutLeft = function(){};
	that.onOutRight = function(){};
	that.x = 0;
	that.y = 0;

/**
	 * Initializes the shark variables
	 * @private
	 */
	var init = function() {

ops = ops || {};
		ops.speed = ops.speed || rand(DEFAULT_SPEED, (DEFAULT_SPEED * 2));
		ops.url = ops.url || './';
		ops.zIndex = ops.zIndex || DEFAULT_ZINDEX;

if (ops.dir) {
			that.dir = ops.dir;
		} else {
			that.dir = [LEFT, RIGHT][rand(0, 1)];
		}

if (ops.x === undefined) {
			if (that.dir == LEFT) {
				that.x = (SCREEN_WIDTH - 1);
			} else {
				that.x = -SHARK_WIDTH;
			}
		} else {
			that.x = ops.x;
		}

that.el = document.createElement('div');
		that.el.className = 'shark'; // Doesn't do anything. Just in case you want to use it
		that.el.style.position = 'absolute';
		that.el.style.height = SHARK_HEIGHT + 'px';
		that.el.style.zIndex = ops.zIndex;

Y.Event.addListener(that.el, 'click', onclick);

document.body.appendChild(that.el);
		reset();

if (ops.y !== undefined) {
			that.y = ops.y
			plot();
		}

that.start();

};

/**
	 * Kills the shark
	 * @param {Boolean} fade Whether to fade the shark in or not
	 */
	that.kill = function(fade) {

that.active = false;

var done = function() {
			document.body.removeChild(that.el);
			stop();
		};

if (fade) {

var anim = new Y.Anim(that.el, {opacity : {to : 0}}, 0.5);

anim.onComplete.subscribe(done);
			anim.animate();

} else {
			done();
		}

};

/**
	 * Move the shark
	 */
	var move = function() {

if (!that.active) {
			return;
		}

if (that.dir == LEFT) {

that.x -= ops.speed;

if (that.x < -SHARK_WIDTH) {
				that.dir = RIGHT;
				that.onOutLeft();
				reset();
			}

} else {

that.x += ops.speed;

if (that.x > (SCREEN_WIDTH - 1)) {
				that.dir = LEFT;
				that.x = (SCREEN_WIDTH - 1);
				that.onOutRight();
				reset();
			}

}

if (that.x > (SCREEN_WIDTH - SHARK_WIDTH)) {
			that.el.style.width = (SHARK_WIDTH - (that.x - (SCREEN_WIDTH - SHARK_WIDTH))) + 'px';
		} else {
			that.el.style.width = SHARK_WIDTH + 'px';
		}

plot();

};

/**
	 * Kills the shark. Note: intended to be overwritten
	 */
	var onclick = function() {
		that.onclick();
	};

/**
	 * Default onclick behavior
	 */
	that.onclick = function() {
		that.kill(true);
	};

/**
	 * Moves the shark element to the XY coordinates
	 */
	var plot = function() {
		that.el.style.left = that.x + 'px';
		that.el.style.top = that.y + 'px';
	};

/**
	 * Returns a random number
	 * @param {Number} from The starting point
	 * @param {Number} to The stopping point
	 * @return {Number} A random number within the range
	 */
	var rand = function(from, to) { 
		return (from + Math.floor((to - from + 1) * Math.random())); 
	};

/**
	 * Sets the background based on direction and randomizes the Y position
	 */
	var reset = function() {

that.el.style.background = 'url(' + ops.url + 'shark_' + that.dir + '.gif)';
		that.y = rand(0, (SCREEN_HEIGHT - SHARK_HEIGHT - 1));

plot();

};

/**
	 * Starts the move interval
	 */
	that.start = function() {

if (interval) {
			return;
		}

interval = setInterval(move, DELAY);

};

/**
	 * Stops the move interval
	 */
	that.stop = function() {
		if (interval) {
			clearInterval(interval);
			interval = false;
		}
	};

init();

};

You can create new sharks like this:

The last example above shows setting a custom URL for the shark images. You can download those here:

There are a few different events you can subscribe to including onclick, onOutLeft and onOutRight, which I think are pretty self-explanatory. Using these events, I put together a very simple game involving sharks, clicking and hopelessly trying to save a doomed diver. The ocean graphics came from one of my favorite CSS Zen Garden examples.

The shark script requires YUI (Animation, DOM and Event). I've included it in the third download option below:

[Download shark.js] (3,747 bytes)
[Download shark-min.js] (1,550 bytes; compressed)
[Download shark-min-yui.js] (46k; compressed with YUI)

I'd love to see if anybody else has cool ideas of what to do with the shark script!

Read other articles tagged: games, javascript, just-for-fun, lab, script-sunday, yui

Comments (3)

August 3rd, 2008 Laurie said…

Wonderful.
August 6th, 2008 Matt Hackett said…

Hm, apparently an update I made kills the shark animation. I have no idea why that’s happening. Any ideas?
August 15th, 2008 James Urquhart said…

Eek! Sharks!

Nice script btw :)

scriptNode

Shark!

Comments (3)

Thoughts?

Social Web

Tags

Links