日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

 
 
 

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

 
 
 

  
  
  
drawImage(image, x, y);
 
 
 

 
 
 

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

 
 
 

  
  
  

  
  
  
  
     
  
  
  
    Easy
  
  
  
    
  
  
  
    Hard
  
  
  
  
  
  
  


  
  
  

上面的DIV包括了另一個(gè)HTML5標(biāo)簽：range input，這個(gè)標(biāo)簽可以讓用戶拖放滑塊選擇一個(gè)數(shù)值?；仡^我們?cè)僬f在拼圖中如何與range input交互。到目前為止ie和firefox并不支持這個(gè)標(biāo)簽。

現(xiàn)在就像我上面說過，想要在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中。下面我們通過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我們開始創(chuàng)建畫板

 
 
 

  
  
  
var boardParts = new Object; 
  
  
  
setBoard();
 
 
 

setBoard()的作用是初始化看板，要模擬顯示這個(gè)畫板，我們使用一個(gè)二維數(shù)組。不過用JavaScript創(chuàng)建這樣數(shù)組的過程不是很優(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)，表示它在畫板的位置，另外的坐標(biāo)是對(duì)象的x,y屬性，它記錄著拼圖圖片的位置。當(dāng)這兩個(gè)坐標(biāo)相同了就說明位置正確。

為了達(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è)變量我們還沒有定義

我們必須追蹤空白拼圖的位置還要記錄用戶點(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)過的拼圖以及哪個(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ì)在重畫畫板之前彈出對(duì)話框，為了防止它的發(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)說就是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)畫拼圖時(shí)，這個(gè)函數(shù)可以防止填充畫板時(shí)匹配空的位置，因?yàn)樵谟螒蛑杏脩艨梢赃x擇不同的難度。