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() * 2)
          this.mapData[n][m] = number
          if (number === 1) {
              this.ctx.fillRect(m * this.step, n * this.step, this.step, this.step);
          }
        }
      }
      this.imgObj = new Image();
      this.imgObj.src='http://b.hiphotos.baidu.com/image/pic/item/bf096b63f6246b606d4f6368e8f81a4c510fa26d.jpg'
      this.imgObj.onload = () => {
          this.ctx.save()
          this.ctx.beginPath()
          this.ctx.arc(this.x * this.step + this.step/2, this.y * this.step + this.step/2, (this.step - 4)/2, 0, 2 * Math.PI)	//绘制圆圈
          this.ctx.clip()	//裁剪
          this.ctx.drawImage(this.imgObj, this.x * this.step, this.y * this.step, this.step, this.step) //定位在圆圈范围内便会出现
          this.ctx.restore()
      }
      document.body.appendChild(canvas)

      this.startListener()
    },
    startListener: function () {
      /** 键盘事件 */
      document.onkeydown = (event) => {
        var e = event || window.event || arguments.callee.caller.arguments[0]
        var flag = true
        switch (e.keyCode) {
          case 38:
              this.moveUp()
              break;
          case 39:
              this.moveRight()
              break;
          case 40:
              this.moveDown()
              break;
          case 37:
              this.moveLeft()
              break;
          default:
              flag = false
              break;
          }
      }
    },
    // 向上移动
    moveUp: function() {
      if ((this.y -1 ) >= 0) {
        if (this.mapData[this.y-1][this.x] === 1) return
      }

      this.y -= 1
      if (this.y < 0) this.y = 0
      this.animate()
    },
    // 向下移动
    moveDown: function() {
      if ((this.y + 1 ) < this.matrix) {
        if (this.mapData[this.y+1][this.x] === 1) return
      }
      
      this.y += 1
      if (this.y >= this.matrix) this.y = this.matrix -1
      this.animate()
    },
    // 向右移动
    moveRight: function() {
      if ((this.x + 1 ) < this.matrix) {
        if (this.mapData[this.y][this.x+1] === 1) return
      }
      this.x += 1
      if (this.x >= this.matrix) this.x = this.matrix - 1
      this.animate()
    },
    // 向左移动
    moveLeft: function() {
      if ((this.x -1 ) >= 0) {
          if (this.mapData[this.y][this.x-1] === 1) return
      }
      
      this.x -= 1
      if (this.x < 0) this.x = 0
      this.animate()
    },
    animate: function () {
      if (this.imgObj) {
        // 恢复上次位置
        if (this.mapData[this.position.y][this.position.x] == 1) {
          this.ctx.fillRect(this.position.x * this.step, this.position.y * this.step, this.step, this.step);
        } else {
          this.ctx.clearRect(this.position.x * this.step, this.position.y * this.step, this.step, this.step);
        }

        this.ctx.save()
        this.ctx.beginPath()
        this.ctx.arc(this.x * this.step + this.step/2, this.y * this.step + this.step/2, (this.step - 4)/2, 0, 2 * Math.PI)	//绘制圆圈
        this.ctx.clip()	//裁剪
        this.ctx.drawImage(this.imgObj, this.x * this.step, this.y * this.step, this.step, this.step) // 定位在圆圈范围内便会出现
        this.ctx.restore()
        this.position.x = this.x
        this.position.y = this.y
      }
    }
  }

index.html

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>迷宫title>
    <script src="./js/maze.js">script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
    style>
    <script>
        window.onload = () => {
            Ball.init({
              x: 0,
              y: 0,
              step: 16,
              matrix: 20 // 迷宫大小 n * n
            })
        }
    script>
head>
<body>
body>
html>

获取源码

⭐️ ⭐️ 评论区留下邮箱免费获取, 大家点赞、收藏、关注、评论啦 ⭐️ ⭐️