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

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

“刮刮樂”效果如下:


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

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

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();
    }
}

結言

想要在遊戲陪玩系統原始碼手機端的實現的話,就需要知道手機端的點選事件是什麼,然後再做座標的相減,思路差不多。到此就做出來啦,簡單叭,希望以上內容能帶給大家一些幫助。
本文轉載自網路,轉載僅為分享乾貨知識,如有侵權歡迎聯絡雲豹科技進行刪除處理


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69996194/viewspace-2844658/,如需轉載,請註明出處,否則將追究法律責任。