近年來，隨著HTML5的普及，拼圖游戲也成為了很多人閑暇時喜歡玩的游戲之一。而在HTML5中，拼圖游戲也可以用代碼實現(xiàn)。下面我們就來學習一下HTML5拼圖代碼的實現(xiàn)方法。
<!DOCTYPE html>
<html>
<head>
<title>HTML5拼圖游戲</title>
</head>
<body>
<canvas id="gameCanvas"></canvas>
<script>
//畫布與圖像相關參數(shù)
var canvas = document.getElementById("gameCanvas");
var ctx = canvas.getContext("2d");
var img = new Image();
img.src = "image.jpg";
var rows = 3;
var cols = 3;
var imgWidth = img.width / cols;
var imgHeight = img.height / rows;
//記錄圖像位置
var posArr = [];
for(var i=0; i<rows; i++){
for(var j=0; j<cols; j++){
var pos = {
x: j * imgWidth,
y: i * imgHeight
};
posArr.push(pos);
}
}
//隨機打亂圖像位置
posArr.sort(function(){
return Math.random() - 0.5;
});
//繪制圖像
function draw(){
ctx.clearRect(0, 0, canvas.width, canvas.height);
for(var i=0; i<posArr.length; i++){
var pos = posArr[i];
var x = imgWidth * i % (imgWidth * cols);
var y = imgHeight * Math.floor(i / cols);
ctx.drawImage(img, pos.x, pos.y, imgWidth, imgHeight, x, y, imgWidth, imgHeight);
}
}
//交換圖像位置
function exchange(ev){
var mouseX = ev.clientX - canvas.getBoundingClientRect().left;
var mouseY = ev.clientY - canvas.getBoundingClientRect().top;
var clickedIndex = Math.floor(mouseX / imgWidth) + Math.floor(mouseY / imgHeight) * cols;
if(clickedIndex == posArr.indexOf(posArr.length-1)){
var emptyPos = posArr[clickedIndex];
posArr[clickedIndex] = posArr[currentIndex];
posArr[currentIndex] = emptyPos;
draw();
if(isWin()){
alert("Congratulations!");
}
}
}
//判斷是否拼正確
function isWin(){
for(var i=0; i<posArr.length; i++){
if(posArr[i].x != imgWidth * (i % cols) || posArr[i].y != imgHeight * Math.floor(i / cols)){
return false;
}
}
return true;
}
//初始化
img.onload = function(){
draw();
canvas.addEventListener("click", exchange, false);
};
</script>
</body>
</html>以上是HTML5拼圖代碼的實現(xiàn)方法。代碼主要分為畫布與圖像相關的參數(shù)、記錄圖像位置、隨機打亂圖像位置、繪制圖像、交換圖像位置、判斷是否拼正確、初始化等幾個部分。通過以上的代碼實現(xiàn)，我們可以在網(wǎng)頁上實現(xiàn)簡單的拼圖游戲。希望本篇文章能夠?qū)Υ蠹矣兴鶐椭?/p>
上一篇html5拖動圖片代碼
下一篇mysql5性能比較