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。

相关文章

Java 虚拟线程的创建与使用深度解析

Java 虚拟线程的创建与使用深度解析

《Java虚拟线程的创建与使用深度解析》虚拟线程是Java19中以预览特性形式引入,Java21起正式发布的轻量级线程,本文给大家介绍Java虚拟线程的创建与使用,感兴趣的朋友一起看看吧... 目录一、虚拟线程简介1.1 什么是虚拟线程？1.2 为什么需要虚拟线程？二、虚拟线程与平台线程对比代码对比示例：三
阅读更多...
k8s按需创建PV和使用PVC详解

k8s按需创建PV和使用PVC详解

《k8s按需创建PV和使用PVC详解》Kubernetes中,PV和PVC用于管理持久存储,StorageClass实现动态PV分配,PVC声明存储需求并绑定PV,通过kubectl验证状态,注意回收... 目录1.按需创建 PV（使用 StorageClass）创建 StorageClass2.创建 PV
阅读更多...
一文详解Python如何开发游戏

一文详解Python如何开发游戏

《一文详解Python如何开发游戏》Python是一种非常流行的编程语言,也可以用来开发游戏模组,：本文主要介绍Python如何开发游戏的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下... 目录一、python简介二、Python 开发 2D 游戏的优劣势优势缺点三、Python 开发 3D
阅读更多...
Linux创建服务使用systemctl管理详解

Linux创建服务使用systemctl管理详解

《Linux创建服务使用systemctl管理详解》文章指导在Linux中创建systemd服务,设置文件权限为所有者读写、其他只读,重新加载配置,启动服务并检查状态,确保服务正常运行,关键步骤包括权... 目录创建服务 /usr/lib/systemd/system/设置服务文件权限：所有者读写js，其他
阅读更多...
idea+spring boot创建项目的搭建全过程

idea+spring boot创建项目的搭建全过程

《idea+springboot创建项目的搭建全过程》SpringBoot是Spring社区发布的一个开源项目,旨在帮助开发者快速并且更简单的构建项目,：本文主要介绍idea+springb... 目录一.idea四种搭建方式1.Javaidea命名规范2JavaWebTomcat的安装一.明确tomcat
阅读更多...
java程序远程debug原理与配置全过程

java程序远程debug原理与配置全过程

《java程序远程debug原理与配置全过程》文章介绍了Java远程调试的JPDA体系,包含JVMTI监控JVM、JDWP传输调试命令、JDI提供调试接口,通过-Xdebug、-Xrunjdwp参数配... 目录背景组成模块间联系IBM对三个模块的详细介绍编程使用总结背景日常工作中，每个程序员都会遇到bu
阅读更多...
uni-app小程序项目中实现前端图片压缩实现方式(附详细代码)

uni-app小程序项目中实现前端图片压缩实现方式(附详细代码)

《uni-app小程序项目中实现前端图片压缩实现方式(附详细代码)》在uni-app开发中,文件上传和图片处理是很常见的需求,但也经常会遇到各种问题,下面：本文主要介绍uni-app小程序项目中实... 目录方式一：使用<canvas>实现图片压缩（推荐，兼容性好）示例代码（小程序平台）：方式二：使用uni
阅读更多...
Git打标签从本地创建到远端推送的详细流程

Git打标签从本地创建到远端推送的详细流程

《Git打标签从本地创建到远端推送的详细流程》在软件开发中,Git标签（Tag）是为发布版本、标记里程碑量身定制的“快照锚点”,它能永久记录项目历史中的关键节点,然而,仅创建本地标签往往不够,如何将其... 目录一、标签的两种“形态”二、本地创建与查看1. 打附注标http://www.chinasem.cn
阅读更多...
python获取指定名字的程序的文件路径的两种方法

python获取指定名字的程序的文件路径的两种方法

《python获取指定名字的程序的文件路径的两种方法》本文主要介绍了python获取指定名字的程序的文件路径的两种方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要... 最近在做项目，需要用到给定一个程序名字就可以自动获取到这个程序在Windows系统下的绝对路径，以下
阅读更多...
Spring创建Bean的八种主要方式详解

Spring创建Bean的八种主要方式详解

《Spring创建Bean的八种主要方式详解》Spring（尤其是SpringBoot）提供了多种方式来让容器创建和管理Bean,@Component、@Configuration+@Bean、@En... 目录引言一、Spring 创建 Bean 的 8 种主要方式1. @Component 及其衍生注解
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2