New on DHTMLGoodies.com:

DHTML Chess Wordpress Plugin (Beta) . Participate in the beta testing of the DHTML Chess for WordPress plugin, and receive a free Commercial License worth USD99.

DHTML version of the famous Blocked game

Demo | Demo - rusty metal

Bookmark and Share

Overview

This is a javascript game where the goal is to move the highlighted block to the "door" to the right. You can either play it here, or you can download it and implement it on your own website.

Licensing

This script is free and licensed under LGPL. Commercial licenses are also available.

Demo

moves
Best: moves
Level:
Puzzle: of

You play by using your mouse to drag the bricks. Your goal is to move the blue brick to the "door".

Click here to open a larger version of this game in new window.

Download

Files in package:

  • js/dg-blocked.js - Main javascript file for the widget
  • js/dg-blocked-debug.js - JS file for creation of new puzzles
  • js/external/* - Mootools library used by the script
  • blocked-controller.php - PHP controller for the Ajax requests
  • game-blocked.class.php - PHP class for the game
  • dg-blocked.sql - PHP class for the game
  • css/ - CSS files
  • images/ - image files

Configuration

Database

Open dg-blocked.sql and execute the MySQL queries listed there.

Changes to game-blocked.class.php

The only thing you need to do is to make sure that this files is able to connect to your MySQL database

Web client

You can use the demo.html file as a template for your own version of the blocked game

The DG.Blocked Javascript class

Public methods:

  • getFirstPuzzle : Navigates to the first puzzle
  • getPreviousPuzzle : Navigates to the previous puzzle
  • getNextPuzzle : Navigates to the next puzzle
  • getLastPuzzle : Navigates to the last/final puzzle
  • reset : Resets to startup position

Constructor arguments

The DG.Blocked constructor accepts the following arguments:

  • el : Where to insert the Blocked game module, a string(id) or a direct reference to an element
  • elLevel: Element where level of difficulty will be displayed
  • elCurrentPuzzleNumber: Element where current puzzle number will be displayed
  • elNumberOfPuzzles: Element where number of available puzzles will be displayed
  • elSolved: Element to toggle display on/off for solved/unsolved puzzles
  • elMoves: Element where number of moves is displayed
  • elRecord: Element where the record number of moves for current puzzle is displayed
  • listeners: Object describing custom events. Currently,the only supported events is loadpuzzle which will be executed when a puzzle has been solved, code example:
    listeners : { 'loadpuzzle': myFunction }
    Index of current puzzle will be passed to the defined function
  • squareConfig: Use this in case you want to override the default configuration of number of squares and square size. Default is:
    squares : {
    x : 6, // number of squares (x-axis)
    y : 6, // number of squares (y-axis)
    size : 50, // size of squares in pixels
    cls : 'dg-square', // css class to assign to all bricks
    margin : 1 // margin between bricks
    }
  • puzzleIndex: Index of puzzle to show

Create new puzzles

All puzzles are stored as json strings inside game-blocked.class.php. If you want to add new puzzles, you can add items to this array.

New puzzles can be created easily from demo-puzzle-maker.html. This feature uses the firebug console, so you should use Firefox with the Firebug add on for this.

Please remember that this script is LGPL, so in case you create new puzzles, they should be available for the open source community unless you purchase a commercial license

Comments

Vedhagiri S
i need to connect with oracle database, pls provide the necessary changes that i need to make..
Vedhagiri S at 12:14PM, 2011/08/30.
nishantha
good
nishantha at 09:56PM, 2011/11/02.
Romeo
Hi. I tried to run this script but it won't load the levels, and the javascript console shows 2 errors.


Uncaught SyntaxError: Unexpected identifier mootools-1.2.4-core-yc.js:269
Uncaught SyntaxError: Unexpected identifier mootools-1.2.4-core-yc.js:269

Can you help me? I really need this working.
Romeo at 07:44AM, 2012/05/30.
saravanakumar
this is greate idea
saravanakumar at 10:29PM, 2012/06/18.
Anonymous
GREAT SCRIPT..got it up and running quickly.
hovever, got one problem
how this record moves are displayed? I could not find it in the json data !
Anonymous at 12:42PM, 2012/08/11.
bob
what the fuck is this?
bob at 10:15PM, 2014/11/16.

Post your comment

Don't have an avatar? Create one at Gravatar.com.

Confirmation code:

Go to cbolson.com


About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2017 dhtmlgoodies.com