imgpuzzle A Javascript image puzzle game with customized images.

  1. Requirements
  2. Usage
  3. Customization
  4. Resources

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.

![puzzle1]( http://wp.nachionline.com/wp-content/uploads/2014/02/img_puzzle1.png "Puzzle 1") puzzle2

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

1 0
3 followers
633 downloads
Yii Version: Unknown
License: BSD-2-Clause
Category: Others
Developed by: nachi
Created on: Feb 26, 2014
Last updated: 4 years ago

Downloads

show all

Related Extensions