加入收藏 | 设为首页 | 会员中心 | 我要投稿 常州站长网 (https://www.0519zz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 站长学院 > MySql教程 > 正文

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

发布时间:2020-05-12 00:07:13 所属栏目:MySql教程 来源:站长网
导读:副标题#e# 话不多说,先上Demo 和 项目源码 . 2. 实现 我们创建一个 ScrapAward 类,通过传入 option 和调用其 restart() 方法实现重新开始。 (1)定义 option 参数及 ScrapAward 结构 class ScrapAward {constructor(userOption) {this.option = {canvasI

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>实现一个“刮刮乐”游戏</title> <style type="text/css"> .demo { width: 320px; margin: 10px auto 20px auto; min-height: 300px; } .msg { text-align: center; height: 32px; line-height: 32px; font-weight: bold; margin-top: 50px; } </style> </head> <body> <div id="main"> <div class="msg"> 刮刮下面图片看看什么效果哈哈哈,<a href="javascript:void(0)" id="try_again">再来一次</a> </div> <div class="demo"> <canvas id="canvas"></canvas> </div> </div> <script src=http://www.jb51.net/html5/"./scrapAward-dev.js"></script> <script> window.onload = function() { let scraAward = new ScrapAward({ height: 570, backgroundImageUrl: './suporka_home.jpg', coverImage: { url: './super.jpg', // color: 'red', width: 428, height: 570, }, callback: () => { alert('刮奖结束'); }, }); document.getElementById('try_again').addEventListener('click', function(e) { scraAward.restart(); }); }; </script> </body> </html>

总结

以上所述是小编给大家介绍的Html5 Canvas 实现一个“刮刮乐”游戏,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

(编辑:常州站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

热点阅读