imgpuzzle

A Javascript image puzzle game with customized images.
3 followers

You can also modify number of columns and rows to get more or fewer puzzle pieces.

Requirements

It will work good for version more than YII 1.0.

puzzle1puzzle2

Usage

Step 1

Download the imagepuzzle.zip and move it in your application/protected/extension/ folder.

Step2

Add the following line on the page where you want the game

<?php 
$this->widget('application.extensions.imagepuzzle.Puzzle', 
array('columns'=>3, //columns
'rows'=>4, // rows 
'images'=>array('image1.jpg',
'image2.jpg','image3.jpg','image4.jpg',
'image5.jpg','image6.jpg','image7.jpg',
'image8.jpg','image9.jpg') //images shown in the game
)); ?>

Customization

  • The images in the game can be changed. First you need to move your images in the imagepuzzle/assets/images/ folder and then need to give that image as a value. For example you have moved sample.jpg to the assets image folder you need to give in the code.
<?php 
$this->widget('application.extensions.imagepuzzle.Puzzle', 
array('columns'=>3, //columns
'rows'=>4, // rows 
'images'=>array('sample.jpg') //Customized image
)); ?>
  • The rows and columns decides about how many cells the image need to split. We can also change that in the code.
<?php 
$this->widget('application.extensions.imagepuzzle.Puzzle', 
array('columns'=>5, // Customized columns
'rows'=>3, // Customized rows 
'images'=>array('sample.jpg') //Customized image
)); ?>

Resources

Total 2 comments

#17100 report it
nachi at 2014/05/03 04:11am
@Neminath

Thanks :) . Also like to hear if you need any updates in this ?

#17091 report it
Neminath at 2014/05/02 04:14am
nice

ya its good...

Leave a comment

Please to leave your comment.

Create extension