HTML5有許多功能特性可以把多媒體整合到網頁中。使用canvas元素可以在這個空白的畫板上填充線條，載入圖片文件，甚至動畫效果。

在這篇文章中，我將做一個滑動拼圖的游戲用來展示HTML5 canvas的圖片處理能力。在網頁中使用canvas標簽用來創建畫板。

<canvas width="480px" height="480px"></canvas> 

canvas的寬和高使用像素為單位。如果這兩個屬于沒有被指定，他們的默認的寬度為：300px，高度為：150px。在圖板畫圖需要使用canvas的上下文環境，通過腳本調用getContext()方法獲取上下文環境。W3C定義它為二維，更確切的說是2d。所以初始化上下文環境如果如下方法:

document.getElementById("vanvas").getContext("2d"); 

下一步要做的是在畫板上顯示圖片，API只提供drawImage()一種方法。但是有三種調用方式。最常用的是傳入三個參數：image對象，以及圖片相對于畫板的x,y坐標。

drawImage(image, x, y); 

還可以加入兩個參數用于設置圖片的寬和高

drawImage(image, x, y, width, height); 

最復雜的drawImage函數有9個參數，按順序分別為：圖片對象，圖片x坐標，圖片y坐標，圖片寬，圖片高，目標x坐標，目標y坐標，目標寬和目標高。后四個參數主要是為了截取原圖部分用來顯示，比如局部放大、剪切等。以上就是圖像處理的方法，讓我們做一個練習。

<div id="slider"> 
  <form>      
    <label>Easy</label> 
    <input type="range" id="scale" value="4" min="3" max="5" step="1"> 
    <label>Hard</label> 
  </form> 
<br> 
</div> 
<div id="main" class="main"> 
<canvas id="puzzle" width="480px" height="480px"></canvas> 
</div> 

上面的DIV包括了另一個HTML5標簽：range input，這個標簽可以讓用戶拖放滑塊選擇一個數值。回頭我們再說在拼圖中如何與range input交互。到目前為止ie和firefox并不支持這個標簽。

現在就像我上面說過，想要在canvas上繪圖，我們需要context。

var context = document.getElementById("puzzle").getContext("2d"); 

對了我們還需要一個圖片，使用例子里自帶的，或者找一個和canvas相同大小的圖片都行。

var img = new Image();  
img.src = 'http://www.brucealderman.info/Images/dimetrodon.jpg';  
img.addEventListener('load', drawTiles, false); 

加入這個事件是確保圖片完成加載后，再把圖片放入canvas中。下面我們通過range input設置拼圖的數量，數據范圍從3到5(幾行幾列)。

var boardSize = document.getElementById('puzzle').width;  
var tileCount = document.getElementById('scale').value; 

有了上面兩個數值就可以計算一個拼圖的大小了

var tileSize = boardSize / tileCount; 

OK我們開始創建畫板

var boardParts = new Object;  
setBoard(); 

setBoard()的作用是初始化看板，要模擬顯示這個畫板，我們使用一個二維數組。不過用JavaScript創建這樣數組的過程不是很優雅，我們先定義一個平面數組，每個數組再定義一個數組。這個拼圖游戲，每一個元素都是一個對象，它帶有x和y坐標記錄所在的網格位置。因此每個對象有兩個坐標，***個坐標是數組坐標，表示它在畫板的位置，另外的坐標是對象的x,y屬性，它記錄著拼圖圖片的位置。當這兩個坐標相同了就說明位置正確。

為了達到目的，我們在初始化的時候把它們的位置互換。這樣拼圖就不在正確的位置了。

function setBoard() {  
    boardParts = new Array(tileCount);  
    for (var i = 0; i < tileCount; ++i) {  
     boardParts[i] = new Array(tileCount);  
     for (var j = 0; j < tileCount; ++j) {  
      boardParts[i][j] = new Object;  
      boardParts[i][j].x = (tileCount - 1) - i;  
      boardParts[i][j].y = (tileCount - 1) - j;  
     }  
}  
    emptyLoc.x = boardParts[tileCount - 1][tileCount - 1].x;  
    emptyLoc.y = boardParts[tileCount - 1][tileCount - 1].y;  
    solved = false;  
} 

***三個變量我們還沒有定義

我們必須追蹤空白拼圖的位置還要記錄用戶點擊的位置

var clickLoc = new Object;  
clickLoc.x = 0;  
clickLoc.y = 0;  
var   
emptyLoc = new Object;  
emptyLoc.x = 0;  
emptyLoc.y = 0; 

***這個變量是指拼圖是否完成

var solved = false; 

所有的拼圖都找到正確的位置后，設置它為true。

現在我們需要一些和解決拼圖相關的方法

首先為rang input定義觸發事件，當它改變了，我們要重新計算拼圖的數量和大小

document.getElementById('scale').onchange = function() {  
      
tileCount = this.value;  
    tileSize = boardSize /   
tileCount;  
    setBoard();  
      
drawTiles();  
}; 

還要追蹤鼠標經過的拼圖以及哪個拼圖被點擊

document.getElementById('puzzle').onmousemove = function(e)   
{  
    clickLoc.x = Math.floor((e.pageX - this.offsetLeft) /   
tileSize);  
    clickLoc.y = Math.floor((e.pageY -   
this.offsetTop) / tileSize);  
};  
document.getElementById('puzzle').onclick   
= function() {  
    if (distance(clickLoc.x, clickLoc.y,   
emptyLoc.x, emptyLoc.y) == 1) {  
          
slideTile(emptyLoc, clickLoc);  
          
drawTiles();  
    }  
    if (solved)   
{  
        alert("You solved   
it!");  
    }  
}; 

有一些瀏覽器會在重畫畫板之前彈出對話框，為了防止它的發生，一定要用延遲。

if (solved) {  
    setTimeout(function() {alert("You solved   
it!");}, 500);  
} 

當一個拼圖被點擊時，我們要知道它的四周是否可以移動。判斷的方法是當前位置到空白位置的總距離為1時就可以移動。

簡單點說就是x相同要判斷y的距離是否為1，y相同要判斷x的距離是否為1。

function distance(x1, y1, x2, y2) {  
    return Math.abs(x1 -   
x2) + Math.abs(y1 - y2);  
} 

移動拼圖的做法是，我們復制被點擊拼圖的坐標到空位置。然后把點擊位置設置成空白坐標。

function slideTile(toLoc, fromLoc) {  
    if (!solved)   
{  
        boardParts[toLoc.x][toLoc.y].x =   
boardParts[fromLoc.x][fromLoc.y].x;  
          
boardParts[toLoc.x][toLoc.y].y =   
boardParts[fromLoc.x][fromLoc.y].y;  
          
boardParts[fromLoc.x][fromLoc.y].x = tileCount -   
1;  
          
boardParts[fromLoc.x][fromLoc.y].y = tileCount -   
1;  
        toLoc.x =   
fromLoc.x;  
        toLoc.y =   
fromLoc.y;  
          
checkSolved();  
    }  
} 

一旦拼圖移動了，我們還要檢查一下拼圖是否全部在正確的位置。

function checkSolved() {  
    var flag =   
true;  
    for (var i = 0; i < tileCount; ++i)   
{  
        for (var j = 0; j <   
tileCount; ++j)   
{  
            if   
(boardParts[i][j].x != i || boardParts[i][j].y != j)   
{  
                  
flag =   
false;  
              
}  
        }  
      
}  
    solved = flag;  
} 

如果有一個拼圖不正確函數就會返回false,否則返回true。

***，重繪被點擊的拼圖到新的位置。

function drawTiles() {  
    context.clearRect ( 0 , 0 , boardSize , boardSize );  
    for (var i = 0; i < tileCount; ++i) {  
        for (var j = 0; j < tileCount; ++j) {  
            var x = boardParts[i][j].x;  
     var y = boardParts[i][j].y;  
            if(i != emptyLoc.x || j != emptyLoc.y || solved == true) {  
                context.drawImage(img, x * tileSize, y * tileSize, tileSize, tileSize,  
                     i * tileSize, j * tileSize, tileSize, tileSize);  
            }  
        }  
    }  
} 

當畫拼圖時，這個函數可以防止填充畫板時匹配空的位置，因為在游戲中用戶可以選擇不同的難度。

原文鏈接：http://www.html5cn.org/article-2655-1.html

【編輯推薦】

1. HTML 5實現淘寶語音搜索功能
2. 別怕！我們還有HTML 5和CSS3
3. 難以置信的HTML 5和JS實驗
4. HTML 5做出讓你意想不到的幾件事
5. 用HTML***udio API開發游戲音樂