gifplayer jquery plugin Updated

I updated the gifplayer jquery plugin to add new features:

1. Video support

Now you can use video formats (mp4, webm) instead of gif images, to reduce the loading time.
Setup the ‘mode’ option to ‘video’ and the ‘webm’ and/or ‘mp4′ options to the  desired video file. Or just post a video files with the same filename of the preview image.

2. ‘playOn’ option

Now you can decide which event triggers the gif/video to be played. It could be click, mouseover or ‘auto’, which means the animation will be played when the preview image is in the visible viewport.

3. ‘wait’ option

Now you can decide whether you want the animation to be fully loaded before trying to play, or play instantly. That last option could mean the first loop could look very slow for crappy internet connections.

4. bower support

The plugin was added to the bower repo as jquery.gifplayer.
You can use ‘bower install jquery.gifplayer’ to get it in your project.

5. Bug fixes

Fixed some bugs reported by the users.

 

Enjoy and don’t forget to leave me a star in Github if you like it

Creating a multiplayer game with node.js

So, I decided to put into practice what I’ve been learning of nodejs, and what better way than building something. That’s how I started coding this tank battle game.

 

The interface

The page was built as a simple bootstrap template. The players choose from one of three tanks and write a name. To join the game you tell a friend to open the same url.

In this game you control the tank using WASD keys and the mouse to aim and shoot, until you destroy other players tanks.

Tank selection

 Tank explosionThe code

There are two main parts for this game’s code: the server and the client.

The server listens to incoming connections and events using socket.io. The client emits events to the server, for example when a new player joins the game.

 

 

 

The data for the bullets and tanks is managed by the server, which notifies all the players when a tank gets hit, or dies. The DOM is refreshed by each client, using the data received from the server. The data synchronization and DOM refreshing occurs periodically, using javascript ‘setInterval’ function.  

 

 

Feel free to contribute or fork this project on Github