Tutorials‎ > ‎

Sliding video puzzle using HTML5 and Jquery

posted Dec 23, 2011, 2:43 AM by Sofia _   [ updated Aug 15, 2016, 11:36 PM by Surya Wang ]

In this article, I will teach how to make a simple game using video and canvas HTML5. The video is a new tag in html5, we can use it to play video without using any other plugin. And the canvas, it is also a new tag in html5, its allow us to draw graphics with javascript inside the canvas. In the html page, we just need to add canvas and video tag. And also a button to use to random the puzzle.
<canvas id="c" style="border:1px solid black" width="240" height="240"></canvas> <video id="v" src="Johann-Sebastian-Bach-Air-On-The-G-String-Piano-Cover.ogg" autoplay="autoplay"
loop="loop" controls="controls"></video> <br /> <button id="btn">Random</button>

And now draw at the canvas. In the canvas, we can draw a rectangle, an eclipse, a picture and here’s the amazing things about html5, we can draw the graphics from the video element so while the video is playing, we are able to draw the graphics from it and it will seem move like a video. We not only can draw it, we can also crop it into certain size.

Here is the sample code,
var c = document.getElementById("c");
var v = document.getElementById("v");
var con = c.getContext("2d");
con.drawImage(video,videoX,videoY,videoW,videoH,destX,destY,destW,destH);

In the javascript, first I need to declare what’s the variable I need to use, first we need to know that what size you need of each part of the puzzle, how many column and rows you need. For example, I am using 3 columns and 3 rows, so that is 9 part of puzzle. We need to store the source position and drawing position. Its count to you how you want to store them.

Here is my variable,

var con;
var size = 80;
var arrX = new Array();
var arrY = new Array();
var arrSourceX = new Array();
var arrSourceY = new Array();
var width = 3;
var height = 3;
var c;
var now = 0;
var emptyX,emptyY;
var cLeft,cTop;

And then init function when my site is loaded. In this function I need to declare each part position and the source graphic position using looping. I also define an empty position for the empty part. In here, I also explain some event handler for the canvas and the random button. I can rand function for 600 to random the puzzle. Last, I need to set interval for draw function to draw it over and over again.

function init()
{
    cLeft = $("#c").offset().left;
    cTop =  $("#c").offset().top;
 
    c = document.getElementById("c");
    var v = document.getElementById("v");
    con = c.getContext("2d");
    var k = 0;
    emptyX = (width-1)*size;
    emptyY = (height-1)*size;
 
    for(i=0;i<width;i++)
    {
        for(j=0;j<height;j++)
        {
            arrX[k] = i*size;
            arrY[k] = j*size;
            arrSourceX[k] = i*size;
            arrSourceY[k] = j*size;
            k++;
        }
    }
 
    /* event handler */
    /* ……………………………………*/
    /* event handler */        
 
    for (x = 0; x < 600; x++) {
        rand(Math.floor(Math.random() * (width * height - 1)));
    }          
 
    setInterval(draw,100);
}

This is the code about the event handler. When in the canvas if it occure an mousemove event, just looping as many as the puzzle part and then set now to the selected part. And if the canvas is click, it will call the rand function to change the position of the puzzle part and check whether its already win or not. And when the button is click to rand the puzzle.

/* event handler */                   
 
$("#c").mousemove(function(e){
    for(i=0;i<width*height-1;i++)
    {
        if(e.pageX-cLeft > arrX[i] &&
           e.pageX-cLeft < arrX[i] + size &&
           e.pageY-cTop > arrY[i] &&
           e.pageY-cTop < arrY[i] + size)
        {
            now = i;
        }
    }
});
 
$("#c").click(function(e){
     rand(now);
     check();
});
 
$("#btn").click(function(e){
    for(x=0;x<600;x++){
        rand(Math.floor(Math.random()*(width*height-1)));
    }
});
/* event handler */  

This is the check function to check whether the puzzle already finish or not. If it is already finish, it will alert “You win”.

function check() {
    var flag = true;
    for (var i = 0; i < ((width * height)-1); i++) {
        if (arrSourceX[i] != arrX[i] || arrSourceY[i] != arrY[i]) {
            flag = false;
        }
    }
    if (flag == true &&
        emptyX == (width-1)*size &&
        emptyY == (height-1)*size) {
        alert("You win ^^");
    }
}

This is the rand function, its better called change function to change the position of empty part with the selected part which passing by parameter. It will also validation whether the selected part is allowed to swith with the empty one or not.

function rand(a)
{
    if( (arrX[a] == emptyX        && arrY[a] + size == emptyY) ||
        (arrX[a] == emptyX        && arrY[a] - size == emptyY) ||
        (arrX[a] + size == emptyX && arrY[a] == emptyY) ||
        (arrX[a] - size == emptyX && arrY[a] == emptyY))
    {
        var tempX,tempY;
        tempX = emptyX;
        tempY = emptyY;
        emptyX = arrX[a];
        emptyY = arrY[a];
        arrX[a] = tempX;
        arrY[a] = tempY;
    }
}

This is the draw function to draw the puzzle and the box that is mouseover. It will draw all the puzzle part and draw where rectangle border where the mouseover.

function draw()
{
    con.clearRect(0, 0, c.width, c.height);
    for(i=0;i<width*height;i++) {
        if(arrSourceX[i] !=(width-1)*size || arrSourceY[i] != (height-1)*size)
        {
            con.drawImage(v,arrSourceX[i],arrSourceY[i],size,size,arrX[i],arrY[i],size,size);
        }
    }
 
    con.strokeStyle = "yellow";
    con.beginPath();
    con.lineWidth = 3;
    con.moveTo(arrX[now],arrY[now]);
    con.lineTo(arrX[now]+size,arrY[now]);
    con.lineTo(arrX[now]+size,arrY[now]+size);
    con.lineTo(arrX[now],arrY[now]+size);
    con.closePath();
    con.stroke();
}


ċ
puzzle.zip
(1k)
Sofia _,
Dec 23, 2011, 2:51 AM