最近2018中文字幕在日韩欧美国产成人片_国产日韩精品一区二区在线_在线观看成年美女黄网色视频_国产精品一区三区五区_国产精彩刺激乱对白_看黄色黄大色黄片免费_人人超碰自拍cao_国产高清av在线_亚洲精品电影av_日韩美女尤物视频网站

 
 
 

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

 
 
 

  
  
  
drawImage(image, x, y);
 
 
 

 
 
 

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

 
 
 

  
  
  

  
  
  
  
     
  
  
  
    Easy
  
  
  
    
  
  
  
    Hard
  
  
  
  
  
  
  


  
  
  

上面的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ù)值就可以計算一個拼圖的大小了

 
 
 

  
  
  
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; 
  
  
  
}
 
 
 

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

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

 
 
 

  
  
  
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)它改變了，我們要重新計算拼圖的數(shù)量和大小

 
 
 

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

還要追蹤鼠標(biāo)經(jīng)過的拼圖以及哪個拼圖被點擊

 
 
 

  
  
  
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)一個拼圖被點擊時，我們要知道它的四周是否可以移動。判斷的方法是當(dāng)前位置到空白位置的總距離為1時就可以移動。

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

 
 
 

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

移動拼圖的做法是，我們復(fù)制被點擊拼圖的坐標(biāo)到空位置。然后把點擊位置設(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。

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

 
 
 

  
  
  
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ù)可以防止填充畫板時匹配空的位置，因為在游戲中用戶可以選擇不同的難度。