Creation of a Sokoban game with jQuery

When I said there are games you must be able to make in less than a day, obviously I meant in any language.

This is the jQuery version of the Sokoban game I made in less than 2Kb.

Or, more precisely, it’s the javascript version, powered by jQuery.

You should know the rules… click in the iframe and play using WASD keys.

Let’s take look at the script: Read more

Creation of a minimalist image gallery in 18 jQuery lines

The web is full of jQuery galleries, but I think none of them is really minimalist to give people the opportunity to custom and improve it according to their needs, and none of them is fully explained, line by line, style by style, to help jQuery newcomers.

So I decided to create the Triqui Gallery, a simple and fully commented jQuery gallery you can use as a simple gallery or a “featured photos/games/whatsoever” slideshow.

According to your comments, I will add more and more functionalities, if this topic receives enough interest.

Let’s see its main features:

• All the code in a single page – no external stylesheet or javascript files to load, to make it easier to understand
• Fully commented source code, from styles to jQuery to HTML tags
• Compatible with all modern browsers… at least the latest versions of IE, Firefox, Chrome, Opera and Safari
• Easy to configure
• Animated captions
• Rollover and selected effects on thumbnails

You can find all needed information about gallery setup in the HTML file itself, download it and enjoy.

17 jQuery powered web games with source code

While Flash remains the best software to develop casual web games, jQuery allows you to make interesting things… nothing to do with pure action Flash games, but in some cases you can get interesting results out of your browser.

Here it is a list with 17 jQuery powered games, most of them with clean and commented source code ready to download (and before you say it’s obvious jQuery games have source code, I mean uncompressed, readable source code)

Javascript game engine for jQuery

Not a game but a whole library to develop jQuery games

Main features:

• multi layer-sprite animations
• sprite hierarchies (grouping)
• collision detection
• swappable sound support
• periodic callbacks
• keyboard state polling
• free and open source license

http://gamequery.onaluf.org/ – Check out the demos too!!

TicTacToe in jQuery

The “Hello world” of game programming, now with jQuery

http://thingsilearned.com/2009/06/02/tictactoe-in-jquery/ Read more

Loading WP posts with Ajax and jQuery – a real world example

If you are looking for a real world example made with Loading WordPress posts with Ajax and jQuery or you haven’t played LineBall yet, or you played it, you loved it and you want to know who made the music, this is the right blog post.

I am finishing and polishing LineBall’s official site built with WordPress and Ajax.

I plan to finish it before this week ends, then release the theme next week. So if you have suggestions, feedback or want more information, this is your turn.

Help me to make the ultimate WordPress Flash game theme.

Some features already developed:

* Highly customizable by setup page – no need to edit the code

* Ajax powered to browse it without reloading the header (the game itself)

* Minimal theme, a very few lines of code

Let me know what do you think about it. And don’t pay that much attention to contents… I just wrote a couple of lines just to make some tests

Loading WordPress posts with Ajax and jQuery

After seeing how to include jQuery Ajax calls in your WordPress blog, it’s time to load posts on the fly, without reloading the page.

As for the previous example I am using the standard Kubrick theme… without any plugin installed.

Look how I load the posts under the header by clicking on their titles… even the ones with “more” tag appear complete without reloading the page:

Let’s start with header.php modifications

This is the script I added under

< ?php wp_head(); ?>

That is the JQuery part Read more

Including jQuery Ajax calls in your WordPress blog

I want to show you how to include jQuery ajax calls in your WordPress blog.

The reason is simple: sometimes you may need to update the content of a WP page without reloading the entire page.

This is useful when you want the user to interact with your blog without forcing him to reload the page. Or when you want some events to happen “automatically” without user interaction.

In this video I am changing the header at every second without reloading the page.

Also notice I am doing it from the default Kubrick theme with a fresh installation… I am not using any jQuery powered theme or plugin. Let’s see how can you make it. Read more

Create a dynamic content animated footer ad for your site in just 9 jQuery lines – 17 lines version

Some days ago I showed you how to create a dynamic content animated footer ad for your site in just 9 jQuery lines.

Now it’s time to write eight more lines to add two important features:

The first, as suggested in a comment, is allowing to set a delay before the ad appears.

The second is using a cookie to let the ad appear only once in a session. This means if you refresh the page, the ad won’t appear again, until you close the browser window and open it again.

This is what we’ll get… the ad appears after three seconds, and only once in a session.

Now let’s see the new lines added: Read more

Create a dynamic content animated footer ad for your site in just 9 jQuery lines

Have you ever seen those ads sliding up from the bottom of your page when you are visiting a website? We are going to create a simple one in just 9 jQuery lines.

Moreover, with this script you will need to add just one line to your site to display the ad.

Just to make it easier to understand, I am showing you for free the principles some “companies” sell at more than $40. According to such sites, ads like the one we are about to make should increase your conversions, have more readers sign up to your newsletter, and make you live in harmony. All in one-

Unfortunately, I am only showing you how to create such ad in a bunch of jQuery lines.

This is what we are going to make: Watch the example.

Ready for the recipe? Here we go:

A web page

Obviously, you need a webpage. Any webpage will fit, as long as you include

<div id="triqui_ad"></div>

just before the </body> tag.

jQuery

Then it’s time to add the power of jQuery to the page: insert this script between <head> and </head> Read more

Placing ads before a game loads with jQuery

When you run a Flash game portal or a Flash game official site, you normally place ads everywhere hoping someone will notice it.

Obviously the most interesting place where to place ads is already taken by the game itself, so we are going to create a javascript preloader that will show an ad for 15 seconds before the game starts loading.

In order to do it, you need jQuery and swfobject

Now let’s suppose the game has to be embedded in a div called the_game, just like I did in my BarBalance official site.

Just create the div this way:

<div id = "the_game">
	<h1>BarBalance game is loading</h1>
	<SCRIPT language="Javascript">
	var cpmstar_rnd=Math.round(Math.random()*999999);
	var cpmstar_pid=10016;
	document.writeln("<SCR"+"IPT language='Javascript' src='http://server.cpmstar.com/view.aspx?poolid="+cpmstar_pid+"&script=1&rnd="+cpmstar_rnd+"'></SCR"+"IPT>");
	</SCRIPT>
</div>

I used some SEO like an h1 tag and relevant content, and a CPMStar because it’s animated and we suppose won’t bore the player during the 15 seconds.

If you don’t have a CPMStar account, feel free to use my code :)

Then the jQuery part:

<script type="text/javascript">
	$(document).ready(function(){
		setTimeout(function(){
			$("#the_game").fadeOut(2000,function(){
				swfobject.embedSWF("barbalance.swf", "the_game", "640", "480", "9.0.0");
			}); 
		},15000);
	}); 
</script>

It’s just a 15000 milliseconds timeout fading out with a callback replacing the existing content with the Flash game.

Look at BarBalance official site to see it working.

I can’t wait to know this ad eCPM… did you already use something similar?

JQuery powered lights off effect

A couple of days ago a fan of my Facebook page asked me for a script to make the effect you see on this page.

Obviously simply reverse-engineering the script wouldn’t be enough for me, so I decided to create a lights off effect that make any content in a given div remain highlighted while the rest of the page fades to black (or to any color).

I used JQuery to manage the fade effect because it’s the best Javascript library available at the moment.

As a developer, I also tried MooTools and scriptaculous but believe me JQuery is some steps ahead.

Now let’s see this script: Read more

Next Page →