随着HTML5技术的不断发展，越来越多的精彩游戏得以构建。本文将介绍如何使用HTML5开发一个经典的拼图游戏。这种游戏要求玩家将打乱的图像块重新排列，以恢复完整的图像。将使用HTML5的Canvas元素，它提供了一种方便且高效的方式来渲染图像。
为了保存每个图像块的信息，需要创建一个名为imageBlock的类，它将包含每个块的信息。为了在Canvas上绘制图像块，只需从数组中获取块信息并相应地绘制即可。
function imageBlock(no, x, y) {
this.no = no;
this.x = x;
this.y = y;
this.isSelected = false;
}
为了将图像分割成多个部分，需要将每个imageBlock推送到数组中，并为每个块设置随机的x和y坐标。还需要准备一个最终目的地数组，包含每个块的坐标。这个数组帮助在放下图像块时获取信息，并且检查有多少图像块处于正确的位置。
function SetImageBlock() {
var total = TOTAL_PIECES;
var imageBlockList = new Array();
var blockList = new Array();
var x1 = BLOCK_IMG_WIDTH + 20;
var x2 = canvas.width - 50;
var y2 = BLOCK_IMG_HEIGHT;
for (var i = 0; i < total; i++) {
var randomX = randomXtoY(x1, x2, 2);
var randomY = randomXtoY(0, y2, 2);
var imgBlock = new imageBlock(i, randomX, randomY);
imageBlockList.push(imgBlock);
var x = (i % TOTAL_COLUMNS) * BLOCK_WIDTH;
var y = Math.floor(i / TOTAL_COLUMNS) * BLOCK_HEIGHT;
var block = new imageBlock(i, x, y);
blockList.push(block);
}
}
从数组中获取所有图像块的信息，如果块没有被选中，就简单地绘制它。
function drawAllImages() {
for (var i = 0; i < imageBlockList.length; i++) {
var imgBlock = imageBlockList[i];
if (imgBlock.isSelected == false) {
drawImageBlock(imgBlock);
}
}
}
使用Canvas的drawImage方法来绘制块。根据块号计算源x和y坐标，并将它们传递给ctx.drawImage(...)方法来绘制图像块。该方法根据提供的信息读取图像，并将其绘制到Canvas上的指定目标坐标。
function drawImageBlock(imgBlock) {
drawFinalImage(imgBlock.no, imgBlock.x, imgBlock.y, BLOCK_WIDTH, BLOCK_HEIGHT);
}
function drawFinalImage(index, destX, destY, destWidth, destHeight) {
ctx.save();
var srcX = (index % TOTAL_COLUMNS) * IMG_WIDTH;
var srcY = Math.floor(index / TOTAL_COLUMNS) * IMG_HEIGHT;
ctx.drawImage(image1, srcX, srcY, IMG_WIDTH, IMG_HEIGHT, destX, destY, destWidth, destHeight);
ctx.restore();
}
为了拖动图像块，需要注册Canvas的鼠标按下、抬起和移动事件。
canvas.onmousedown = handleOnMouseDown;
canvas.onmouseup = handleOnMouseUp;
canvas.onmouseout = handleOnMouseOut;
canvas.onmousemove = handleOnMouseMove;
在鼠标按下时，简单地在集合中找到位于鼠标点击位置之间的imageBlock。如果找到项目，则将其分配给selectedBlock对象。
function handleOnMouseDown(e) {
if (selectedBlock != null) {
imageBlockList[selectedBlock.no].isSelected = false;
}
selectedBlock = GetImageBlock(imageBlockList, e.pageX, e.pageY);
if (selectedBlock) {
imageBlockList[selectedBlock.no].isSelected = true;
}
}
在鼠标移动时，如果存在selectedBlock，则设置选定块的新x和y位置，并重新绘制Canvas。
function handleOnMouseMove(e) {
if (selectedBlock) {
selectedBlock.x = e.pageX - 25;
selectedBlock.y = e.pageY - 25;
DrawGame();
}
}
在鼠标抬起时，检查它是否在块上，并且块上没有图像，然后相应地设置源图像坐标，并重新绘制Canvas。如果通过这一移动游戏结束，则使其结束。
function handleOnMouseUp(e) {
if (selectedBlock) {
var index = selectedBlock.no;
var block = GetImageBlock(blockList, e.pageX, e.pageY);
if (block) {
var blockOldImage = GetImageBlockOnEqual(imageBlockList, block.x, block.y);
if (blockOldImage == null) {
imageBlockList[index].x = block.x;
imageBlockList[index].y = block.y;
}
} else {
imageBlockList[index].x = selectedBlock.x;
imageBlockList[index].y = selectedBlock.y;
}
imageBlockList[index].isSelected = false;
selectedBlock = null;
DrawGame();
if (isFinished()) {
OnFinished();
}
}
}
function OnFinished() {
var audioElement = document.createElement('audio');
audioElement.setAttribute('src', 'Audio/finish.mp3');
audioElement.play();
}