在遊戲陪玩系統原始碼中實現“刮刮樂”效果，也是提升使用者興趣度的一種方式，畢竟迎合潮流才能長久發展，“刮刮樂”效果在很多平臺上都已經實現，今天我們就一起來學習一下吧。

“刮刮樂”效果如下：

“刮刮樂”實現程式碼如下：

html頁面部分

首先，在遊戲陪玩系統原始碼中新建html頁面程式碼。因為要可以塗鴉，所以我們需要用到canvas來做成塗鴉塊，用於蓋住我們的獎勵文案塊。這裡我們用div的demo來包住canvas，然後獲取滑鼠點選的座標時，我們就可以直接獲取demo的x和y座標，當做滑鼠點選在canvas上的座標傳入canvas進行準確繪圖了。

//樣式部分
* {
    margin: 0;
    padding: 0;
}
#demo {
    width: 320px;
    margin: auto;
    height: 200px;
    position: relative;
}
.txtBox {
    position: absolute;
    top: 0;
    left: 0;
    width: 320px;
    height: 200px;
    z-index: -1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    font-weight: bold;
}
//HTML部分
<div id="demo">
    <canvas id="canvasBox">瀏覽器不支援</canvas>
    <div class="txtBox">美夢成真</div>
</div>

js部分

在遊戲陪玩系統原始碼開發時，我們需要對canvas進行操作，需要把canvas設定成長方形且可以塗鴉的灰色塊。通過兩層的繪圖，一層透明，一層灰色，達到塗鴉灰色部分，就可以透過底部透明繪圖看到的div資訊內容了。

var canvas = document.getElementById("canvasBox");
var demo = document.getElementById("demo");
var ctx;
var w = 320,
    h = 200;
var offsetX = demo.offsetLeft,
    offsetY = demo.offsetTop;
var mousedown = false;
canvas.width = w;
canvas.height = h;
ctx = canvas.getContext("2d");
ctx.fillStyle = "transparent";//底部矩陣透明
ctx.fillRect(0, 0, w, h);
ctx.fillStyle = "gray";//灰色
ctx.fillRect(0, 0, w, h);//頂部繪圖填充矩陣灰色
ctx.globalCompositeOperation = "destination-out";

這樣我們就在遊戲陪玩系統原始碼中繪圖出了一個灰色矩陣。

其中，canvas的globalCompositeOperation屬性為destination-out，會使在遊戲陪玩系統原始碼中的源影像外顯示目標影像。只有源影像外的目標影像部分會被顯示，源影像是透明的。

滑鼠點選移動事件監聽

在遊戲陪玩系統原始碼pc端，對滑鼠的點選事件的監聽，在滑鼠點選的情況下並且移動了滑鼠，我們就對滑鼠的座標進行獲取，並且傳遞給canvas繪圖出相對應的位置，達到刮刮樂的效果。

canvas.addEventListener("touchstart", eventDown);//滑鼠移動開始
canvas.addEventListener("touchend", eventUp);//滑鼠移動結束
canvas.addEventListener('touchmove', eventMove);//滑鼠移動
canvas.addEventListener("mousedown", eventDown);//滑鼠點選
canvas.addEventListener("mouseup", eventUp);//滑鼠鬆開
canvas.addEventListener("mousemove", eventMove)//滑鼠移動中
function eventDown(e) {//監聽滑鼠按住
    e.preventDefault();
    mousedown = true;
}
function eventUp(e) {//監聽滑鼠鬆開
    e.preventDefault();
    mousedown = false;
}
function eventMove(e) {//監聽滑鼠按住並移動，執行繪圖函式
    e.preventDefault();
    if (mousedown) {
        var x = (e.clientX + document.body.scrollLeft || e.pageX) - offsetX || 0,
            y = (e.clientY + document.body.scrollTop || e.pageY) - offsetY || 0;
        ctx.beginPath()//繪圖開始路徑
        ctx.rect(x, y, 20, 20);//建立一個正方形刮刮痕跡形狀
        ctx.fill();
    }
}

結言

想要在遊戲陪玩系統原始碼手機端的實現的話，就需要知道手機端的點選事件是什麼，然後再做座標的相減，思路差不多。到此就做出來啦，簡單叭，希望以上內容能帶給大家一些幫助。

本文轉載自網路，轉載僅為分享乾貨知識，如有侵權歡迎聯絡雲豹科技進行刪除處理

如何在遊戲陪玩系統原始碼中實現“刮刮樂”效果？

“刮刮樂”效果如下：

“刮刮樂”實現程式碼如下：

結言

相關文章