游戲的套路你知道嗎？ H5 Canvas刮刮樂

zizihjk 8年前發布 | 12K 次閱讀前端技術 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;background-color:lightskyblue;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;  background-color: #0480BE;"></div>
                        <div id="div_two" style="height: 100px; width: 100px; float: left; background-color:#004444"></div>
                        <div id="div_three" style="height: 100px; width: 100px; float: right; background-color: #005580; "></div>
                        <div id="div_four" style="height: 100px; width: 100px; float: left; clear: both; background-color: #149BDF;"></div>
                        <div id="div_five" style="height: 100px; width: 100px; float: left;  background-color: #008800;"></div>
                        <div id="div_six" style="height: 100px; width: 100px; float: left;  background-color: #149BDF;"></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 屬性，如 id
                    img.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 很多時候還會加上上下文判斷從客戶端入手的事情還是少想

游戲玩玩就好別太投入。

附上效果圖

來自：http://www.cnblogs.com/SWSHBON/p/6073159.html

本文由用戶 zizihjk 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1479372309084.html

前端技術 canvas

游戲的套路你知道嗎？ H5 Canvas刮刮樂

相關經驗

相關資訊

相關文檔

目錄