H5 Canvas刮刮乐
玩游戲的人 很多時候都會遇到翻牌子 ?開寶箱。
總有人傻傻的在哪里還糾結很久到底點哪一個！ 糾結 ?指不定翻哪一個會多一點，你明明看到那個卡片的獎項多 。 ??
那我就告訴你好了 ?其實很多時候在你點開那個頁面的時候你的翻牌結果已經隨著你點開而請求到了。
接下來?就是一些動畫效果 然后告訴你的中獎結果是什么。 其實就很像你看的那種街頭，賭碗 一個樣子。
為什么 你的大號?總是什么獎都抽不到??小號總是能夠抽到一些東西。
?其實就是游戲策劃對用戶的一些粘度數據的分析 ? 還有就是對你用戶的衰減做的一些統計分析做出來的。
為什么 ?原來就是簡簡單單的開寶箱??現在 又加上了?碎片??符??等一些外在的東西。
那就是加強你對游戲的粘度 ?寶箱里面裝的東西總是一些價值不菲的 裝備 能買但是很貴 ，游戲策劃會給你點好處 ?讓你開寶箱
等你開了一塊 ?前期讓你能夠很容易的拿到這件成品的百分30左右 ?然后 難度升級 你就打啊 打 ?最后等你合成這些東西的時候
你所合成的 屠龍刀早就打折降價了， 你自己心里想LZ是靠實力一刀一刀砍出來的 和后面這些打折了 購買的不一樣 心里還特高興 。
?碎片 ?，符 ?不就是讓你覺得 加了這些東西 ?在你開寶箱的時候 幾率會加大 ?，你就會更加期待。
畢竟用戶的在線時長 可以做很多事 ? 你所消費的幾率也會加大。
好了 附上一個 canvas 刮刮樂吧 ?
開始的想法
1.設置兩個canvas 的不同的 z-index 來設置其前后 形成遮罩層的效果 后面的一個canvas 實現繪圖功能 前面一個canvas實現清除刮獎涂層的功能 當然也可以用一個canvas 在你別清除了時候邊繪制（那樣會過于占用資源 而且自我覺得實現麻煩沒有采用）?
2.一個div用來顯示圖片或者文字 canvas設置z-index做蒙版在上面 然后實現刮得效果。
其中有借鑒為博友的文章 ：http://www.cnblogs.com/puyongsong/p/6027533.html
<!DOCTYPE html> <html> <head><meta id="viewport" name="viewport" content="width=640,user-scalable=no,minimal-ui" /> <!--禁止用戶縮放--> </head> <body><div style="width:640px;margin:auto;"><!--刮刮樂--><div id="lottery" style="width:300px;height:500px;margin:10px;border-radius:5px;float:left;"><div style="width:300px;height:100px;line-height:100px;text-align:center;font-size:33px;color:blueviolet;">即興彩票</div><div id="txt" style="width:300px;height:200px;font-size:40px;color:peachpuff;display:flex;justify-content:center;align-items:center;flex-direction:column; position:relative;"><!--這里其實是為另一個做的準備 但是代碼就不上了 -->@*<div style=" width: 300px;height: 200px; position:absolute;"><div style=" width: 300px;height: 200px; z-index: 1; "><div id="div_one" style="height: 100px; width: 100px; float: left; "></div><div id="div_two" style="height: 100px; width: 100px; float: left; line-height: 1.5 !important;">></div><div id="div_three" style="height: 100px; width: 100px; float: right; "></div><div id="div_four" style="height: 100px; width: 100px; float: left; clear: both; "></div><div id="div_five" style="height: 100px; width: 100px; float: left; "></div><div id="div_six" style="height: 100px; width: 100px; float: left; "></div></div></div><canvas id="canvas2" width="300px" height="200px" style="top:0;left:0;z-index:2; position: relative;">sorry 您的瀏覽器不支持canvas該組件</canvas></div>*@<div id="canvasArea" style="width:300px;height:200px;position:relative;"><div style="width:300px;height:200px;position:absolute;top:0;left:0;z-index:1;text-align:center;line-height:200px;font-weight:bold;font-size:30px;color:indianred;"><div id="div_img"><img id="winpic" src="~/GIF/0.jpg" style="border-radius:50px"></div> </div><canvas id="canvas" width="300px" height="200px" style="position:absolute;top:0;left:0;z-index:2;"> sorry 您的瀏覽器不支持canvas該組件</canvas> </div></div></div><div id="bg_div" style=" color:red "><!--display:none;--><div id="show"><label id="winResult">缺那么點運氣</label></div></div><script src="~/Scripts/ISWin.js"></script> </body> </html>
接著就是頁面的js ?由于是在Cshtml 中寫的 ?所以會js在最后 ?如果你是做成手機 你當然會放在頁尾 元素先加載 ?動畫效果什么的后行?
//頁面加載完成之后就加載canvas的上下文//添加觸摸事件和觸摸滑動事件window.onload = function () {var canvas = document.getElementById("canvas");context = canvas.getContext("2d");//這里沒有給var 是讓其成為全局變量都可以訪問 canvas.addEventListener('touchstart', touch, false);canvas.addEventListener('touchend', touchend, false);draw();}//更改圖片 在頁面加載的時候就先把圖片加載出來function changepic() {Scratch.ProducingPic("/Potiker/Frist", 'winpic', 'div_img');}function ISwin() {ShowDiv(bg_div); }function ShowDiv(show_div) {//這里是寫死的 純屬故意 var img = document.getElementById('winpic'), result = '12.jpg';var name = img.src.substring(img.src.lastIndexOf('/') + 1).toString();if (name === result) {$("#winResult").text("哇偶你中獎了");} else {$("#winResult").text("遺憾了 ！沒中獎了");} setTimeout(function () { ClearCanvas() }, 800);setTimeout(function () { CloseDiv(bg_div) }, 1200);$("#bg_div").css("display", "block");};//關閉層 其實也可以用css來控制 function CloseDiv(bg_div) { $("#bg_div").hide();draw();};你會問 為什么沒有請求的過程 ?我咋知道我的圖片要顯示什么?
畢竟 現在網上段子都說了 ?一段腳本會引發血案 ?我還是把它寫成一個文件 然后加密 混淆什么的 畢竟那樣 還是加了一些難度了
//----------------------------③ (function () {// 事件綁定window.bindHandler = (function () {if (window.addEventListener) {// 標準瀏覽器return function (elem, type, handler) {// elem:節點 type:事件類型 handler:事件處理函數// 最后一個參數為true:在捕獲階段調用事件處理程序;為false:在冒泡階段調用事件處理程序。注意：ie沒有這個參數elem.addEventListener(type, handler, false);}} else if (window.attachEvent) {// IE瀏覽器return function (elem, type, handler) {elem.attachEvent("on" + type, handler);}}}());// 事件解除window.removeHandler = (function () {if (window.removeEventListener) {// 標準瀏覽器return function (elem, type, handler) {elem.removeEventListener(type, handler, false);}} else if (window.detachEvent) {// IE瀏覽器return function (elem, type, handler) {elem.detachEvent("on" + type, handler);}}}());//添加清除事件及動作 （獲取canvas 動作）}()); //刮獎 var brush1 = function (event) {// ----------------------------② var x = event.touches[0].clientX - canvas.getBoundingClientRect().left;var y = event.touches[0].clientY - canvas.getBoundingClientRect().top;// ----------------------------context.clearRect(x, y, 20, 20);//console.log(x, y); }; /// 鼠標按下時 - 綁定鼠標跟隨事件 function touch() {bindHandler(canvas, 'touchmove', brush1, false);changepic(); } // 停止刮獎功能 - 解綁鼠標跟隨事件 function touchend() {removeHandler(canvas, "mousemove", brush1, false);ISwin(); }//更改圖片 在頁面加載的時候就先把圖片加載出來 function changepic() {Scratch.Frist("/Potiker/Frist"); }//測試繪制圓形遮罩 function draw() {context.fillStyle = '#A9AB9D';context.beginPath();context.arc(150, 102, 50, 0, Math.PI * 2, true);context.closePath();context.fill(); } // 改進意見： 逐步清除 function ClearCanvas() {context.clearRect(100, 50, 5 * 22, 5 * 22); }//這里是引入一個手機文件里面封裝了一個XHRHttpResquset ① new_element = document.createElement("script"); new_element.setAttribute("type", "text/javascript"); new_element.setAttribute("src", "../Scripts/inc.js"); document.body.appendChild(new_element);var Scratch ={ //請求客戶信息Frist: function (url) {Ajax({method: 'get',type: 'json',url: url,callback: function (data) {}})},//用戶點擊繪制后 請求新的圖片路徑并賦值 //如果錯誤則調用 創建一張謝謝參與的圖片ProducingPic: function (url, picid, piclocation) {var path;Ajax({method: 'get',type: 'json',url: url,callback: function (data) {console.log(data);if (data[1].static == "ok") {path = data[0].img;} else {path = '';//請重新登錄的圖片}document.getElementById('' + picid).remove();var imglocation = document.getElementById('' + piclocation);var img = document.createElement('img');//設置 img 屬性，如 idimg.setAttribute("id", "" + picid);img.style.borderRadius = "50px";//設置 img 圖片地址img.src = "../GIF/" + path;imglocation.appendChild(img);}})},//生成刮獎結果Result: function (url) {Ajax({method: 'GET',type: 'json',url: this.url,callback: function (data) {//彈出中獎金額}})}}解釋 解釋：?
③ ：首先將其封裝之后你可以多個地方調用 這個顯而易見 然后優先執行 你也是懂得?
② : 這是一個計算 你的觸摸到的canvas的坐標位置?
① ：這里是引入另一個文件中的某個方法?
①=》很多時候我們會在書寫js文件的時候去引入另一個文件中的方法?
兩種解決方案 ： 一：把要引用的文件直接copy過來 寫到這個文件當中去（吃虧不討好 手機里當然是越小越好咯）。?
二： 在js文件中動態引入 添加一個script的js標簽。?
注意事項： 由于是script標簽 最好是在頁面的body中引入。
好了 來說個手游的 套路 ?： 那就是你看到的結果很多時候都是服務端 生成的 你想去更改 抓包什么的 ?然后客服 索求幣 ?
人家數據庫一查 沒有這條數據 ? 而且一個游戲一局中的每次請求都是有唯一的ID ?很多時候還會加上上下文判斷 ?從客戶端入手的事情還是少想?
游戲 ?玩玩就好 ?別太投入。
附上效果圖
好文要頂?關注我?收藏該文總結
以上是生活随笔為你收集整理的H5 Canvas刮刮乐的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Hadoop HA+Federation
- 下一篇： api接口rsa加密