最近刚刚做了一个刮刮卡的游戏,现在给大家分享一下制作的思路。先给大家看下效果图。
页面是直接在网上找的就不过多介绍,大家可以直接百度。当用户进入页面的时候,后台获取用户mac地址并存入数据库作为用户的标志,以便于用户第二天进入时刷新抽奖次数。
public static NetworkInterface[] NetCardInfo() { return NetworkInterface.GetAllNetworkInterfaces(); } public string GETMAC() { List<string> macs =new List<string>(); NetworkInterface[] interfaces = NetworkInterface.GetAllNetworkInterfaces(); foreach (NetworkInterface ni in interfaces) { if (ni.GetPhysicalAddress().ToString() != "") { macs.Add(ni.GetPhysicalAddress().ToString()); } } return macs[0]; }
抽奖结果这一块是用户进入页面直接生成一个随机数并与数据库匹配,根据结果改变刮刮卡后面的图片。当用户刮完以后根据用户是否中奖转跳至不同的页面,下面是判断用户是否刮完的代码
canvas.addEventListener('mouseup', function(e){ e.preventDefault(); var num = 0; var datas = ctx.getImageData(0,0,320,400); for (var i = 0; i < datas.data.length; i++) { if (datas.data[i] == 0) { num++; }; }; if (num >= datas.data.length * 0.7) { ctx.fillRect(0,0,320,400); var i='<%=geti() %>'; if(i==1){ i++; var stsr='<%=str %>'; if(stsr!="") { alert("恭喜您中了"+stsr+"!即将跳转至领奖页面."); setTimeout(function(){ window.location.href("userInfo.aspx"); },1000); } else { document.getElementById('btn').style.display="block"; } if(i==2) { return; } } }; });
第一篇博客,如有不足之处,请多多指教。