ITPub博客

首页 > 应用开发 > C/C++ > 如何在游戏陪玩系统源码中实现“刮刮乐”效果?

如何在游戏陪玩系统源码中实现“刮刮乐”效果?

C/C++ 作者:云豹科技程序员 时间:2021-11-29 15:50:40 0 删除 编辑
在游戏陪玩系统源码中实现“刮刮乐”效果,也是提升用户兴趣度的一种方式,毕竟迎合潮流才能长久发展,“刮刮乐”效果在很多平台上都已经实现,今天我们就一起来学习一下吧。

“刮刮乐”效果如下:



“刮刮乐”实现代码如下:

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/,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2021-03-10

  • 博文量
    308
  • 访问量
    90191