HTML 5的一個(gè)滑動(dòng)拼圖游戲
HTML5有許多功能特性可以把多媒體整合到網(wǎng)頁(yè)中。使用canvas元素可以在這個(gè)空白的畫(huà)板上填充線(xiàn)條，載入圖片文件，甚至動(dòng)畫(huà)效果。
在這篇文章中，我將做一個(gè)滑動(dòng)拼圖的游戲用來(lái)展示HTML5 canvas的圖片處理能力。在網(wǎng)頁(yè)中使用canvas標(biāo)簽用來(lái)創(chuàng)建畫(huà)板。
- <canvas width="480px" height="480px"></canvas>
canvas的寬和高使用像素為單位。如果這兩個(gè)屬于沒(méi)有被指定，他們的默認(rèn)的寬度為：300px，高度為：150px。在圖板畫(huà)圖需要使用canvas的上下文環(huán)境，通過(guò)腳本調(diào)用getContext()方法獲取上下文環(huán)境。W3C定義它為二維，更確切的說(shuō)是2d。所以初始化上下文環(huán)境如果如下方法:
- document.getElementById("vanvas").getContext("2d");
下一步要做的是在畫(huà)板上顯示圖片，API只提供drawImage()一種方法。但是有三種調(diào)用方式。最常用的是傳入三個(gè)參數(shù)：image對(duì)象，以及圖片相對(duì)于畫(huà)板的x,y坐標(biāo)。
- drawImage(image, x, y);
還可以加入兩個(gè)參數(shù)用于設(shè)置圖片的寬和高
- drawImage(image, x, y, width, height);
最復(fù)雜的drawImage函數(shù)有9個(gè)參數(shù)，按順序分別為：圖片對(duì)象，圖片x坐標(biāo)，圖片y坐標(biāo)，圖片寬，圖片高，目標(biāo)x坐標(biāo)，目標(biāo)y坐標(biāo)，目標(biāo)寬和目標(biāo)高。后四個(gè)參數(shù)主要是為了截取原圖部分用來(lái)顯示，比如局部放大、剪切等。以上就是圖像處理的方法，讓我們做一個(gè)練習(xí)。
- <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包括了另一個(gè)HTML5標(biāo)簽：range input，這個(gè)標(biāo)簽可以讓用戶(hù)拖放滑塊選擇一個(gè)數(shù)值?；仡^我們?cè)僬f(shuō)在拼圖中如何與range input交互。到目前為止ie和firefox并不支持這個(gè)標(biāo)簽。
現(xiàn)在就像我上面說(shuō)過(guò)，想要在canvas上繪圖，我們需要context。
- var context = document.getElementById("puzzle").getContext("2d");
對(duì)了我們還需要一個(gè)圖片，使用例子里自帶的，或者找一個(gè)和canvas相同大小的圖片都行。
- var img = new Image();
- img.src = 'http://www.brucealderman.info/Images/dimetrodon.jpg';
- img.addEventListener('load', drawTiles, false);
加入這個(gè)事件是確保圖片完成加載后，再把圖片放入canvas中。下面我們通過(guò)range input設(shè)置拼圖的數(shù)量，數(shù)據(jù)范圍從3到5(幾行幾列)。
- var boardSize = document.getElementById('puzzle').width;
- var tileCount = document.getElementById('scale').value;
有了上面兩個(gè)數(shù)值就可以計(jì)算一個(gè)拼圖的大小了
- var tileSize = boardSize / tileCount;
OK我們開(kāi)始創(chuàng)建畫(huà)板
- var boardParts = new Object;
- setBoard();
setBoard()的作用是初始化看板，要模擬顯示這個(gè)畫(huà)板，我們使用一個(gè)二維數(shù)組。不過(guò)用JavaScript創(chuàng)建這樣數(shù)組的過(guò)程不是很優(yōu)雅，我們先定義一個(gè)平面數(shù)組，每個(gè)數(shù)組再定義一個(gè)數(shù)組。這個(gè)拼圖游戲，每一個(gè)元素都是一個(gè)對(duì)象，它帶有x和y坐標(biāo)記錄所在的網(wǎng)格位置。因此每個(gè)對(duì)象有兩個(gè)坐標(biāo)，***個(gè)坐標(biāo)是數(shù)組坐標(biāo)，表示它在畫(huà)板的位置，另外的坐標(biāo)是對(duì)象的x,y屬性，它記錄著拼圖圖片的位置。當(dāng)這兩個(gè)坐標(biāo)相同了就說(shuō)明位置正確。
為了達(dá)到目的，我們?cè)诔跏蓟臅r(shí)候把它們的位置互換。這樣拼圖就不在正確的位置了。
- 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;
- }
***三個(gè)變量我們還沒(méi)有定義
我們必須追蹤空白拼圖的位置還要記錄用戶(hù)點(diǎn)擊的位置
- var clickLoc = new Object;
- clickLoc.x = 0;
- clickLoc.y = 0;
- var
- emptyLoc = new Object;
- emptyLoc.x = 0;
- emptyLoc.y = 0;
***這個(gè)變量是指拼圖是否完成
- 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)過(guò)的拼圖以及哪個(gè)拼圖被點(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!");
- }
- };
有一些瀏覽器會(huì)在重畫(huà)畫(huà)板之前彈出對(duì)話(huà)框，為了防止它的發(fā)生，一定要用延遲。
- if (solved) {
- setTimeout(function() {alert("You solved
- it!");}, 500);
- }
當(dāng)一個(gè)拼圖被點(diǎn)擊時(shí)，我們要知道它的四周是否可以移動(dòng)。判斷的方法是當(dāng)前位置到空白位置的總距離為1時(shí)就可以移動(dòng)。
簡(jiǎn)單點(diǎn)說(shuō)就是x相同要判斷y的距離是否為1，y相同要判斷x的距離是否為1。
- function distance(x1, y1, x2, y2) {
- return Math.abs(x1 -
- x2) + Math.abs(y1 - y2);
- }
移動(dòng)拼圖的做法是，我們復(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();
- }
- }
一旦拼圖移動(dòng)了，我們還要檢查一下拼圖是否全部在正確的位置。
- 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;
- }
如果有一個(gè)拼圖不正確函數(shù)就會(huì)返回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)畫(huà)拼圖時(shí)，這個(gè)函數(shù)可以防止填充畫(huà)板時(shí)匹配空的位置，因?yàn)樵谟螒蛑杏脩?hù)可以選擇不同的難度。
原文鏈接：http://www.html5cn.org/article-2655-1.html
【編輯推薦】
