pixijs在uni-app中创建兼容H5和微信小程序大转盘游戏

2023-12-08 05:45
文章标签 程序 app 微信 创建 游戏 uni 兼容 h5 大转盘 pixijs

本文主要是介绍pixijs在uni-app中创建兼容H5和微信小程序大转盘游戏，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！ 

<template><view class="content"><!-- #ifdef MP-WEIXIN --><canvas type="webgl" @touchstart="touchEvent" @touchmove="touchEvent" @touchend="touchEvent" @touchcancel="touchEvent" id="croplandCanvas" class="cropland_canvas"></canvas><!-- #endif --><!-- #ifdef H5 --><div ref="game"></div><!-- #endif --><div @click="reset">重置转盘数据</div></view>
</template><script>
//#ifdef MP-WEIXIN 
import {createPIXI
} from "@/libs/pixi.miniprogram";
const unsafeEval = require("@/libs/unsafeEval");
const installSpine = require("@/libs/pixi-spine");
const installAnimate = require("@/libs/pixi-animate");
//#endif 
//#ifdef H5 
import * as PIXI from 'pixi.js'
//#endif 
import {detailRes,getP} from './data';
let detailData=JSON.parse(detailRes.content);//游戏活动
let zpbg='https://cdnjoytest.wuuxiang.com/test/material/20231206/TZBz2gpN.png';//大转盘背景图片
let lipin='https://cdnjoytest.wuuxiang.com/test/material/20231206/KuHdLruy.png';//礼品图片
let btn='https://cdnjoytest.wuuxiang.com/test/material/20231206/1tuBp4zX.png';//按钮图片
let imgbg='https://cdnjoytest.wuuxiang.com/test/material/20231206/n3bf2zW4.jpg';//背景图片
let successPri=JSON.parse(getP.content);//获奖信息//#ifdef MP-WEIXIN 
var PIXI={};
// let selfThis;
let canvasObj;
let animationFrame;
//#endif var app ={}
var info = wx.getSystemInfoSync();
var sw = info.screenWidth;//获取屏幕宽高
var sh = info.windowHeight;//获取屏幕宽高
var ratio=info.devicePixelRatio;
var devicePixelRatio=sw/375;
let zIndex=20;
console.log(devicePixelRatio,"===devicePixelRatio")//#ifdef H5 
app = new PIXI.Application({backgroundAlpha: 0 ,antialias: true,autoDensity:true,width:sw,height:sh,resolution:info.devicePixelRatio,
});
//#endif /* 创建container */
let containerObj={container:{} ,container2:{} ,container3:{} ,container4:{} ,
}
function createContainerCom(con,x=app.screen.width / 2,y=app.screen.height / 2
){containerObj[con] = new PIXI.Container();containerObj[con].x = x;containerObj[con].y = y;containerObj[con].sortableChildren =true;//#ifdef H5app.stage.addChild(containerObj[con]);//#endif  
}/* 创建背景 */
function createBg(){// 创建背景精灵const background = PIXI.Sprite.from(imgbg);// 将背景精灵添加到舞台上containerObj['container2'].addChild(background);// 设置背景图片的宽高background.width = sw;background.height = sh;
}
/* 创建转盘 */
function createZp(){ const zpbgAprite = PIXI.Sprite.from(zpbg);containerObj['container3'].addChild(zpbgAprite);zpbgAprite.anchor.set(0.5);zpbgAprite.x = 0;zpbgAprite.y = 0;let ratio=(devicePixelRatio/2);zpbgAprite.scale.x=ratio;zpbgAprite.scale.y=ratio;zpbgAprite.zIndex=zIndex;
}
/* 转盘转动数据 */
let acceleration = 0.01; // 加速度
let speed=0.1;//初始速度
let playStart=false;//转盘是否转动
let angleSuccess=0;//转动角度
/* 重置转盘数据 */
function reset(){acceleration = 0.01; // 加速度speed=0.1;playStart=false;angleSuccess=0;containerObj.container.angle =0;
}
/* 放置按钮图片 */
function createBtn(){const btnAprite = PIXI.Sprite.from(btn);btnAprite.interactive = true; // 启用交互btnAprite.eventMode  = 'static';btnAprite.anchor.set(0.5);containerObj['container4'].addChild(btnAprite);btnAprite.x =0;// sw / 2;btnAprite.y = 0;//sh / 2 -8*1/devicePixelRatio;console.log(btnAprite,"====btnAprite")let scale=(devicePixelRatio/2);btnAprite.scale.x=scale;btnAprite.scale.y=scale;btnAprite.zIndex=5000;btnAprite.on('tap',function(event){//手机端用tap，pc用clickconsole.log("按钮点击事件")if(playStart){return;}event.stopPropagation(); // 阻止事件继续冒泡let findIndex=detailData.prizes.findIndex((item)=>item.id==successPri.prizeId);let angle=(Math.PI * 2)/detailData.prizes.length;//转6圈angleSuccess=360*6-(findIndex*angle*180/Math.PI+90+angle*90/Math.PI);console.log(app,"====appp")// #ifdef H5app.ticker.add(animate2);//#endif//#ifdef MP-WEIXINfunction test(){animate2();animationFrame=canvasObj.requestAnimationFrame(test);app.render(containerObj.container2);}test()//#endif})
}
/* 转动 */
let mxSpeed=0;
function animate2() {   // 可选：当速度达到一定阈值时，减小加速度，实现变速效果if (containerObj.container.angle>(angleSuccess/2)) {mxSpeed=speed>mxSpeed?speed:mxSpeed;acceleration = -0.015;if(speed<mxSpeed/1.5){acceleration=-0.007}} if (speed <= 0.01&&acceleration<0) {acceleration = 0;speed=0.01}speed=speed+acceleration;if((containerObj.container.angle+speed)>angleSuccess){playStart=false;//#ifdef MP-WEIXINanimationFrame && canvasObj.cancelAnimationFrame(animationFrame);//#endif//#ifdef H5app.ticker.remove(animate2);//#endifreturn;}containerObj.container.angle += speed;
}
/* 创建奖项 */
let startAngle=0,endAngle=0;
function createPrizes(){let prizes=detailData.prizes;let angle=(Math.PI * 2)/prizes.length;//弧度prizes.map((item,index)=>{if(index<10){let name=item.name;let pic=item.pic;let id=item.id;startAngle = endAngle;endAngle = startAngle + angle;//扇形背景let ctx = new PIXI.Graphics();let color=(index%2===0)?'0xFFF4D6':'0xFFFFFF';ctx.beginFill(color);console.log(280*(devicePixelRatio/2))ctx.arc(0, 0, 280*(devicePixelRatio/2),  startAngle, endAngle);ctx.lineTo(0, 0);ctx.endFill();containerObj.container.addChild(ctx);ctx.zIndex=20+index;//文字const text = new PIXI.Text(name, {fontFamily: 'Arial',fontSize: 14,fill:0xE5302F,autoDensity:true,antialias:true});text.anchor.set(0.5);text.angle=(180*((angle/2)+startAngle))/ Math.PI+90;//文字旋转角度containerObj.container.addChild(text);text.zIndex=2*zIndex+index;//文字层级//文字位置let centerX = (200*(devicePixelRatio/2)) * Math.cos(((endAngle-startAngle)/2)+startAngle);let centerY = (200*(devicePixelRatio/2)) * Math.sin( ((endAngle-startAngle)/2)+startAngle);text.x=centerX;text.y=centerY;//礼物图片const liwuAprite = PIXI.Sprite.from(lipin);containerObj.container.addChild(liwuAprite);liwuAprite.anchor.set(0.5);liwuAprite.angle=(180*((angle/2)+startAngle))/ Math.PI+90let liwuX = (240*(devicePixelRatio/2)) * Math.cos((angle/2)+startAngle);let liwuY = (240*(devicePixelRatio/2)) * Math.sin( (angle/2)+startAngle);liwuAprite.x = liwuX;liwuAprite.y = liwuY;liwuAprite.scale.x=devicePixelRatio/2.5;liwuAprite.scale.y=devicePixelRatio/2.5;liwuAprite.zIndex=3*zIndex+index;}})}export default {methods:{//#ifdef MP-WEIXINinitMp(){// 获取 canvaswx.createSelectorQuery().select('#croplandCanvas').fields({node: true,size: true}).exec((res) => {const canvas = res[0].node;canvasObj=canvas;// canvasInstance = canvas;// 设置canvas实际宽高canvas.width = sw/ratio;canvas.height = sh/ratio;// PIXI 初始化 -----startPIXI = createPIXI(canvas, sw)unsafeEval(PIXI); //适配PIXI里面使用的eval函数installSpine(PIXI); //注入Spine库installAnimate(PIXI); //注入Animate库// 通过view把小程序的canvas传入app = PIXI.autoDetectRenderer({width: sw,height: sh,'view': canvas,antialias: true,autoDensity:true,resolution:ratio,backgroundAlpha:0});createContainerCom('container2',0,0);createContainerCom('container3')createContainerCom('container',sw / 2,sh / 2 -8*1/devicePixelRatio)createContainerCom('container4')createBg();createZp();createPrizes();createBtn();containerObj.container2.addChild(containerObj.container3);containerObj.container2.addChild(containerObj.container);containerObj.container2.addChild(containerObj.container4);function animate() {canvas.requestAnimationFrame(animate);app.render(containerObj.container2);}animate();})},//#endif//#ifdef H5initH5(){this.$nextTick(()=>{//开始this.$refs.game.appendChild(app.view);createContainerCom('container2',0,0)createContainerCom('container3')createContainerCom('container',sw / 2,sh / 2 -8*1/devicePixelRatio)createContainerCom('container4')createBg();createZp();createPrizes();createBtn();})},//#endif//#ifdef MP-WEIXIN// 小程序事件绑定至pixitouchEvent(e) {PIXI.dispatchEvent(e)},//#endif/* 重置转盘数据 */reset(){acceleration = 0.01; // 加速度speed=0.1;playStart=false;angleSuccess=0;containerObj.container.angle =0;}},mounted(){//#ifdef MP-WEIXINthis.initMp();//#endif//#ifdef H5this.initH5();//#endif// selfThis=this;}
}</script><style>.content {display: flex;flex-direction: column;align-items: center;justify-content: center;}.logo {height: 200rpx;width: 200rpx;margin: 200rpx auto 50rpx auto;}.text-area {display: flex;justify-content: center;}.title {font-size: 36rpx;color: #8f8f94;}#croplandCanvas{width:100vw;height:100vh;background:#fff;}/*#canvs2d{position:absolute;left:-10000px;top:-10000px;width:16px;height:16px;} */
</style>

import {createPIXI
} from "@/libs/pixi.miniprogram";
const unsafeEval = require("@/libs/unsafeEval");
const installSpine = require("@/libs/pixi-spine");
const installAnimate = require("@/libs/pixi-animate");

上边的文件是使用的pixi-miniprogram

GitHub - skyfish-qc/pixi-miniprogram: 一个可运行于微信小程序的PIXI引擎，通过模拟window环境，有些功能小程序无法模拟，就直接修改了PIXI引擎代码，最终使得PIXI引擎正常运行在小程序上

代码中的data.js为mock数据如下

export let detailRes={"code":"200","content":"{\"backGroundImg\":\"https://crm7cdn.wuuxiang.com/pic/20231121/170054609830040B1RH7N_1700546098300_associationbg.jpg\",\"backGroundMusic\":\"https://crm7cdn.wuuxiang.com/pic/20210202/16122355616909ZTQMPFK_1612235561690_抽奖背景音乐.mp3\",\"days\":null,\"description\":\"游戏说明\",\"endDate\":\"2024-01-04 23:59:59\",\"freeMaxCount\":100,\"isFree\":1,\"isJoinNum\":1,\"isQrCodePic\":1,\"isScore\":1,\"isShare\":1,\"isTimeFrame\":0,\"isTimeLimitType\":0,\"joinNum\":21,\"lotteryMusic\":\"https://crm7cdn.wuuxiang.com/pic/20210310/1615346550064W01KTU1L_1615346550064_转盘转动音效.mp3\",\"name\":\"llj查看大转盘4\",\"prizes\":[{\"awardId\":null,\"awardName\":null,\"awardType\":2,\"couponNum\":10,\"id\":\"1000154524\",\"level\":1,\"name\":\"1111\",\"num\":0,\"pic\":\"https://crm7cdn.wuuxiang.com/pic/20231121/1700545276964S3B0C8MG_1700545276964_associationtitle.png\",\"scoreValue\":4.00},{\"awardId\":null,\"awardName\":null,\"awardType\":2,\"couponNum\":1,\"id\":\"1000154530\",\"level\":2,\"name\":\"2222\",\"num\":0,\"pic\":\"https://crm7cdn.wuuxiang.com/pic/20210220/1613801467673IW4LJEFH_1613801467673_defaultAwards.png\",\"scoreValue\":4.00},{\"awardId\":\"1000132326\",\"awardName\":\"赠品券\",\"awardType\":2,\"couponNum\":1,\"id\":\"1000154531\",\"level\":3,\"name\":\"3333\",\"num\":0,\"pic\":\"https://crm7cdn.wuuxiang.com/pic/20210220/1613801467673IW4LJEFH_1613801467673_defaultAwards.png\",\"scoreValue\":4.00},{\"awardId\":null,\"awardName\":null,\"awardType\":2,\"couponNum\":1,\"id\":\"1000154532\",\"level\":4,\"name\":\"4444\",\"num\":0,\"pic\":\"https://crm7cdn.wuuxiang.com/pic/20210220/1613801467673IW4LJEFH_1613801467673_defaultAwards.png\",\"scoreValue\":3.00},{\"awardId\":\"1000132398\",\"awardName\":\"凉拌茄子商品\",\"awardType\":2,\"couponNum\":1,\"id\":\"1000154538\",\"level\":5,\"name\":\"5555\",\"num\":0,\"pic\":\"https://crm7cdn.wuuxiang.com/pic/20210220/1613801467673IW4LJEFH_1613801467673_defaultAwards.png\",\"scoreValue\":1.00},{\"awardId\":\"1000132334\",\"awardName\":\"童商品\",\"awardType\":2,\"couponNum\":1,\"id\":\"1000154539\",\"level\":6,\"name\":\"6666\",\"num\":0,\"pic\":\"https://crm7cdn.wuuxiang.com/pic/20210220/1613801467673IW4LJEFH_1613801467673_defaultAwards.png\",\"scoreValue\":5.00},{\"awardId\":null,\"awardName\":null,\"awardType\":null,\"couponNum\":null,\"id\":\"100000\",\"level\":null,\"name\":\"谢谢参与\",\"num\":0,\"pic\":null,\"scoreValue\":null},{\"awardId\":null,\"awardName\":null,\"awardType\":2,\"couponNum\":1,\"id\":\"1000154532\",\"level\":4,\"name\":\"4444\",\"num\":0,\"pic\":\"https://crm7cdn.wuuxiang.com/pic/20210220/1613801467673IW4LJEFH_1613801467673_defaultAwards.png\",\"scoreValue\":3.00},{\"awardId\":\"1000132398\",\"awardName\":\"凉拌茄子商品\",\"awardType\":2,\"couponNum\":1,\"id\":\"1000154538\",\"level\":5,\"name\":\"5555\",\"num\":0,\"pic\":\"https://crm7cdn.wuuxiang.com/pic/20210220/1613801467673IW4LJEFH_1613801467673_defaultAwards.png\",\"scoreValue\":1.00},{\"awardId\":\"1000132334\",\"awardName\":\"童商品\",\"awardType\":2,\"couponNum\":1,\"id\":\"1000154539\",\"level\":6,\"name\":\"6666\",\"num\":0,\"pic\":\"https://crm7cdn.wuuxiang.com/pic/20210220/1613801467673IW4LJEFH_1613801467673_defaultAwards.png\",\"scoreValue\":5.00}],\"qrCodePic\":\"https://crm7cdn.wuuxiang.com/pic/20231121/1700545199936Q3AC6SQA_1700545199936_eqDiamondS.png\",\"scoreDeduction\":\"1\",\"scoreMaxCount\":10,\"sharePic\":\"https://crm7cdn.wuuxiang.com/pic/20210305/1614934733055AQC0IF4B_1614934733055_分享图标.jpg\",\"shareTitle\":\"参与活动赢大奖\",\"startDate\":\"2023-12-04 00:00:00\",\"times\":null,\"weeks\":null}","msg":"success"};export let getP={"code":"200","content":"{\"couponMemberCountId\":null,\"couponNum\":null,\"couponType\":null,\"freeTimes\":98,\"haveScore\":4.00,\"merchantFlg\":null,\"payTimes\":10,\"prizeAwardId\":null,\"prizeId\":\"1000154530\",\"prizeName\":\"2222\",\"prizeType\":2,\"prizesAwardDes\":\"与他人有人提议他弱由他弱\",\"prizesAwardDesFlg\":1,\"prizesAwardName\":null,\"score\":15.00}","msg":"success"};
代码中的pixi使用版本为7.2.4
代码依托于uni-app创建的项目   uni-app官网

这篇关于pixijs在uni-app中创建兼容H5和微信小程序大转盘游戏的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/468723。

相关文章

微信公众号脚本-获取热搜自动新建草稿并发布文章

微信公众号脚本-获取热搜自动新建草稿并发布文章

《微信公众号脚本-获取热搜自动新建草稿并发布文章》本来想写一个自动化发布微信公众号的小绿书的脚本,但是微信公众号官网没有小绿书的接口,那就写一个获取热搜微信普通文章的脚本吧,：本文主要介绍微信公众... 目录介绍思路前期准备环境要求获取接口token获取热搜获取热搜数据下载热搜图片给图片加上标题文字上传图片
阅读更多...
idea中创建新类时自动添加注释的实现

idea中创建新类时自动添加注释的实现

《idea中创建新类时自动添加注释的实现》在每次使用idea创建一个新类时,过了一段时间发现看不懂这个类是用来干嘛的,为了解决这个问题,我们可以设置在创建一个新类时自动添加注释,帮助我们理解这个类的用... 目录前言：详细操作：步骤一：点击上方的 文件（File），点击&nbmyHIgsp;设置（Setti
阅读更多...
Spring 中使用反射创建 Bean 实例的几种方式

Spring 中使用反射创建 Bean 实例的几种方式

《Spring中使用反射创建Bean实例的几种方式》文章介绍了在Spring框架中如何使用反射来创建Bean实例,包括使用Class.newInstance()、Constructor.newI... 目录1. 使用 Class.newInstance() (仅限无参构造函数):2. 使用 Construc
阅读更多...
Android App安装列表获取方法(实践方案)

Android App安装列表获取方法(实践方案)

《AndroidApp安装列表获取方法(实践方案)》文章介绍了Android11及以上版本获取应用列表的方案调整,包括权限配置、白名单配置和action配置三种方式,并提供了相应的Java和Kotl... 目录前言实现方案         方案概述一、 androidManifest 三种配置方式
阅读更多...
C#原型模式之如何通过克隆对象来优化创建过程

C#原型模式之如何通过克隆对象来优化创建过程

《C#原型模式之如何通过克隆对象来优化创建过程》原型模式是一种创建型设计模式,通过克隆现有对象来创建新对象,避免重复的创建成本和复杂的初始化过程,它适用于对象创建过程复杂、需要大量相似对象或避免重复初... 目录什么是原型模式？原型模式的工作原理C#中如何实现原型模式？1. 定义原型接口2. 实现原型接口3
阅读更多...
如何用java对接微信小程序下单后的发货接口

如何用java对接微信小程序下单后的发货接口

《如何用java对接微信小程序下单后的发货接口》：本文主要介绍在微信小程序后台实现发货通知的步骤,包括获取Access_token、使用RestTemplate调用发货接口、处理AccessTok... 目录配置参数 调用代码获取Access_token调用发货的接口类注意点总结配置参数 首先需要获取Ac
阅读更多...
Android WebView无法加载H5页面的常见问题和解决方法

Android WebView无法加载H5页面的常见问题和解决方法

《AndroidWebView无法加载H5页面的常见问题和解决方法》AndroidWebView是一种视图组件,使得Android应用能够显示网页内容,它基于Chromium,具备现代浏览器的许多功... 目录1. WebView 简介2. 常见问题3. 网络权限设置4. 启用 JavaScript5. D
阅读更多...
基于Python开发PDF转Doc格式小程序

基于Python开发PDF转Doc格式小程序

《基于Python开发PDF转Doc格式小程序》这篇文章主要为大家详细介绍了如何基于Python开发PDF转Doc格式小程序,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 用python实现PDF转Doc格式小程序以下是一个使用Python实现PDF转DOC格式的GUI程序，采用T
阅读更多...
Python中conda虚拟环境创建及使用小结

Python中conda虚拟环境创建及使用小结

《Python中conda虚拟环境创建及使用小结》本文主要介绍了Python中conda虚拟环境创建及使用小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们... 目录0.前言1.Miniconda安装2.conda本地基本操作3.创建conda虚拟环境4.激活c
阅读更多...
使用Python创建一个能够筛选文件的PDF合并工具

使用Python创建一个能够筛选文件的PDF合并工具

《使用Python创建一个能够筛选文件的PDF合并工具》这篇文章主要为大家详细介绍了如何使用Python创建一个能够筛选文件的PDF合并工具,文中的示例代码讲解详细,感兴趣的小伙伴可以了解下... 目录背景主要功能全部代码代码解析1. 初始化 wx.Frame 窗口2. 创建工具栏3. 创建布局和界面控件4
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2