在這篇文章中，我將做一個滑動拼圖的游戲用來展示HTML5 canvas的圖片處理能力。
在網(wǎng)頁中使用canvas標(biāo)簽用來創(chuàng)建畫板。
canvas的寬和高使用像素為單位。如果這兩個屬于沒有被指定，他們的默認(rèn)的寬度為：300px，高度為：150px。在圖板畫圖需要使用canvas的上下文環(huán)境，通過腳本調(diào)用getContext()方法獲取上下文環(huán)境。W3C定義它為二維，更確切的說是2d。所以初始化上下文環(huán)境如果如下方法:
- document.getElementById("vanvas").getContext("2d");
下一步要做的是在畫板上顯示圖片，API只提供drawImage()一種方法。但是有三種調(diào)用方式。最常用的是傳入三個參數(shù)：image對象，以及圖片相對于畫板的x,y坐標(biāo)。
- drawImage(image, x, y);
還可以加入兩個參數(shù)用于設(shè)置圖片的寬和高
- drawImage(image, x, y, width, height);
最復(fù)雜的drawImage函數(shù)有9個參數(shù)，按順序分別為：圖片對象，圖片x坐標(biāo)，圖片y坐標(biāo)，圖片寬，圖片高，目標(biāo)x坐標(biāo)，目標(biāo)y坐標(biāo)，目標(biāo)寬和目標(biāo)高。后四個參數(shù)主要是為了截取原圖部分用來顯示，比如局部放大、剪切等。以上就是圖像處理的方法，讓我們做一個練習(xí)。
上面的DIV包括了另一個HTML5標(biāo)簽：range input，這個標(biāo)簽可以讓用戶拖放滑塊選擇一個數(shù)值。回頭我們再說在拼圖中如何與range input交互。到目前為止ie和firefox并不支持這個標(biāo)簽。
現(xiàn)在就像我上面說過，想要在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設(shè)置拼圖的數(shù)量，數(shù)據(jù)范圍從3到5(幾行幾列)。
- var boardSize = document.getElementById('puzzle').width;
- var tileCount = document.getElementById('scale').value;
有了上面兩個數(shù)值就可以計(jì)算一個拼圖的大小了
- var tileSize = boardSize / tileCount;
OK我們開始創(chuàng)建畫板
- var boardParts = new Object;
- setBoard();
setBoard()的作用是初始化看板，要模擬顯示這個畫板，我們使用一個二維數(shù)組。不過用JavaScript創(chuàng)建這樣數(shù)組的過程不是很優(yōu)雅，我們先定義一個平面數(shù)組，每個數(shù)組再定義一個數(shù)組。這個拼圖游戲，每一個元素都是一個對象，它帶有x和y坐標(biāo)記錄所在的網(wǎng)格位置。因此每個對象有兩個坐標(biāo)，第一個坐標(biāo)是數(shù)組坐標(biāo)，表示它在畫板的位置，另外的坐標(biāo)是對象的x,y屬性，它記錄著拼圖圖片的位置。當(dāng)這兩個坐標(biāo)相同了就說明位置正確。
為了達(dá)到目的，我們在初始化的時候把它們的位置互換。這樣拼圖就不在正確的位置了。
- 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;
- }
最后三個變量我們還沒有定義
我們必須追蹤空白拼圖的位置還要記錄用戶點(diǎn)擊的位置
- var clickLoc = new Object;
- clickLoc.x = 0;
- clickLoc.y = 0;
- var
- emptyLoc = new Object;
- emptyLoc.x = 0;
- emptyLoc.y = 0;
最后這個變量是指拼圖是否完成
- var solved = false;
所有的拼圖都找到正確的位置后，設(shè)置它為true。
現(xiàn)在我們需要一些和解決拼圖相關(guān)的方法
首先為rang input定義觸發(fā)事件，當(dāng)它改變了，我們要重新計(jì)算拼圖的數(shù)量和大小
- document.getElementById('scale').onchange = function() {
-
- tileCount = this.value;
- tileSize = boardSize /
- tileCount;
- setBoard();
-
- drawTiles();
- };
還要追蹤鼠標(biāo)經(jīng)過的拼圖以及哪個拼圖被點(diǎn)擊
- 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!");
- }
- };
有一些瀏覽器會在重畫畫板之前彈出對話框，為了防止它的發(fā)生，一定要用延遲。
- if (solved) {
- setTimeout(function() {alert("You solved
- it!");}, 500);
- }
當(dāng)一個拼圖被點(diǎn)擊時，我們要知道它的四周是否可以移動。判斷的方法是當(dāng)前位置到空白位置的總距離為1時就可以移動。
簡單點(diǎn)說就是x相同要判斷y的距離是否為1，y相同要判斷x的距離是否為1。
- function distance(x1, y1, x2, y2) {
- return Math.abs(x1 -
- x2) + Math.abs(y1 - y2);
- }
移動拼圖的做法是，我們復(fù)制被點(diǎn)擊拼圖的坐標(biāo)到空位置。然后把點(diǎn)擊位置設(shè)置成空白坐標(biāo)。
- 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;
- }
如果有一個拼圖不正確函數(shù)就會返回false,否則返回true。
最后，重繪被點(diǎn)擊的拼圖到新的位置。
- 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);
- }
- }
- }
- }
當(dāng)畫拼圖時，這個函數(shù)可以防止填充畫板時匹配空的位置，因?yàn)樵谟螒蛑杏脩艨梢赃x擇不同的難度。
轉(zhuǎn)自天地會
【網(wǎng)站聲明】本站除付費(fèi)源碼經(jīng)過測試外，其他素材未做測試，不保證完整性，網(wǎng)站上部分源碼僅限學(xué)習(xí)交流，請勿用于商業(yè)用途。如損害你的權(quán)益請聯(lián)系客服QQ：2655101040 給予處理，謝謝支持。