大众学开发——59秒学习编写刮刮乐游戏
程序员文章站
2022-06-24 15:49:12
前言 本视频通过59秒快速带大家了解JS实现游戏刮刮乐的全过程,大家不妨可以动手尝试一下。如万一出现困难可以积极与我沟通,我将无偿提供技术支持及源代码。 效果预览 开始分析 1. 创建canvas 2. 设置图片 3. 设置遮罩 4. 插入文档 5. 绑定鼠标移动事件 6. 检查是否超出50%——移 ......
前言
本视频通过59秒快速带大家了解js实现游戏刮刮乐的全过程,大家不妨可以动手尝试一下。如万一出现困难可以积极与我沟通,我将无偿提供技术支持及源代码。
效果预览
开始分析
- 创建canvas
- 设置图片
- 设置遮罩
- 插入文档
- 绑定鼠标移动事件
- 检查是否超出50%——移除遮罩
难点、api说明
- 绘制灰色矩形
var context = canvas.getcontext('2d'); context.fillstyle = 'grey'; context.fillrect(0, 0, canvas.width, canvas.height)
- 擦除canvas
let ctx = canvas.getcontext('2d'); ctx.globalcompositeoperation = "destination-out";
- 绘制圆形
ctx.arc(x, y, 20, 0, 2 * math.pi); ctx.fill();
案例代码
function createcanvas() { var canvasnode = document.createelement('canvas'); canvasnode.width = 500; canvasnode.height = 500; return canvasnode; } function append(canvas) { var script = document.queryselector('script'); document.body.insertbefore(canvas, script); } function setprize(canvas) { let randomnum = math.ceil(math.random() * 7); canvas.style.backgroundimage = 'url(./imgs/' + randomnum + '.png)'; canvas.style.backgroundsize = "100% 100%"; } function mask(canvas) { var context = canvas.getcontext('2d'); context.fillstyle = 'grey'; context.fillrect(0, 0, canvas.width, canvas.height) } function checkclean(canvas) { var ctx = canvas.getcontext('2d'); var cdata = ctx.getimagedata(0, 0, canvas.width, canvas.height).data; var count = 0; for (var i = 0; i < cdata.length; i += 4) { if (cdata[i] === 0) count++; } if (count > ((cdata.length / 4) * 0.5)) { canvas.onmousemove = null; ctx.clearrect(0, 0, canvas.width, canvas.height); } } function clean(canvas) { canvas.onmousedown = function() { canvas.onmousemove = function(e) { let x = e.pagex - canvas.offsetleft; let y = e.pagey - canvas.offsettop; let ctx = canvas.getcontext('2d'); ctx.globalcompositeoperation = "destination-out"; ctx.beginpath(); ctx.arc(x, y, 20, 0, 2 * math.pi); ctx.fill(); checkclean(canvas); } } canvas.onmouseup = function() { canvas.onmousemove = null; } } // 0:创建canvas // 1:放置图片 // 2:设置遮罩 // 3:加入到页面 // 4:清除遮罩 var canvas = createcanvas(); setprize(canvas); append(canvas); mask(canvas); clean(canvas);
下一篇: 家里只有高压锅,那高压锅可以炖鸡汤吗?