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。

相关文章

Python实例题之pygame开发打飞机游戏实例代码

Python实例题之pygame开发打飞机游戏实例代码

《Python实例题之pygame开发打飞机游戏实例代码》对于python的学习者,能够写出一个飞机大战的程序代码,是不是感觉到非常的开心,：本文主要介绍Python实例题之pygame开发打飞机... 目录题目pygame-aircraft-game使用 Pygame 开发的打飞机游戏脚本代码解释初始化部
阅读更多...
Python中使用uv创建环境及原理举例详解

Python中使用uv创建环境及原理举例详解

《Python中使用uv创建环境及原理举例详解》uv是Astral团队开发的高性能Python工具,整合包管理、虚拟环境、Python版本控制等功能,：本文主要介绍Python中使用uv创建环境及... 目录一、uv工具简介核心特点：二、安装uv1. 通过pip安装2. 通过脚本安装验证安装：配置镜像源（可
阅读更多...
Python基于微信OCR引擎实现高效图片文字识别

Python基于微信OCR引擎实现高效图片文字识别

《Python基于微信OCR引擎实现高效图片文字识别》这篇文章主要为大家详细介绍了一款基于微信OCR引擎的图片文字识别桌面应用开发全过程,可以实现从图片拖拽识别到文字提取,感兴趣的小伙伴可以跟随小编一... 目录一、项目概述1.1 开发背景1.2 技术选型1.3 核心优势二、功能详解2.1 核心功能模块2.
阅读更多...
Java中实现线程的创建和启动的方法

Java中实现线程的创建和启动的方法

《Java中实现线程的创建和启动的方法》在Java中,实现线程的创建和启动是两个不同但紧密相关的概念,理解为什么要启动线程（调用start()方法）而非直接调用run()方法,是掌握多线程编程的关键,... 目录1. 线程的生命周期2. start() vs run() 的本质区别3. 为什么必须通过 st
阅读更多...
python编写朋克风格的天气查询程序

python编写朋克风格的天气查询程序

《python编写朋克风格的天气查询程序》这篇文章主要为大家详细介绍了一个基于Python的桌面应用程序,使用了tkinter库来创建图形用户界面并通过requests库调用Open-MeteoAPI... 目录工具介绍工具使用说明python脚本内容如何运行脚本工具介绍这个天气查询工具是一个基于 Pyt
阅读更多...
Ubuntu设置程序开机自启动的操作步骤

Ubuntu设置程序开机自启动的操作步骤

《Ubuntu设置程序开机自启动的操作步骤》在部署程序到边缘端时,我们总希望可以通电即启动我们写好的程序,本篇博客用以记录如何在ubuntu开机执行某条命令或者某个可执行程序,需要的朋友可以参考下... 目录1、概述2、图形界面设置3、设置为Systemd服务1、概述测试环境：Ubuntu22.04 带图
阅读更多...
Python程序打包exe,单文件和多文件方式

Python程序打包exe,单文件和多文件方式

《Python程序打包exe,单文件和多文件方式》：本文主要介绍Python程序打包exe,单文件和多文件方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录python 脚本打成exe文件安装Pyinstaller准备一个ico图标打包方式一（适用于文件较少的程
阅读更多...
Macos创建python虚拟环境的详细步骤教学

Macos创建python虚拟环境的详细步骤教学

《Macos创建python虚拟环境的详细步骤教学》在macOS上创建Python虚拟环境主要通过Python内置的venv模块实现,也可使用第三方工具如virtualenv,下面小编来和大家简单聊聊... 目录一、使用 python 内置 venv 模块（推荐）二、使用 virtualenv（兼容旧版 P
阅读更多...
Linux lvm实例之如何创建一个专用于MySQL数据存储的LVM卷组

Linux lvm实例之如何创建一个专用于MySQL数据存储的LVM卷组

《Linuxlvm实例之如何创建一个专用于MySQL数据存储的LVM卷组》：本文主要介绍使用Linux创建一个专用于MySQL数据存储的LVM卷组的实例,具有很好的参考价值,希望对大家有所帮助,... 目录在Centos 7上创建卷China编程组并配置mysql数据目录1. 检查现有磁盘2. 创建物理卷3. 创
阅读更多...
Python程序的文件头部声明小结

Python程序的文件头部声明小结

《Python程序的文件头部声明小结》在Python文件的顶部声明编码通常是必须的,尤其是在处理非ASCII字符时,下面就来介绍一下两种头部文件声明,具有一定的参考价值,感兴趣的可以了解一下... 目录一、# coding=utf-8二、#!/usr/bin/env python三、运行Python程序四、
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2