HTML5 中的拼图游戏

下载 JigsawPuzzleGameIn-Html5.zip (773.2 KB)

 

引言

HTML5 越来越流行。许多出色的游戏都是使用 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;
    imageBlockList = new Array();
    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 的鼠标按下、释放和移动事件。

 // register events
 canvas.onmousedown = handleOnMouseDown;
 canvas.onmouseup = handleOnMouseUp;
 canvas.onmouseout = handleOnMouseOut;
 canvas.onmousemove = handleOnMouseMove;

在鼠标按下时，简单地找到位于鼠标点击位置之间的图像块。如果找到该项，则将其分配给 selectedBlock 对象。

 function handleOnMouseDown(e) {

    // remove old selected
    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();
        }
    }
 }

完成时播放音频

在游戏完成时播放音乐，只需使用 JavaScript 创建音频对象，设置其源并播放即可。

 function OnFinished() {

    var audioElement = document.createElement('audio');
    audioElement.setAttribute('src', 'Audio/finish.mp3');
    audioElement.play();

    .
    .
    .
 }