検索
ホームページウェブフロントエンドH5 チュートリアル2 時間で完了する HTML5 パズル ゲーム コード グラフィックの紹介

2 時間で完了する HTML5 パズル ゲーム コード グラフィックの紹介

黄舟
黄舟
Mar 04, 2017 pm 04:15 PM
html5

私が初めて lufylegend.js を学んだとき、私は lufylegend.js を使用して最初の HTML5 ミニゲーム - ジグソーパズルを開発しました。また、自慢するためにブログ投稿も書きました。HTML5 ミニゲーム「Puzzle Puzzle」がリリースされました。あなたに挑戦するために。しかし、当時私はゲーム開発の初心者で経験も浅かったため、ゲームのアルゴリズムやコードの欠陥を勉強していなかったので、ゲームには多くのバグがあり、パズルが解ける可能性さえありました。中断された後は復元できませんでした。最近、友人からこのゲームについてよく質問されます。初心者が学びやすいようにコードのバグを修正してほしいとのことです。ちなみに、私はこのような小さなゲームを書くスピードをテストするつもりなので、少し時間をかけてみました。このゲームを最初から最後まで書き直して、素材の準備と修正から最終的にゲームが完成するまで約2時間かかりました。

以下はゲームのアドレスです:

http://yuehaowang.github.io/games/puzzle/

これは私の棋譜です、ぜひ挑戦してください:

2 時間で完了する HTML5 パズル ゲーム コード グラフィックの紹介

私が話しますそれについて次へ このゲームを開発して完成させる方法。 (「年表」を押します)

準備段階

lufylegend ゲーム エンジンを準備します。公式 Web サイトにアクセスしてダウンロードできます:

lufylegend.com/lufylegend

エンジン ドキュメント アドレス:

lufylegend.com/lufylegend/api

強力な lufylegend エンジンがなければ、ネイティブ キャンバスを使用してこの HTML5 ミニゲームを作成するには少なくとも 1 日かかると言えます。

0～30min

資料準備(10分)+資料修正(20分)。私は本当に障害があり、P ピクチャーが苦手なので、写真を修正するのに 20 分ほどかかりました、囧...

30~50min

スタートインターフェースを開発します。ゲームには開始インターフェイスが必要なので、最初にコードのこの部分を実装します。 index.html のコードの前のコードは次のとおりです: index.html里的代码，代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>Puzzle</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <script type="text/javascript" src="./lib/lufylegend-1.10.1.simple.min.js"></script>
    <script type="text/javascript" src="./js/Main.js"></script>
</head>
<body style="margin: 0px; font-size: 0px; background: #F2F2F2;">
    <p id="mygame"></p>
</body>
</html>

主要是引入一些js文件，不多说。然后准备一个Main.js文件，在这个文件里添加初始化界面和加载资源的代码：

/** 初始化游戏 */
LInit(60, "mygame", 390, 580, main);

var imgBmpd;
/** 游戏层 */
var stageLayer, gameLayer, overLayer;
/** 拼图块列表 */
var blockList;
/** 是否游戏结束 */
var isGameOver;
/** 用时 */
var startTime, time, timeTxt;
/** 步数 */
var steps, stepsTxt;

function main () {
    /** 全屏设置 */
    if (LGlobal.mobile) {
        LGlobal.stageScale = LStageScaleMode.SHOW_ALL;
    }
    LGlobal.screen(LGlobal.FULL_SCREEN);

    /** 添加加载提示 */
    var loadingHint = new LTextField();
    loadingHint.text = "资源加载中……";
    loadingHint.size = 20;
    loadingHint.x = (LGlobal.width - loadingHint.getWidth()) / 2;
    loadingHint.y = (LGlobal.height - loadingHint.getHeight()) / 2;
    addChild(loadingHint);

    /** 加载图片 */
    LLoadManage.load(
        [
            {path : "./js/Block.js"},
            {name : "img", path : "./images/img.jpg"}
        ],
        null,
        function (result) {
            /** 移除加载提示 */
            loadingHint.remove();

            /** 保存位图数据，方便后续使用 */
            imgBmpd = new LBitmapData(result["img"]);

            gameInit();
        }
    );
}

function gameInit (e) {
    /** 初始化舞台层 */
    stageLayer = new LSprite();
    stageLayer.graphics.drawRect(0, "", [0, 0, LGlobal.width, LGlobal.height], true, "#EFEFEF");
    addChild(stageLayer);

    /** 初始化游戏层 */
    gameLayer = new LSprite();
    stageLayer.addChild(gameLayer);

    /** 初始化最上层 */
    overLayer = new LSprite();
    stageLayer.addChild(overLayer);

    /** 添加2 時間で完了する HTML5 パズル ゲーム コード グラフィックの紹介 */
    addBeginningUI();
}

以上代码有详细注释，大家可以对照引擎文档和注释进行阅读。有些全局变量会在以后的代码中使用，大家可以先忽略。接下来是addBeginningUI函数里的代码，用于实现2 時間で完了する HTML5 パズル ゲーム コード グラフィックの紹介：

function addBeginningUI () {
    var beginningLayer = new LSprite();
    beginningLayer.graphics.drawRect(0, "", [0, 0, LGlobal.width, LGlobal.height], true, "#EDEDED");
    stageLayer.addChild(beginningLayer);

    /** 游戏标题 */
    var title = new LTextField();
    title.text = "拼图游戏";
    title.size = 50;
    title.weight = "bold";
    title.x = (LGlobal.width - title.getWidth()) / 2;
    title.y = 160;
    title.color = "#FFFFFF";
    title.lineWidth = 5;
    title.lineColor = "#000000";
    title.stroke = true;
    beginningLayer.addChild(title);

    /** 开始游戏提示 */
    var hint = new LTextField();
    hint.text = "- 点击屏幕开始游戏 -";
    hint.size = 25;
    hint.x = (LGlobal.width - hint.getWidth()) / 2;
    hint.y = 370;
    beginningLayer.addChild(hint);

    /** 开始游戏 */
    beginningLayer.addEventListener(LMouseEvent.MOUSE_UP, function () {
        beginningLayer.remove();

        startGame();
    });
}

到此，运行代码，得到我们的2 時間で完了する HTML5 パズル ゲーム コード グラフィックの紹介：

2 時間で完了する HTML5 パズル ゲーム コード グラフィックの紹介

看到这个画面，其实我自己都想吐槽一下实在是太“朴素”了，囧……

不过我这次图个制作速度，所以还望各位看官海量。

50～90min

这40分钟的时间，是最关键时期，期间我们要完成整个游戏的主体部分。首先，我们需要用代码来实现以下过程：

初始化游戏界面数据（如游戏时间、所用步数）和显示一些UI部件（如图样）
|
-> 获取随机的拼图块位置
|
-> 显示打乱后的拼图块

我们将这些步骤做成一个个的函数方便我们统一调用：

function startGame () {
    isGameOver = false;

    /** 初始化时间和步数 */
    startTime = (new Date()).getTime();
    time = 0;
    steps = 0;
    /** 初始化拼图块列表 */
    initBlockList();
    /** 打乱拼图 */
    getRandomBlockList();
    /** 显示拼图 */
    showBlock();
    /** 显示缩略图 */
    showThumbnail();
    /** 显示时间 */
    addTimeTxt();
    /** 显示步数 */
    addStepsTxt();

    stageLayer.addEventListener(LEvent.ENTER_FRAME, onFrame);
}

函数一开始，我们把isGameOver变量设定为false代表游戏未结束，在后期的代码里，我们会看到这个变量的作用。接着我们初始化了用于表示时间和步数的time和steps这两个全局变量，另外初始化变量startTime的值用于后面计算游戏时间。
接下来，我们就要开始初始化拼图块了。见initBlockList里的代码：

function initBlockList () {
    blockList = new Array();

    for (var i = 0; i < 9; i++) {
        /** 根据序号计算拼图块图片显示位置 */
        var y = (i / 3) >>> 0, x = i % 3;

        blockList.push(new Block(i, x, y));
    }
}

这里我们使用了一个Block类，这个类用于显示拼图块和储存拼图块的数据，并提供了一些方法来操控拼图块，下面是其构造器的代码：

function Block (index, x, y) {
    LExtends(this, LSprite, []);

    var bmpd = imgBmpd.clone();
    bmpd.setProperties(x * 130, y * 130, 130, 130);
    this.bmp = new LBitmap(bmpd);
    this.addChild(this.bmp);

    var border = new LShape();
    border.graphics.drawRect(3, "#CCCCCC", [0, 0, 130, 130]);
    this.addChild(border);

    this.index = index;

    this.addEventListener(LMouseEvent.MOUSE_UP, this.onClick);
}

Block类继承自LSprite，属于一个显示对象，所以我们在这个类中添加了一个位图对象用于显示拼图块对应的图片。除此之外，我们还为拼图块添加了一个边框，在显示时用于隔开周围的拼图块。Block类有一个index属性，代表拼图块在拼图块列表blockList中的正确位置。最后，我们为此类添加了一个鼠标按下事件，用于处理鼠标按下后移动图块操作。

接下来我们还要介绍这个类的一个方法setLocation：

Block.prototype.setLocation = function (x, y) {
    this.locationX = x;
    this.locationY = y;

    this.x = x * 130;
    this.y = y * 130;
};

这个方法用于设置拼图块对象的显示位置以及保存拼图块的“数组位置”。什么是“数组位置”呢？各位看官可以通过下面的图片加以了解：

2 時間で完了する HTML5 パズル ゲーム コード グラフィックの紹介

可以看到，“数组位置”就类似于二维数组中的元素下标。储存这个位置的作用在于可以很方便地从blockList中获取到附近的其他拼图块。这个方法在我们显示拼图时有调用到，在显示拼图之前，我们得先打乱拼图，见如下代码：

function getRandomBlockList () {
    /** 随机打乱拼图 */
    blockList.sort(function () {
        return 0.5 - Math.random();
    });

    /** 计算逆序和 */
    var reverseAmount = 0;

    for (var i = 0, l = blockList.length, preBlock = null; i < l; i++) {
        if (!preBlock) {
            preBlock = blockList[0];

            continue;
        }

        var currentBlock = blockList[i];

        if (currentBlock.index < preBlock.index) {
            reverseAmount++;
        }

        preBlock = currentBlock;
    }

    /** 检测打乱后是否可还原 */
    if (reverseAmount % 2 != 0) {
        /** 不合格，重新打乱 */
        getRandomBlockList();
    }
}

打乱拼图部分直接用数组的sort

blockList.sort(function () {
    return 0.5 - Math.random();
});

主にいくつかの js ファイルを紹介しますが、多くは説明しません。次に、Main.js ファイルを準備し、このファイルに初期化インターフェイスとリソース読み込みコードを追加します。 🎜
function showBlock() {
    for (var i = 0, l = blockList.length; i < l; i++) {
        var b = blockList[i];

        /** 根据序号计算拼图块位置 */
        var y = (i / 3) >>> 0, x = i % 3;

        b.setLocation(x, y);

        gameLayer.addChild(b);
    }
}
🎜 上記のコードには詳細なコメントがあり、エンジンのドキュメントとコメントに従って読むことができます。一部のグローバル変数は将来のコードで使用されるため、現時点では無視しても問題ありません。次に、開始インターフェイスの実装に使用される addBeginningUI 関数のコードです: 🎜
Block.prototype.onClick = function (e) {
    var self = e.currentTarget;

    if (isGameOver) {
        return;
    }

    var checkList = new Array();

    /** 判断右侧是否有方块 */
    if (self.locationX > 0) {
        checkList.push(Block.getBlock(self.locationX - 1, self.locationY));
    }

    /** 判断左侧是否有方块 */
    if (self.locationX < 2) {
        checkList.push(Block.getBlock(self.locationX + 1, self.locationY));
    }

    /** 判断上方是否有方块 */
    if (self.locationY > 0) {
        checkList.push(Block.getBlock(self.locationX, self.locationY - 1));
    }

    /** 判断下方是否有方块 */
    if (self.locationY < 2) {
        checkList.push(Block.getBlock(self.locationX, self.locationY + 1));
    }

    for (var i = 0, l = checkList.length; i < l; i++) {
        var checkO = checkList[i];

        /** 判断是否是空白拼图块 */
        if (checkO.index == 8) {
            steps++;
            updateStepsTxt();

            Block.exchangePosition(self, checkO);

            break;
        }
    }
};
🎜 この時点で、コードを実行して開始インターフェイスを取得します: 🎜🎜2 時間で完了する HTML5 パズル ゲーム コード グラフィックの紹介🎜🎜この写真を見たとき、私は最初は本当に「簡単すぎる」と文句を言いたくなりますが、囧... 🎜🎜 でも今回は制作スピードを試してみたので、ぜひチェックしていただければと思います。 🎜🎜50～90min🎜🎜この40分間は、ゲーム全体のメイン部分を完了する必要がある最も重要な時間です。まず、コードを使用して次のプロセスを実装する必要があります: 🎜
Block.exchangePosition = function (b1, b2) {
    var b1x = b1.locationX, b1y = b1.locationY,
        b2x = b2.locationX, b2y = b2.locationY,
        b1Index = b1y * 3 + b1x,
        b2Index = b2y * 3 + b2x;

    /** 在地图块数组中交换两者位置 */
    blockList.splice(b1Index, 1, b2);
    blockList.splice(b2Index, 1, b1);

    /** 交换两者显示位置 */
    b1.setLocation(b2x, b2y);
    b2.setLocation(b1x, b1y);

    /** 判断游戏是否结束 */
    Block.isGameOver();
};
🎜これらのステップを関数に作成して、均一に呼び出すことができるようにします: 🎜
Block.getBlock = function (x, y) {
    return blockList[y * 3 + x];
};
🎜関数の先頭で、isGameOverを設定します。 > 変数 false は、ゲームが終了していないことを意味します。後のコードで、この変数の役割を確認します。次に、時間とステップを表すために使用される 2 つのグローバル変数 time と steps を初期化しました。さらに、初期化された変数 startTime の値が使用されました。後でゲーム時間を計算します。 🎜次に、パズルのピースの初期化を開始します。 initBlockList のコードを参照してください: 🎜
Block.isGameOver = function () {
    var reductionAmount = 0, l = blockList.length;

    /** 计算还原度 */
    for (var i = 0; i < l; i++) {
        var b = blockList[i];

        if (b.index == i) {
            reductionAmount++;
        }
    }

    /** 计算是否完全还原 */
    if (reductionAmount == l) {
        /** 游戏结束 */
        gameOver();
    }   
};
🎜 ここでは、パズル ブロックを表示し、パズル ブロック データを保存するために使用される Block クラスを使用し、パズルを制御するためのいくつかのメソッドを提供します。ブロックの場合、以下はそのコンストラクターのコードです: 🎜
function showThumbnail() {
    var thumbnail = new LBitmap(imgBmpd);
    thumbnail.scaleX = 130 / imgBmpd.width;
    thumbnail.scaleY = 130 / imgBmpd.height;
    thumbnail.x = (LGlobal.width - 100) /2;
    thumbnail.y = 410;
    overLayer.addChild(thumbnail);
}

function addTimeTxt () {
    timeTxt = new LTextField();
    timeTxt.stroke = true;
    timeTxt.lineWidth = 3;
    timeTxt.lineColor = "#54D9EF";
    timeTxt.color = "#FFFFFF";
    timeTxt.size = 18;
    timeTxt.x = 20;
    timeTxt.y = 450;
    overLayer.addChild(timeTxt);

    updateTimeTxt();
}

function updateTimeTxt () {
    timeTxt.text = "时间：" + getTimeTxt(time);
}

function getTimeTxt () {
    var d = new Date(time);

    return d.getMinutes() + " : " + d.getSeconds();
};

function addStepsTxt () {
    stepsTxt = new LTextField();
    stepsTxt.stroke = true;
    stepsTxt.lineWidth = 3;
    stepsTxt.lineColor = "#54D9EF";
    stepsTxt.color = "#FFFFFF";
    stepsTxt.size = 18;
    stepsTxt.y = 450;
    overLayer.addChild(stepsTxt);

    updateStepsTxt();
}

function updateStepsTxt () {
    stepsTxt.text = "步数：" + steps;

    stepsTxt.x = LGlobal.width - stepsTxt.getWidth() - 20;
}

function onFrame () {
    if (isGameOver) {
        return;
    }

    /** 获取当前时间 */
    var currentTime = (new Date()).getTime();

    /** 计算使用的时间并更新时间显示 */
    time = currentTime - startTime;
    updateTimeTxt();
}

function gameOver () {
    isGameOver = true;

    var resultLayer = new LSprite();
    resultLayer.filters = [new LDropShadowFilter()];
    resultLayer.graphics.drawRoundRect(3, "#BBBBBB", [0, 0, 350, 350, 5], true,"#DDDDDD");
    resultLayer.x = (LGlobal.width - resultLayer.getWidth()) / 2;
    resultLayer.y = LGlobal.height / 2;
    resultLayer.alpha = 0;
    overLayer.addChild(resultLayer);

    var title = new LTextField();
    title.text = "游戏通关"
    title.weight = "bold";
    title.stroke = true;
    title.lineWidth = 3;
    title.lineColor = "#555555";
    title.size = 30;
    title.color = "#FFFFFF";
    title.x = (resultLayer.getWidth() - title.getWidth()) / 2;
    title.y = 30;
    resultLayer.addChild(title);

    var usedTimeTxt = new LTextField();
    usedTimeTxt.text = "游戏用时：" + getTimeTxt(time);
    usedTimeTxt.size = 20;
    usedTimeTxt.stroke = true;
    usedTimeTxt.lineWidth = 2;
    usedTimeTxt.lineColor = "#555555";
    usedTimeTxt.color = "#FFFFFF";
    usedTimeTxt.x = (resultLayer.getWidth() - usedTimeTxt.getWidth()) / 2;
    usedTimeTxt.y = 130;
    resultLayer.addChild(usedTimeTxt);

    var usedStepsTxt = new LTextField();
    usedStepsTxt.text = "所用步数：" + steps;
    usedStepsTxt.size = 20;
    usedStepsTxt.stroke = true;
    usedStepsTxt.lineWidth = 2;
    usedStepsTxt.lineColor = "#555555";
    usedStepsTxt.color = "#FFFFFF";
    usedStepsTxt.x = usedTimeTxt.x;
    usedStepsTxt.y = 180;
    resultLayer.addChild(usedStepsTxt);

    var hintTxt = new LTextField();
    hintTxt.text = "- 点击屏幕重新开始 -";
    hintTxt.size = 23;
    hintTxt.stroke = true;
    hintTxt.lineWidth = 2;
    hintTxt.lineColor = "#888888";
    hintTxt.color = "#FFFFFF";
    hintTxt.x = (resultLayer.getWidth() - hintTxt.getWidth()) / 2;
    hintTxt.y = 260;
    resultLayer.addChild(hintTxt);

    LTweenLite.to(resultLayer, 0.5, {
        alpha : 0.7,
        y : (LGlobal.height - resultLayer.getHeight()) / 2,
        onComplete : function () {
            /** 点击界面重新开始游戏 */
            stageLayer.addEventListener(LMouseEvent.MOUSE_UP, function () {
                gameLayer.removeAllChild();
                overLayer.removeAllChild();

                stageLayer.removeAllEventListener();

                startGame();
            });
        }
    });
}
🎜 Block クラスは LSprite から継承し、表示オブジェクトに属するため、ビットマップ オブジェクトを追加しました。パズルのピースに対応した絵を表示します。これに加えて、パズルピースに枠線を追加しました。これは、表示時に周囲のパズルピースを区切るために使用されます。 Block クラスには index 属性があり、パズル ブロック リスト blockList 内のパズル ブロックの正しい位置を表します。最後に、マウスが押された後のタイルの移動を処理するために、マウス ダウン イベントをこのクラスに追加しました。 🎜🎜次に、このクラス setLocation のメソッドも紹介します。 🎜rrreee🎜 このメソッドは、パズルピースオブジェクトの表示位置を設定し、パズルピースの「配列位置」を保存するために使用されます。 「配列位置」とは何ですか?読者は、以下の画像を通じて詳細を学ぶことができます: 🎜🎜2 時間で完了する HTML5 パズル ゲーム コード グラフィックの紹介🎜🎜「配列の位置」は、2次元配列の要素の添字に似ていることがわかります。この位置を保存する目的は、blockList から近くにある他のパズル ブロックを簡単に取得することです。このメソッドは、パズルを表示するときに呼び出されます。パズルを表示する前に、まずパズルをスクランブルする必要があります。次のコードを参照してください: 🎜rrreee🎜 スクランブルされたパズル部分は、配列の sort メソッドを直接使用します。カオスをランダムに並べ替えます: 🎜
blockList.sort(function () {
    return 0.5 - Math.random();
});

其实打乱算法有很多种，我这里采用最粗暴的方法，也就是随机打乱。这种算法简单是简单，坏在可能出现无法复原的现象。针对这个问题，就有配套的检测打乱后是否可还原的算法，具体的算法理论我摘用lufy大神的评论：

此类游戏能否还原关键是看它打乱后的逆序次数之和是否为偶数
假设你打乱后的数组中的每一个小图块为obj0，obj1，obj2，…它们打乱之前的序号分别为obj0.num，obj1.num…
接下来循环数组，如果前者的序号比后者大，如obj0.num > obj1.num，这表示一个逆序
当全部的逆序之和为奇数时表示不可还原，重新打乱即可，打乱后重新检测，直到逆序之和为偶数为止

上面我给出的getRandomBlockList里的代码就是在实现打乱算法和检测是否可还原算法。

还有一种打乱方式，大家可以尝试尝试：和复原拼图一样，将空白块一步一步地与周围的拼图随机交换顺序。这个打乱算法较上一种而言，不会出现无法复原的现象，而且可以根据打乱的步数设定游戏难度。

在完成打乱拼图块后，如期而至的是显示拼图块：

function showBlock() {
    for (var i = 0, l = blockList.length; i < l; i++) {
        var b = blockList[i];

        /** 根据序号计算拼图块位置 */
        var y = (i / 3) >>> 0, x = i % 3;

        b.setLocation(x, y);

        gameLayer.addChild(b);
    }
}

显示了拼图块后，我们要做的就是添加操作拼图块的功能。于是需要拓展Block类，为其添加事件监听器onClick方法：

Block.prototype.onClick = function (e) {
    var self = e.currentTarget;

    if (isGameOver) {
        return;
    }

    var checkList = new Array();

    /** 判断右侧是否有方块 */
    if (self.locationX > 0) {
        checkList.push(Block.getBlock(self.locationX - 1, self.locationY));
    }

    /** 判断左侧是否有方块 */
    if (self.locationX < 2) {
        checkList.push(Block.getBlock(self.locationX + 1, self.locationY));
    }

    /** 判断上方是否有方块 */
    if (self.locationY > 0) {
        checkList.push(Block.getBlock(self.locationX, self.locationY - 1));
    }

    /** 判断下方是否有方块 */
    if (self.locationY < 2) {
        checkList.push(Block.getBlock(self.locationX, self.locationY + 1));
    }

    for (var i = 0, l = checkList.length; i < l; i++) {
        var checkO = checkList[i];

        /** 判断是否是空白拼图块 */
        if (checkO.index == 8) {
            steps++;
            updateStepsTxt();

            Block.exchangePosition(self, checkO);

            break;
        }
    }
};

首先，我们在这里看到了isGameOver全局变量的作用，即在游戏结束后，阻断点击拼图块后的操作。

在点击了拼图块后，我们先获取该拼图块周围的拼图块，并将它们装入checkList，再遍历checkList，当判断到周围有空白拼图块后，即周围有index属性等于8的拼图块后，先更新操作步数，然后将这两个拼图块交换位置。具体交换拼图块位置的方法详见如下代码：

Block.exchangePosition = function (b1, b2) {
    var b1x = b1.locationX, b1y = b1.locationY,
        b2x = b2.locationX, b2y = b2.locationY,
        b1Index = b1y * 3 + b1x,
        b2Index = b2y * 3 + b2x;

    /** 在地图块数组中交换两者位置 */
    blockList.splice(b1Index, 1, b2);
    blockList.splice(b2Index, 1, b1);

    /** 交换两者显示位置 */
    b1.setLocation(b2x, b2y);
    b2.setLocation(b1x, b1y);

    /** 判断游戏是否结束 */
    Block.isGameOver();
};

还有就是Block.getBlock静态方法，用于获取给定的“数组位置”下的拼图块：

Block.getBlock = function (x, y) {
    return blockList[y * 3 + x];
};

在Block.exchangePosition中，我们通过Block.isGameOver判断玩家是否已将拼图复原：

Block.isGameOver = function () {
    var reductionAmount = 0, l = blockList.length;

    /** 计算还原度 */
    for (var i = 0; i < l; i++) {
        var b = blockList[i];

        if (b.index == i) {
            reductionAmount++;
        }
    }

    /** 计算是否完全还原 */
    if (reductionAmount == l) {
        /** 游戏结束 */
        gameOver();
    }   
};

到这里，我们就实现了打乱和操作拼图块部分。

90～120min

最后30min用于细枝末节上的处理，如显示拼图缩略图、显示&更新时间和步数，以及添加游戏结束画面，这些就交给如下冗长而简单的代码来完成吧：

function showThumbnail() {
    var thumbnail = new LBitmap(imgBmpd);
    thumbnail.scaleX = 130 / imgBmpd.width;
    thumbnail.scaleY = 130 / imgBmpd.height;
    thumbnail.x = (LGlobal.width - 100) /2;
    thumbnail.y = 410;
    overLayer.addChild(thumbnail);
}

function addTimeTxt () {
    timeTxt = new LTextField();
    timeTxt.stroke = true;
    timeTxt.lineWidth = 3;
    timeTxt.lineColor = "#54D9EF";
    timeTxt.color = "#FFFFFF";
    timeTxt.size = 18;
    timeTxt.x = 20;
    timeTxt.y = 450;
    overLayer.addChild(timeTxt);

    updateTimeTxt();
}

function updateTimeTxt () {
    timeTxt.text = "时间：" + getTimeTxt(time);
}

function getTimeTxt () {
    var d = new Date(time);

    return d.getMinutes() + " : " + d.getSeconds();
};

function addStepsTxt () {
    stepsTxt = new LTextField();
    stepsTxt.stroke = true;
    stepsTxt.lineWidth = 3;
    stepsTxt.lineColor = "#54D9EF";
    stepsTxt.color = "#FFFFFF";
    stepsTxt.size = 18;
    stepsTxt.y = 450;
    overLayer.addChild(stepsTxt);

    updateStepsTxt();
}

function updateStepsTxt () {
    stepsTxt.text = "步数：" + steps;

    stepsTxt.x = LGlobal.width - stepsTxt.getWidth() - 20;
}

function onFrame () {
    if (isGameOver) {
        return;
    }

    /** 获取当前时间 */
    var currentTime = (new Date()).getTime();

    /** 计算使用的时间并更新时间显示 */
    time = currentTime - startTime;
    updateTimeTxt();
}

function gameOver () {
    isGameOver = true;

    var resultLayer = new LSprite();
    resultLayer.filters = [new LDropShadowFilter()];
    resultLayer.graphics.drawRoundRect(3, "#BBBBBB", [0, 0, 350, 350, 5], true,"#DDDDDD");
    resultLayer.x = (LGlobal.width - resultLayer.getWidth()) / 2;
    resultLayer.y = LGlobal.height / 2;
    resultLayer.alpha = 0;
    overLayer.addChild(resultLayer);

    var title = new LTextField();
    title.text = "游戏通关"
    title.weight = "bold";
    title.stroke = true;
    title.lineWidth = 3;
    title.lineColor = "#555555";
    title.size = 30;
    title.color = "#FFFFFF";
    title.x = (resultLayer.getWidth() - title.getWidth()) / 2;
    title.y = 30;
    resultLayer.addChild(title);

    var usedTimeTxt = new LTextField();
    usedTimeTxt.text = "游戏用时：" + getTimeTxt(time);
    usedTimeTxt.size = 20;
    usedTimeTxt.stroke = true;
    usedTimeTxt.lineWidth = 2;
    usedTimeTxt.lineColor = "#555555";
    usedTimeTxt.color = "#FFFFFF";
    usedTimeTxt.x = (resultLayer.getWidth() - usedTimeTxt.getWidth()) / 2;
    usedTimeTxt.y = 130;
    resultLayer.addChild(usedTimeTxt);

    var usedStepsTxt = new LTextField();
    usedStepsTxt.text = "所用步数：" + steps;
    usedStepsTxt.size = 20;
    usedStepsTxt.stroke = true;
    usedStepsTxt.lineWidth = 2;
    usedStepsTxt.lineColor = "#555555";
    usedStepsTxt.color = "#FFFFFF";
    usedStepsTxt.x = usedTimeTxt.x;
    usedStepsTxt.y = 180;
    resultLayer.addChild(usedStepsTxt);

    var hintTxt = new LTextField();
    hintTxt.text = "- 点击屏幕重新开始 -";
    hintTxt.size = 23;
    hintTxt.stroke = true;
    hintTxt.lineWidth = 2;
    hintTxt.lineColor = "#888888";
    hintTxt.color = "#FFFFFF";
    hintTxt.x = (resultLayer.getWidth() - hintTxt.getWidth()) / 2;
    hintTxt.y = 260;
    resultLayer.addChild(hintTxt);

    LTweenLite.to(resultLayer, 0.5, {
        alpha : 0.7,
        y : (LGlobal.height - resultLayer.getHeight()) / 2,
        onComplete : function () {
            /** 点击界面重新开始游戏 */
            stageLayer.addEventListener(LMouseEvent.MOUSE_UP, function () {
                gameLayer.removeAllChild();
                overLayer.removeAllChild();

                stageLayer.removeAllEventListener();

                startGame();
            });
        }
    });
}

Ok，2h下来，整个游戏就搞定咯～不得不表扬一下lufylegend这个游戏引擎，实在是可以大幅提升开发效率。

以上就是2小时完成HTML5拼图小游戏代码图文介绍的内容，更多相关内容请关注PHP中文网（www.php.cn）！


声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
関連記事
H5の理解：意味と重要性H5の理解：意味と重要性May 11, 2025 am 12:19 AM

H5はHTML5、HTMLの5番目のバージョンです。 HTML5は、Webページの表現力と相互作用を向上させ、セマンティックタグ、マルチメディアサポート、オフラインストレージ、キャンバス描画などの新しい機能を導入し、Webテクノロジーの開発を促進します。

H5：アクセシビリティとWeb標準のコンプライアンスH5：アクセシビリティとWeb標準のコンプライアンスMay 10, 2025 am 12:21 AM

ネットワーク標準へのアクセシビリティとコンプライアンスは、Webサイトにとって不可欠です。 1）アクセシビリティは、すべてのユーザーがウェブサイトに平等にアクセスできるようにします。2）ネットワーク標準は、ウェブサイトのアクセシビリティと一貫性を改善するために続きます。3）アクセシビリティには、セマンティックHTML、キーボードナビゲーション、色コントラスト、代替テキストの使用が必要です。

HTMLのH5タグは何ですか？HTMLのH5タグは何ですか？May 09, 2025 am 12:11 AM

HTMLのH5タグは、小さいタイトルまたはサブタイトルのタグを付けるために使用される5番目のタイトルです。 1）H5タグは、コンテンツの階層を改良し、読みやすさとSEOを改善するのに役立ちます。 2）CSSと組み合わせて、スタイルをカスタマイズして視覚効果を強化できます。 3）H5タグを合理的に使用して、乱用を避け、論理コンテンツ構造を確保します。

H5コード：Web構造に関する初心者向けガイドH5コード：Web構造に関する初心者向けガイドMay 08, 2025 am 12:15 AM

HTML5にWebサイトを構築する方法には、次のものが含まれます。1。セマンティックタグを使用して、などのWebページ構造を定義します。 2。マルチメディアコンテンツ、使用、タグを埋め込みます。 3.フォーム検証やローカルストレージなどの高度な機能を適用します。これらの手順を通じて、明確な構造と豊富な機能を備えた最新のWebページを作成できます。

H5コード構造：読みやすさのためのコンテンツの整理H5コード構造：読みやすさのためのコンテンツの整理May 07, 2025 am 12:06 AM

合理的なH5コード構造により、ページは多くのコンテンツの中で際立っています。 1）コンテンツなどのセマンティックラベルを使用して、構造を明確にするためにコンテンツを整理します。 2）FlexBoxやグリッドなどのCSSレイアウトを介して、さまざまなデバイスでのページのレンダリング効果を制御します。 3）レスポンシブデザインを実装して、ページがさまざまな画面サイズに適応するようにします。

H5対古いHTMLバージョン：比較H5対古いHTMLバージョン：比較May 06, 2025 am 12:09 AM

HTML5（H5）以降のバージョンのHTMLの主な違いには、次のものが含まれます。1）H5はセマンティックタグを導入し、2）マルチメディアコンテンツをサポートし、3）オフラインストレージ機能を提供します。 H5は、新しいタグやタグなどのAPIを介してWebページの機能と表現力を高め、ユーザーエクスペリエンスやSEO効果を改善しますが、互換性の問題に注意を払う必要があります。

H5対HTML5：用語と関係を明確にするH5対HTML5：用語と関係を明確にするMay 05, 2025 am 12:02 AM

H5とHTML5の違いは次のとおりです。1）HTML5は、構造とコンテンツを定義するWebページ標準です。 2）H5は、迅速な開発とマーケティングに適したHTML5に基づくモバイルWebアプリケーションです。

HTML5機能：H5のコアHTML5機能：H5のコアMay 04, 2025 am 12:05 AM

HTML5のコア機能には、セマンティックタグ、マルチメディアサポート、フォームエンハンスメント、オフラインストレージ、ローカルストレージが含まれます。 1。コードの読みやすさやSEO効果を改善するなどのセマンティックタグ。 2.マルチメディアサポートは、メディアコンテンツを埋め込むプロセスとタグを簡素化します。 3.フォームエンハンスメント新しい入力タイプと検証プロパティを導入し、フォーム開発を簡素化します。 4.オフラインストレージとローカルストレージは、ApplicationCacheとLocalStorageを通じてWebページのパフォーマンスとユーザーエクスペリエンスを改善します。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

もっと見る

人気の記事

<🎜>：庭を育てる - 完全な突然変異ガイド
3週間前ByDDD
<🎜>：バブルガムシミュレーターインフィニティ - ロイヤルキーの取得と使用方法
3週間前By尊渡假赌尊渡假赌尊渡假赌
KB5055612を修正する方法Windows 10にインストールできませんか？
3週間前ByDDD
Nordhold：Fusion System、説明
3週間前By尊渡假赌尊渡假赌尊渡假赌
マンドラゴラ：魔女の木のささやき - グラップリングフックのロックを解除する方法
3週間前By尊渡假赌尊渡假赌尊渡假赌
もっと見る

ホットツール

MantisBT

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。

SublimeText3 英語版

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

DVWA

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

EditPlus 中国語クラック版

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません

もっと見る

ホットトピック

Java チュートリアル
1664
14
CakePHP チュートリアル
1423
52
Laravel チュートリアル
1321
25
PHP チュートリアル
1269
29
C# チュートリアル
1249
24
もっと見る