Html5 Canvas 实现一个“刮刮乐”游戏

 class ScrapAward { constructor(userOption) { this.option = { canvasId: 'canvas', // canvas的id backgroundImageUrl: '', // 背景图url width: 320, // canvas宽度 height: 160, // canvas高度 backgroundSize: '100% 100%', coverImage: { // 覆盖图层背景图url url: '', width: 320, height: 160, }, callback: () => {}, // 刮奖完成的回调函数 }; this.ctx = null; this.init(userOption); // 初始化 } // 初始化方法 init(userOption) { } // 重新开始也是一次初始化 restart(userOption) { if (userOption) { this.init(userOption); } else { this.init({}); } } }

 init(userOption) { // 合并用户配置 if (Object.assign) { Object.assign(this.option, userOption); } else { extend(this.option, userOption, true); } // 定义一系列变量 let that = this, img = (this.img = new Image()), //背景图片 imgLoaded = false, //背景图是否加载完成 canvas = (this.canvas = document.querySelector(`#${this.option.canvasId}`)), hastouch = 'ontouchstart' in window ? true : false, tapstart = hastouch ? 'touchstart' : 'mousedown', tapmove = hastouch ? 'touchmove' : 'mousemove', tapend = hastouch ? 'touchend' : 'mouseup', coverImg = (this.coverImg = new Image()), hasDone = false, // 是否刮奖完毕 coverImgLoad = false; that.mousedown = false; //鼠标的mousedown事件或者touchmove事件是否开启 // 移除事件监听，用于重新开始 if (this.canvas) { this.canvas.removeEventListener(tapstart, eventDown); this.canvas.removeEventListener(tapend, eventUp); this.canvas.removeEventListener(tapmove, eventMove); } coverImg.src = this.option.coverImage.url; coverImg.crossOrigin = 'Anonymous'; // 解决一些跨域问题 img.src = this.option.backgroundImageUrl; var w = (img.width = this.option.width), h = (img.height = this.option.height); this.canvasOffsetX = canvas.offsetLeft; this.canvasOffsetY = canvas.offsetTop; canvas.width = w; canvas.height = h; this.ctx = canvas.getContext('2d'); let ctx = this.ctx; this.img.addEventListener('load', backgroundImageLoaded); this.option.coverImage.url && this.coverImg.addEventListener('load', coverImageLoaded); // 背景图片加载完成后 function backgroundImageLoaded(e) { imgLoaded = true; fillCanvas(); canvas.style.background = 'url(' + img.src + ') no-repeat'; canvas.style.backgroundSize = that.option.backgroundSize || 'contain'; } // 覆