h5小游戏--迷宫功能设计（HTML+JavaScript + canvas）

原始JS + canvas 网页设计，这是一个非常不错的H5插件开发，非常适合初学者学习使用🏮。

网页效果：🍊🍊🍊文末获取源码

🎉效果预览

h5迷宫小游戏

主要源码结构：

🎉部分源码

主要源码展示：

maze.js

/*
使用方法说明：
2.创建启用
    Ball.init(cfg);
参数说明：
cfg:{
    x: 初始横坐标,
    y: 初始纵坐标,
    step: 单个单元格大小
    matrix: 矩阵大小 n * n
}
*/
window.Ball = {
   
    x: 0,
    y: 0,
    step: 20,
    mapData: [],
    matrix: 10, // 迷宫大小 n * n
    imgObj: null,
    position: {
    // 上一步位置
      x: 0,
      y: 0
    },
    ctx: null, // 画布对象
    init: function (cfg) {
   
      this.x = cfg.x || 0
      this.y = cfg.y || 0
      this.step = cfg.step || 20,
      this.matrix = cfg.matrix || 10
      this.drawMap()
    },
    // 初始化迷宫   
    drawMap: function () {
   
      var canvas = document.createElement('canvas')
      canvas.width = this.matrix * this.step
      canvas.height = this.matrix * this.step


      this.ctx = canvas.getContext('2d')

      this.ctx.fillStyle = '#fc5531'
      for(let n = 0; n < this.matrix; n++) {
   
        this.mapData[n] = []
        for(let m = 0; m < this.matrix; m++) {
   
          let number = Math.floor(Math.random() *