原生HTML+JS+CSS制作的拼图小游戏模块

原生的拼图小游戏,抽离成一个模块,参数可配置化,方便复用.

安装

npm install dmc-puzzle-game --save-prod

使用

// 引用
import PuzzleGame from "dmc-puzzle-game";
// 参数见下表
const option = {
    container: "main",
    img: "https://hm-wx.oss-cn-hangzhou.aliyuncs.com/1105295.jpeg",
    colNum: 5 * 1,
    rowNum: 3 * 1,
    isJumpDislocate: true,
    dislocateLevel: 2,
    isShowGap: false,
    gapWidth: 1,
    gapColor: "rgba(0,0,0,1)",
    isShowOverEndAnimation: true,
    isShowShadowContainer: true,
    isShowShadowCell: false,
    isShowMarkNumber: true,
    hidePuzzleCellPosition: "random",
 };
// 传入option初始化,返回game实例
const puzzleGame = new PuzzleGame(option);
// 监听游戏状态变化
puzzleGame.addEventListener("changeGameStatus", (status) => {
  // status 类型见下方代码
  console.log("status: ", status);
});
// 监听游戏所用步数变化
puzzleGame.addEventListener("changeStepCount", function (stepCount) {
  console.log("stepCount: ", stepCount);
});
// 开始游戏
game.start();
// 重置游戏, <option> 可选,覆盖初始化的参数
game.reset(<option>);

Option

| Key | Explanation | Type | Default | Required | | ---------------------- | ------------------------------------------------------------ | ----------------- | ------------- | -------- | | container | 游戏的容器元素,DOM 元素或 queryString. | DOM / queryString | null | true | | img | 要拼的图片的url | String | null | true | | colNum | 要分成几列 | Number[0-∞] | 3 | false | | rowNum | 要分成几行 | Number[0-∞] | 3 | false | | isJumpDislocate | 是否跳过打乱过程 | Boolean | true | false | | dislocateLevel | 打乱的级别 | Number[0-∞] | 3 | false | | isShowGap | 是否显示方块之间的间隙 | Boolean | false | false | | gapWidth | 间隙的宽度 | Number[0-∞] | 1(px) | false | | gapColor | 间隙的颜色 | String | rgba(0,0,0,1) | false | | isShowOverEndAnimation | 是否显示游戏结束过场效果 | Boolean | true | false | | isShowShadowContainer | 是否显示容器元素的内阴影 | Boolean | true | false | | isShowShadowCell | 是否显示方块元素的内阴影 | Boolean | false | false | | isShowMarkNumber | 是否显示标记数字 | Boolean | true | false | | hidePuzzleCellPosition | 要隐藏的方块的位置,默认随机选取,若要指定可以传一个数组,例如:[2,3]代表第2列,第3行,超过默认取最后一个方块 | Array / 'random' | random | false |