loadimage怎么使用_使用Canvas实现一个在线发牌游戏 [纯前端、附源码]

最新推荐文章于 2023-03-03 15:00:04 发布
最新推荐文章于 2023-03-03 15:00:04 发布
阅读量191 收藏
点赞数
文章标签： loadimage怎么使用
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39786850/article/details/111676601
版权
写在开头
  • 一位作者开源了这个游戏，纯前端实现，原生Canvas
  • 希望大家给他点个star,源码地址:https://github.com/leeseean/sic-bo
为什么要推荐这个项目
  • 在我看来，这个作者是有一定技术实力的，对canvas理解和使用,以及浏览器渲染机制,都是比较了解的，还有原生dom操作能力都可以
  • 里面大量使用了canvas的路径绘制、填充,以及requestAnimationFrame
技术栈
  • 使用原生javascript + html +css
  • 主要绘制是canvas实现
项目初始状态

43b804e57ff58a931639d5c483f136a1.png

怎么玩这个游戏
  • 点击想押注的地方
  • 筹码会有一个动画飞向你押注的区域

  • dbeb3fd3eb48cc86901e09efffaa2bcd.png

  • 押注完成后，定时开始摇骰子，开奖

76fdfcb3e18463575af1ed520893c93f.png

大概实现
  • 初始调用 init函数，生成canvas画布,挂载onclick事件
   init() {
        let _this = this;
        _this.loadImage();
        _this.scale = screen.width         let scale = _this.scale;
        //拿到画布
        let canvas_fly = document.getElementById('canvas_fly'); //渲染飞出去的筹码
        canvas_fly.width = document.body.clientWidth;
        canvas_fly.height = 912 * scale || 800;
        _this.ctxFly = canvas_fly.getContext('2d');
        let canvas_stop = document.getElementById('canvas_stop'); //渲染未确认投注放桌面上的筹码
        canvas_stop.width = document.body.clientWidth;
        canvas_stop.height = 912 * scale || 800;
        _this.ctxStop = canvas_stop.getContext('2d');
        let canvas_betted = document.getElementById('canvas_betted'); //渲染确认投注的筹码
        canvas_betted.width = document.body.clientWidth;
        canvas_betted.height = 912 * scale || 800;
        _this.ctxBetted = canvas_betted.getContext('2d');

        //拿到chipsImgObj对象
        let img = new Image();
        img.onload = function () {
            _this.chipsImgObj = this; //拿到chipsImgObj对象
        }
        img.src = './images/chips.png';

        //确定所用筹码
        $('.chips>.chip').off('click').on('click', function (e) {
            $(this).addClass('on').siblings('.chip').removeClass('on');
            _this.priceNum = +$(this).attr('priceNum');
        });
        $('.chips>.chip10').trigger('click'); //默认筹码10

        const pieceIntervalOver = { //连续点击翻倍生不生效的flag
            'betFor': false,
            'betted': false,
            'pieceCount': 0,
        };
        const cancelOk = {
            ok: false,
            count: 0,
        }; //取消完毕，默认false
        const resetOk = {
            ok: false,
            count: 0,// 防止重复点击
        }
        //点击桌面选号
        $('[rel="selectCode"]').off('click').on('click', function (e) {
            if (cancelOk.ok || cancelOk.count === 0) {
                cancelOk.count = 0;
            } else {
                return; //没取消完毕不准过去
            }

            _this.flyState = 'flyTo';
            let code = $(this).attr('value');
            let method = $(this).attr('method');
            let startPos = {
                x: $(`.chips .chip${_this.priceNum}`).offset().left,
                y: $(`.chips .chip${_this.priceNum}`).offset().top,
            };
            let endPos = {
                x: $(this).offset().left + $(this)[0].offsetWidth * scale / 2 - $('.chips>.chip').width() * scale / 2,
                y: $(this).offset().top + $(this)[0].offsetHeight * scale / 2 - $('.chips>.chip').height() * scale / 2,
            };
            _this.eachBetCount[code] = _this.eachBetCount[code] || 0;
            _this.eachBetCount[code] += _this.priceNum;
            _this.betOrderRecords[code] = { //记录order
                method: method,
                code: code,
                price: _this.priceNum,
                amount: _this.eachBetCount[code],
                piece: _this.eachBetCount[code],
            };
            let clickedElemOption = { //被点击元素的相关数据
                priceNum: _this.priceNum,
                code: code,
                position: {
                    x: $(this).offset().left,
                    y: $(this).offset().top,
                },
                width: $(this).outerWidth(),
                height: $(this).outerHeight(),
            };
            _this.betForRecords.push({ //记录投注
                elemOption: copyJSON(clickedElemOption),
                priceNum: _this.priceNum,
                startPos,
                endPos,
            });

            _this.chipFly(_this.ctxFly, _this.ctxStop, _this.chipsImgObj, _this.priceNum, startPos, endPos, clickedElemOption, 10);
            $('.betMoneyAmount').text(_this.calculateBetMoney());
        });
        //取消投注
        $('.cancelButton').off('click').on('click', function (e) {
            if (cancelOk.ok || cancelOk.count === 0) {
                cancelOk.ok = false;
            } else {
                return; //没取消完毕不准过去
            }
            if ((pieceIntervalOver.betFor && pieceIntervalOver.betted) || pieceIntervalOver.pieceCount === 0) {

            } else {
                return; //上次翻倍全部渲染结束才能进行下一次点击操作，没结束操作无效                
            }
            cancelOk.count += 1;

            pieceIntervalOver.pieceCount = 0;
            if (_this.betForRecords.length === 0) {
                return;
            }
            _this.flyState = 'flyBack';
            //timechunk 分时函数
            let i = 0;
            let interval = setInterval(() => {
                if (i === _this.betForRecords.length) {
                    cancelOk.ok = true;
                    cancelOk.count = 0; //回到0
                    _this.betForRecords.length = 0;
                    _this.betOrderRecords = {};
                    _this.eachBetCount = {};
                    _this.ctxStop.clearRect(0, 0, document.body.clientWidth, document.body.clientHeight);
                    $('.betMoneyAmount').text(_this.calculateBetMoney());
                    return clearInterval(interval);
                }
                let record = _this.betForRecords[i];
                _this.chipFly(_this.ctxFly, _this.ctxStop, _this.chipsImgObj, record.priceNum, record.endPos, record.startPos, record.elemOption, 10);
                i++;
            }, 10);
        });
        //重置投注
        $('.resetButton').off('click').on('click', function (e) {
            if (resetOk.ok || resetOk.count === 0) {
                resetOk.ok = false;
            } else {
                return; //没取消完毕不准过去
            }
            if ((pieceIntervalOver.betFor && pieceIntervalOver.betted) || pieceIntervalOver.pieceCount === 0) {

            } else {
                return; //上次翻倍全部渲染结束才能进行下一次点击操作，没结束操作无效                
            }
            resetOk.count += 1;

            pieceIntervalOver.pieceCount = 0;
            if (_this.betForRecords.length === 0 && _this.bettedRecords.length === 0) {
                return;
            }
            _this.flyState = 'flyBack';
            //timechunk 分时函数
            let i = 0;
            let interval = setInterval(() => {
                if (i === _this.betForRecords.length) {
                    _this.betForRecords.length = 0;
                    _this.betOrderRecords = {};
                    _this.eachBetCount = {};
                    _this.ctxStop.clearRect(0, 0, document.body.clientWidth, document.body.clientHeight);
                    $('.betMoneyAmount').text(_this.calculateBetMoney());
                    clearInterval(interval);
                    let j = 0;
                    const _interval = setInterval(() => {
                        if (j === _this.bettedRecords.length) {
                            resetOk.ok = true;
                            resetOk.count = 0; //回到0
                            _this.bettedRecords.length = 0;
                            _this.ctxBetted.clearRect(0, 0, document.body.clientWidth, document.body.clientHeight);
                            $('.betMoneyAmount').text(_this.calculateBetMoney());
                            return clearInterval(_interval);
                        }
                        console.log(j)
                        const bettedRecord = _this.bettedRecords[j];
                        _this.chipFly(_this.ctxFly, _this.ctxBetted, _this.chipsImgObj, bettedRecord.priceNum, bettedRecord.endPos, bettedRecord.startPos, bettedRecord.elemOption, 10);
                        j++;
                    }, 10);
                    return;
                }
                const betForRecord = _this.betForRecords[i];
                _this.chipFly(_this.ctxFly, _this.ctxStop, _this.chipsImgObj, betForRecord.priceNum, betForRecord.endPos, betForRecord.startPos, betForRecord.elemOption, 10);
                i++;
            }, 10);

        });
        //确认投注
        $('.betButton').off('click').on('click', function (e) {
            if (_this.betForRecords.length === 0) {
                alert('请先下注！');
                return;
            }
            if (cancelOk.ok || cancelOk.count === 0) {
            } else {
                return; //没取消完毕不准过去
            }
            if ((pieceIntervalOver.betFor && pieceIntervalOver.betted) || pieceIntervalOver.pieceCount === 0) {

            } else {
                return; //上次翻倍全部渲染结束才能进行下一次点击操作，没结束操作无效                
            }
            _this.flyState = 'betted';
            _this.bettedRecords = _this.bettedRecords.concat(_this.betForRecords);
            _this.betForRecords.forEach((record) => {
                _this.chipFly(_this.ctxFly, _this.ctxBetted, _this.chipsImgObj, record.priceNum, record.endPos, record.endPos, record.elemOption, 30);
            });
            _this.ctxStop.clearRect(0, 0, document.body.clientWidth, document.body.clientHeight);
            _this.betForRecords.length = 0;
            _this.betOrderRecords = {};
            _this.eachBetCount = {};
        });
        //翻倍投注 
        $('.pieceButtoon').off('click').on('click', function (e) {
            let bettedLen = _this.bettedRecords.length;
            let betForLen = _this.betForRecords.length;
            if (bettedLen === 0 && betForLen === 0) {
                return;
            }
            if (cancelOk.ok || cancelOk.count === 0) {
            } else {
                return; //没取消完毕不准过去
            }
            if ((pieceIntervalOver.betFor && pieceIntervalOver.betted) || pieceIntervalOver.pieceCount === 0) {
                pieceIntervalOver.betFor = false;
                pieceIntervalOver.betted = false;
                pieceIntervalOver.pieceCount += 1;
            } else {
                return; //上次翻倍全部渲染结束才能进行下一次点击操作，没结束操作无效                
            }

            //timechunk分时函数，防止短时间多次触发卡死浏览器
            let i = 0;
            let interval_bet = setInterval(() => {
                if (i === bettedLen) {
                    pieceIntervalOver.betted = true;
                    return clearInterval(interval_bet);
                }
                let code = _this.bettedRecords[i]['elemOption']['code'];
                _this.priceNum = _this.bettedRecords[i]['priceNum'];
                $(`[rel="selectCode"][value="${code}"]`).trigger('click'); //自动桌面选号点击
                i++;
            }, 10);
            let j = 0;
            let interval_betted = setInterval(() => {
                if (j === betForLen) {
                    pieceIntervalOver.betFor = true;
                    return clearInterval(interval_betted);
                }
                let code = _this.betForRecords[j]['elemOption']['code'];
                _this.priceNum = _this.betForRecords[j]['priceNum'];
                $(`[rel="selectCode"][value="${code}"]`).trigger('click'); //自动桌面选号点击
                j++;
            }, 10);
        });
    },
  • init函数初始化中将canvas画笔挂载到this中
_this.ctxStop = canvas_stop.getContext('2d');
_this.ctxBetted = canvas_betted.getContext('2d');
...
  • 确认投注后,清空未确认投注放桌面上的筹码画布
 $('.betButton').off('click').on('click'、、、
 _this.ctxStop.clearRect(0, 0, document.body.clientWidth, document.body.clientHeight);
  • 如果没有下注，就提示:
  if (_this.betForRecords.length === 0) {
                alert('请先下注！');
                return;
            }
最后，希望大家多看看这个源码，了解canvas使用
  • 记得给作者点个star哦，这是一个入门canvas的一个很好的开源项目，点击左下角的阅读原文就可以进入到源码地址啦：https://github.com/leeseean/sic-bo
  • 如果深入点的话，可以再学习一下canvas的像素控制，或者pixijs的使用
  • 在线体验这个游戏的地址是：
  • https://leeseean.github.io/sic-bo/

ece5257d5e8793a7f8c0c844780d6958.png

 相关推荐

Kbone原理解析，小程序技术该如何选型？

Node.js结合ProtoBuffer,从零实现一个redis!

详解 ES10 中 Object.fromEntries() 的缘起

JS执行上下文的两个阶段做了些啥？

让你彻底掌握 TS 枚举

遇到这些 TS 问题你会头晕么？

在 TS 中如何减少重复代码

用上这几招，轻松实现 TS 类型提取

TypeScript 期中考试现在开始

前端学习数据结构与算法系列(八)：快速排序与三路快排

前端学习数据结构与算法系列(七)：堆排序与归并排序

前端学习数据结构与算法系列(六)：选择排序与插入排序

前端学习数据结构与算法系列(五)：冒泡排序的理解与实现

前端学习数据结构与算法系列(四)：哈希、堆和二叉查找树

前端学习数据结构与算法系列(三)：栈与队列的基础知识

前端学习数据结构与算法系列(二)：链表与数组的基础知识

前端学习数据结构与算法系列(一)：初识数据结构与算法

腾讯文档原来是这样用 webpack5 的 Module federation 特性的！

绝大部分的开源项目都投入TypeScript了！你呢？

【收藏系列】JS灵魂之问(下) - 附个人成长经验分享

【收藏系列】JS灵魂之问, 是否有offer看你接到多少个(中)

【收藏系列】JS灵魂之问, 请问你能接得住几个？(上)

【JS进阶深挖】完全弄懂数据类型转换(上)

0b90967d3c08f2d300d01d9f2fb8c4ac.png

1efd3abf553f09506993b44bd1d72008.png点在看的人特别帅/美 43f36b4fb944333548716894db0bffce.gif
weixin_39786850
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Windows程序设计——LoadImage参数及其用法
流楚丶格念的博客
02-14 6558
LoadImage是一种函数，功能是装载图标，光标，或位图。 简介编辑 函数功能：该函数装载图标，光标，或位图。 函数原型： HANDLE LoadImage （ HINSTANCE hinst， LPCTSTR lpszName， UINT uType， int cxDesired， int cyDesired， UINT fuLoad ）； 参数 hinst：处理包含被装载图像模块的实例。若要...
canvas loadImage图片加载
anshshivi的博客
05-25 1817
canvas 图片加载 以及图片切换显示 canvas 加载图片使用loadImage函数，参数传递：图片路径，当图片加载完成onImageLoaded触发，通过can.isImageLoaded(url image)判断图片是否加载成功，成功true，失败false。 isImageError(url image)判断图片加载失败，失败true。 图片加载成功后： var ctx = can.getContext("2d") ctx.drawImage(curImage, 0, 0, width, hei
LoadImage用法
Hisin Wang的专栏
05-15 4万+
函数原型HANDLE LoadImage( HINSTANCE hinst, // 若加载程序外部资源传NULL,否则一般传AfxGetInstanceHandle() LPCTSTR lpszName, // 图片名称或全路径 UINT uType, // 图片类型:IMAGE_BITMAP或IMAGE_ICON或IMAGE_CURSOR
loadimage()函数的使用
热门推荐
qq_42289041的博客
05-14 8万+
LoadImage（）是一种函数，功能是装载图标，光标，或位图。支持bmp，jpg，gif，emf，wmf，ico格式 // 从图片文件获取图像 void loadimage( IMAGE* pDstImg, // 保存图像的 IMAGE 对象指针 LPCTSTR pImgFile, // 图片文件名 int nWidth = 0, // 图片的拉伸宽度 ...
canvas学习day3——加载图片loadImage函数，理解回调函数
weixin_41571938的博客
05-02 1341
回调函数 回调函数理解 你到一个商店买东西，刚好你要的东西没有货，于是你在店员那里留下了你的电话，过了几天店里有货了，店员就打了你的电话，然后你接到电话后就到店里去取了货。在这个例子里，你的电话号码就叫回调函数，你把电话留给店员就叫登记回调函数，店里后来有货了叫做触发了回调关联的事件，店员给你打电话叫做调用回调函数，你到店里去取货叫做响应回调事件 1 2 3 按顺序排列， 先使用1 3 然后再回头去用2 在这里2就是回调函数 简单的一句话：被传入的、后又被调用的函数就称为回调函数。 最常见使用回调函数是
小游戏源码_小游戏源码_小游戏_
09-30
然而，这个小游戏源码没有明确提及使用Unity，可能是一个基于Windows Forms或WPF的桌面应用，或者是使用Xamarin跨平台开发的游戏。这表明开发者可能采用了一种更为轻量级的方法来实现拼图游戏。 拼图游戏的基本逻辑...
商业编程-源码-本代码实现了在工具条中使用256色以上的图标.zip
06-22
标题中的"商业编程-源码-本代码实现了在工具条中使用256色以上的图标.zip"揭示了一个关键的技术点，即如何在工具条上显示超过256色的图标，这通常涉及到位图、颜色深度以及图像处理的知识。 首先，我们要理解...
API绘图函数使用一例.rar
04-04
在“API绘图函数使用一例”这个压缩包中，我们可以期待看到一个实际的代码示例，它可能包括了以上所述的各种绘图功能的应用。开发者可能会创建一个简单的程序，比如绘制一个多边形，然后通过调整颜色、线型以及应用...
loadimage_loadimageuefi_loaduefi_
09-30
首先，`LoadImage` 是UEFI Boot Services 提供的一个函数，用于加载PE/COFF格式的二进制文件到内存中。这个函数接受一个EFI加载服务结构体指针、一个表示文件路径的字符串、以及文件的加载选项等参数。它会负责解析...
拼图游戏源码_game_
10-03
通过分析和理解这个C++拼图游戏源码，你可以深入学习C++语言，理解游戏开发的基本流程，同时提升对图像处理、算法设计和用户交互的理解。这是一个极好的实践项目，不仅可以巩固编程基础，还能锻炼问题解决能力。对于...
LoadImage()
gaoqingyu的专栏
03-18 1386
记得还在学校时，做游戏就经常用这个函数来加载一些图片资源的（BMP）。前几 天做项测试，想得到bmp图片的位图数据，为了简单点，我使用HBITMAP hBitmap; BITMAP bitmap; hBitmap = LoadImage( ins, "f1.bmp",  IMAGE_BITMAP, 0, 0, LR_LOADFROMFILE | LR_DEFAULTSIZE);
SBL1启动 - Load Image
墨点梧桐的专栏
07-31 4881
sbl1是平台相关的启动程序，除了执行必要的初始化操作，还负责加载PMIC，QSEE(TZ)，RPM等Firmware，然后跳转到APPSBL执行（XBL跳转到XBL Core，也就是UEFI入口执行）；
UEFI pBS-＞LoadImage /StartImage解析
weixin_50158428的博客
03-03 625
loadimage/startimage结构分析及应用
node利用canvas处理图像，返回给前端，
weixin_42952411的博客
07-20 2796
1.安装 canvas npm i canvas -s 2.引入 const { createCanvas, loadImage } = require('canvas'); const canvas = createCanvas(width, height); const context = canvas.getContext('2d') 3.处理 //这里是因为传入多个坐标，所以进行了循环 //imag 要加载的图片，0，0，分别代表x，坐标，后两个参数分别代表宽度和高度 context.drawI
16. 26. 3. 装入想要尺寸的图片 Load Image and scale it
Python-java-tutorial
10-07 884
import javax.swing.JFrame; import java.awt.event.ActionListener; import java.awt.event.ActionEvent; import java.awt.Image; import javax.
用js写卡牌游戏（七）
Xieisabug
10-29 1792
第三个实现的是出牌，听起来比伤害更简单，可是，它比伤害还要复杂。所以这里的出牌，单单只实现打出伙伴，更复杂的逻辑留到之后的文章。 出牌的思路如下：检查费用，费用够的情况才能打出牌，检查场上还能否放置更多的伙伴，满了也不能打出牌，手牌中删除要出的牌，扣除对应费用，场上添加对应的伙伴，出牌的逻辑才完成。 先完成客户端操作，拖拽卡牌并且放在自己的桌面上代表出牌，处理卡牌拖拽，首先要传入是否可拖拽的选项c...
unity3d-学习笔记4-卡牌游戏制作
pure81的博客
11-04 1194
卡牌游戏制作第三天 需求：实现程序运行过程中点击出现卡背，以及创建一个button组件实现卡组的洗牌，还有创建第二个可视的卡组 出现卡背很简单，在card对象里创建一个Image对象，命名为cardBack，然后在创建新的一个类命名为cardBack，获取当前类对象，在thisCard里创建两个bool值，一个是静态，一个非静态，这里好理解，和java大同小异，静态的资源在确定后就不会改变，而且也能够在非子类的其他类里调用这个数值，通过在程序里点击修改费静态的bool值，将其赋值给静态bool，然后再car
使用Canvas实现一个在线发牌游戏 [纯前端、附源码]
嘿嘿
07-01 832
写在开头 一位作者开源了这个游戏，纯前端实现，原生Canvas 希望大家给他点个star,源码地址:https://github.com/leeseean/sic-bo 这个项目克隆很慢，因为比较大，如果你想知道怎么克隆快，可以看今天公众号第二条推文 《如何把github的clone速度提升到1MB/S》 为什么要推荐这个项目 在我看来，这个作者是有一定技术实力的，对canvas理解和使用,以及浏览器渲染机制,都是比较了解的，还有原生dom操作能力都可以 里面大
imageload
qikaikai0324的博客
11-12 274
//只需要初使化一次         options = new DisplayImageOptions.Builder()                 .cacheInMemory(true)//使用内存缓存                 .cacheOnDisk(true)//使用磁盘缓存                 .showImageOnLoading(R.mipmap.
用loadimage给一个数组里每个数附个图片
最新发布
05-24
可以通过以下代码使用 `loadImage()` 函数来为每个元素创建一个图片对象： ``` for (let i = 0; i ; i++) { arr[i].img = loadImage(`path/to/image/${arr[i]}.jpg`); } ``` 在上面的代码中，我们使用了 `for` ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值