原始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() *