當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

H5 Canvas刮刮乐

發(fā)布時(shí)間：2025/3/18 编程问答 21 豆豆

生活随笔收集整理的這篇文章主要介紹了 H5 Canvas刮刮乐小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

玩游戲的人很多時(shí)候都會(huì)遇到翻牌子 ?開寶箱。

總有人傻傻的在哪里還糾結(jié)很久到底點(diǎn)哪一個(gè)！糾結(jié) ?指不定翻哪一個(gè)會(huì)多一點(diǎn)，你明明看到那個(gè)卡片的獎(jiǎng)項(xiàng)多。 ??

那我就告訴你好了 ?其實(shí)很多時(shí)候在你點(diǎn)開那個(gè)頁面的時(shí)候你的翻牌結(jié)果已經(jīng)隨著你點(diǎn)開而請(qǐng)求到了。

接下來?就是一些動(dòng)畫效果然后告訴你的中獎(jiǎng)結(jié)果是什么。其實(shí)就很像你看的那種街頭，賭碗一個(gè)樣子。

為什么你的大號(hào)?總是什么獎(jiǎng)都抽不到??小號(hào)總是能夠抽到一些東西。

?其實(shí)就是游戲策劃對(duì)用戶的一些粘度數(shù)據(jù)的分析 ? 還有就是對(duì)你用戶的衰減做的一些統(tǒng)計(jì)分析做出來的。

為什么 ?原來就是簡(jiǎn)簡(jiǎn)單單的開寶箱??現(xiàn)在又加上了?碎片??符??等一些外在的東西。

那就是加強(qiáng)你對(duì)游戲的粘度 ?寶箱里面裝的東西總是一些價(jià)值不菲的裝備能買但是很貴，游戲策劃會(huì)給你點(diǎn)好處 ?讓你開寶箱

等你開了一塊 ?前期讓你能夠很容易的拿到這件成品的百分30左右 ?然后難度升級(jí) 你就打啊打 ?最后等你合成這些東西的時(shí)候

你所合成的屠龍刀早就打折降價(jià)了，你自己心里想LZ是靠實(shí)力一刀一刀砍出來的和后面這些打折了購買的不一樣心里還特高興。

?碎片 ?，符 ?不就是讓你覺得加了這些東西 ?在你開寶箱的時(shí)候幾率會(huì)加大 ?，你就會(huì)更加期待。

畢竟用戶的在線時(shí)長(zhǎng) 可以做很多事 ? 你所消費(fèi)的幾率也會(huì)加大。

好了附上一個(gè) canvas 刮刮樂吧 ?

開始的想法

1.設(shè)置兩個(gè)canvas 的不同的 z-index 來設(shè)置其前后形成遮罩層的效果后面的一個(gè)canvas 實(shí)現(xiàn)繪圖功能前面一個(gè)canvas實(shí)現(xiàn)清除刮獎(jiǎng)涂層的功能當(dāng)然也可以用一個(gè)canvas 在你別清除了時(shí)候邊繪制（那樣會(huì)過于占用資源而且自我覺得實(shí)現(xiàn)麻煩沒有采用）?
2.一個(gè)div用來顯示圖片或者文字 canvas設(shè)置z-index做蒙版在上面然后實(shí)現(xiàn)刮得效果。

其中有借鑒為博友的文章：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 "><div id="show"><label id="winResult">缺那么點(diǎn)運(yùn)氣</label></div></div><script src="~/Scripts/ISWin.js"></script> </body> </html>

接著就是頁面的js ?由于是在Cshtml 中寫的 ?所以會(huì)js在最后 ?如果你是做成手機(jī) 你當(dāng)然會(huì)放在頁尾元素先加載 ?動(dòng)畫效果什么的后行?

//頁面加載完成之后就加載canvas的上下文//添加觸摸事件和觸摸滑動(dòng)事件window.onload = function () {var canvas = document.getElementById("canvas");context = canvas.getContext("2d");//這里沒有給var 是讓其成為全局變量都可以訪問 canvas.addEventListener('touchstart', touch, false);canvas.addEventListener('touchend', touchend, false);draw();}//更改圖片在頁面加載的時(shí)候就先把圖片加載出來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("哇偶你中獎(jiǎng)了");} else {$("#winResult").text("遺憾了！沒中獎(jiǎng)了");} setTimeout(function () { ClearCanvas() }, 800);setTimeout(function () { CloseDiv(bg_div) }, 1200);$("#bg_div").css("display", "block");};//關(guān)閉層其實(shí)也可以用css來控制 function CloseDiv(bg_div) { $("#bg_div").hide();draw();};

你會(huì)問為什么沒有請(qǐng)求的過程 ?我咋知道我的圖片要顯示什么?

畢竟現(xiàn)在網(wǎng)上段子都說了 ?一段腳本會(huì)引發(fā)血案 ?我還是把它寫成一個(gè)文件然后加密混淆什么的畢竟那樣還是加了一些難度了

//----------------------------③ (function () {// 事件綁定window.bindHandler = (function () {if (window.addEventListener) {// 標(biāo)準(zhǔn)瀏覽器return function (elem, type, handler) {// elem:節(jié)點(diǎn) type:事件類型 handler:事件處理函數(shù)// 最后一個(gè)參數(shù)為true:在捕獲階段調(diào)用事件處理程序;為false:在冒泡階段調(diào)用事件處理程序。注意：ie沒有這個(gè)參數(shù)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) {// 標(biāo)準(zhǔn)瀏覽器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);}}}());//添加清除事件及動(dòng)作（獲取canvas 動(dòng)作）}()); //刮獎(jiǎng) 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); }; /// 鼠標(biāo)按下時(shí) - 綁定鼠標(biāo)跟隨事件 function touch() {bindHandler(canvas, 'touchmove', brush1, false);changepic(); } // 停止刮獎(jiǎng)功能 - 解綁鼠標(biāo)跟隨事件 function touchend() {removeHandler(canvas, "mousemove", brush1, false);ISwin(); }//更改圖片在頁面加載的時(shí)候就先把圖片加載出來 function changepic() {Scratch.Frist("/Potiker/Frist"); }//測(cè)試?yán)L制圓形遮罩 function draw() {context.fillStyle = '#A9AB9D';context.beginPath();context.arc(150, 102, 50, 0, Math.PI * 2, true);context.closePath();context.fill(); } // 改進(jìn)意見：逐步清除 function ClearCanvas() {context.clearRect(100, 50, 5 * 22, 5 * 22); }//這里是引入一個(gè)手機(jī)文件里面封裝了一個(gè)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 ={ //請(qǐng)求客戶信息Frist: function (url) {Ajax({method: 'get',type: 'json',url: url,callback: function (data) {}})},//用戶點(diǎn)擊繪制后請(qǐng)求新的圖片路徑并賦值 //如果錯(cuò)誤則調(diào)用創(chuàng)建一張謝謝參與的圖片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 = '';//請(qǐng)重新登錄的圖片}document.getElementById('' + picid).remove();var imglocation = document.getElementById('' + piclocation);var img = document.createElement('img');//設(shè)置 img 屬性，如 idimg.setAttribute("id", "" + picid);img.style.borderRadius = "50px";//設(shè)置 img 圖片地址img.src = "../GIF/" + path;imglocation.appendChild(img);}})},//生成刮獎(jiǎng)結(jié)果Result: function (url) {Ajax({method: 'GET',type: 'json',url: this.url,callback: function (data) {//彈出中獎(jiǎng)金額}})}}

解釋解釋：?
③ ：首先將其封裝之后你可以多個(gè)地方調(diào)用這個(gè)顯而易見然后優(yōu)先執(zhí)行你也是懂得?
② : 這是一個(gè)計(jì)算你的觸摸到的canvas的坐標(biāo)位置?
① ：這里是引入另一個(gè)文件中的某個(gè)方法?
①=》很多時(shí)候我們會(huì)在書寫js文件的時(shí)候去引入另一個(gè)文件中的方法?
兩種解決方案：一：把要引用的文件直接copy過來寫到這個(gè)文件當(dāng)中去（吃虧不討好手機(jī)里當(dāng)然是越小越好咯）。?
二：在js文件中動(dòng)態(tài)引入添加一個(gè)script的js標(biāo)簽。?
注意事項(xiàng)：由于是script標(biāo)簽最好是在頁面的body中引入。

好了來說個(gè)手游的套路 ?：那就是你看到的結(jié)果很多時(shí)候都是服務(wù)端生成的你想去更改抓包什么的 ?然后客服索求幣 ?

人家數(shù)據(jù)庫一查沒有這條數(shù)據(jù) ? 而且一個(gè)游戲一局中的每次請(qǐng)求都是有唯一的ID ?很多時(shí)候還會(huì)加上上下文判斷 ?從客戶端入手的事情還是少想?

游戲 ?玩玩就好 ?別太投入。

附上效果圖

好文要頂?關(guān)注我?收藏該文

總結(jié)

以上是生活随笔為你收集整理的H5 Canvas刮刮乐的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： Hadoop HA+Federation
下一篇： api接口rsa加密