0.0.9 • Published 2 years ago
game-rio v0.0.9
RIO
游戏
安装
npm install game-rio使用
必须开启 "enableSkia": "true"- json
{
"usingComponents": {
"game": "game-rio/rio"
}
}- mini.project.json
{
"node_modules_es6_whitelist": [
"common-game"
]
}- js
Page({
data: {
gameSource: {
baseOps: {
moveDuration: 2.8,//元素从顶部移动到底部的时间
stepTime: 1.2,//生成元素间隔时间
totalCol: 4,//总共列数
minWidthYObj: { x: 280, y: 670, width: 192 },//顶部最小宽度位置信息
maxWidthYObj: { x: 50, y: 1240, width: 650 },//底部最大宽度位置信息
btnCheckShowTime: 100,//点击按钮，匹配中了，按钮状态显示时间
clickLight: true,//按钮点击就高亮状态
shortScoreType: {//分数类型 从底部开始算
perfect: { min: 90, max: 100 },//90%以上
great: { min: 80, max: 90 },//80%-90%
good: { min: 50, max: 80 },//大于0%
miss: { min: 0, max: 50 },
},
longScoreType: {//分数类型 从底部开始算
perfect: { min: 90, max: 100 },//90%以上
great: { min: 80, max: 90 },//80%-90%
good: { min: 50, max: 80 },//大于0%
miss: { min: 0, max: 50 },
},
tipX: 0.1,//提示分数位置 （不能为0，默认是在屏幕中间）
tipY: 200,//提示分数位置
tipShowTime: 500,//提示分数显示的时间
},
liveY: 1218,//生命线
showRect: { x: 50, y: 650, width: 650, height: 568 },//游戏元素显示区域
items: [
// 跑道1
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01FnxgRb1FJvfqjyCo8_!!1080040467.png", tipType: "tip1", val: 10, anchor: { x: 0.5, y: 1 }, offsetX: { start: 20, end: 108 }, bound: { left: 0, top: 0, right: 0, bottom: 12 }, probability: 1, scaleOps: { min: 0.5, max: 3.5 }, col: 0, },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01TntKOF1FJvfulXky3_!!1080040467.png", tipType: "tip1", val: 10, anchor: { x: 43 / 98, y: 1 }, offsetX: { start: -20, end: 78 }, bound: { left: 0, top: 0, right: 0, bottom: 0 }, probability: 1, scaleOps: { min: 0.7, max: 1.9 }, col: 0, },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01oF7Ouc1FJvfoZpj2t_!!1080040467.png", tipType: "tip1", touchType: "long", val: 10, anchor: { x: 73 / 212, y: 1 }, offsetX: { start: -8, end: 78 }, bound: { left: 0, top: 0, right: 0, bottom: 0 }, probability: 1, scaleOps: { min: 0.4, max: 1.1 }, col: 0, },
// 跑道2
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01BKFQou1FJvfulWx5T_!!1080040467.png", tipType: "tip1", val: 10, anchor: { x: 0.5, y: 1 }, offsetX: { start: 20, end: 84 }, bound: { left: 0, top: 0, right: 0, bottom: 28 }, probability: 1, scaleOps: { min: 0.2, max: 1.2 }, col: 1, },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01HbJRnW1FJvfk1VQCy_!!1080040467.png", tipType: "tip1", val: 10, anchor: { x: 0.5, y: 1 }, offsetX: { start: 0, end: 78 }, bound: { left: 0, top: 0, right: 0, bottom: 0 }, probability: 1, scaleOps: { min: 0.55, max: 1.9 }, col: 1, },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01XnpAPn1FJvfiUO00X_!!1080040467.png", tipType: "tip1", touchType: "long", val: 10, anchor: { x: 0.5, y: 1 }, offsetX: { start: 20, end: 82 }, bound: { left: 0, top: 0, right: 0, bottom: 0 }, probability: 1, scaleOps: { min: 0.26, max: 1.04 }, col: 1, },
// 跑道3
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01hmafej1FJvfmmnkjl_!!1080040467.png", tipType: "tip1", val: 10, anchor: { x: 0.5, y: 1 }, offsetX: { start: 20, end: 68 }, bound: { left: 0, top: 0, right: 0, bottom: 40 }, probability: 1, scaleOps: { min: 0.2, max: 1 }, col: 2, },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01VdNI6s1FJvfnLogTM_!!1080040467.png", tipType: "tip1", val: 10, anchor: { x: 0.5, y: 1 }, offsetX: { start: 0, end: 78 }, bound: { left: 0, top: 0, right: 0, bottom: 0 }, probability: 1, scaleOps: { min: 0.55, max: 1.9 }, col: 2, },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01qn7J9a1FJvfoZne7e_!!1080040467.png", tipType: "tip1", touchType: "long", val: 10, anchor: { x: 0.5, y: 1 }, offsetX: { start: 12, end: 84 }, bound: { left: 0, top: 0, right: 0, bottom: 0 }, probability: 1, scaleOps: { min: 0.22, max: 1.04 }, col: 2, },
// 跑道4
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01qn1j5x1FJvfpk961G_!!1080040467.png", tipType: "tip1", val: 10, anchor: { x: 0.5, y: 1 }, offsetX: { start: 20, end: 68 }, bound: { left: 0, top: 0, right: 0, bottom: 20 }, probability: 1, scaleOps: { min: 0.2, max: 1.5 }, col: 3, },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01tfyM2M1FJvfnLrZJM_!!1080040467.png", tipType: "tip1", val: 10, anchor: { x: 0.5, y: 1 }, offsetX: { start: -10, end: 78 }, bound: { left: 0, top: 0, right: 0, bottom: 0 }, probability: 1, scaleOps: { min: 0.53, max: 1.88 }, col: 3, },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01UoTZX71FJvfmkFmZi_!!1080040467.png", tipType: "tip1", touchType: "long", val: 10, anchor: { x: 139 / 212, y: 1 }, offsetX: { start: 12, end: 84 }, bound: { left: 0, top: 0, right: 0, bottom: 0 }, probability: 1, scaleOps: { min: 0.22, max: 1 }, col: 3, },
],
missTip: { "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN018Qz6K91FJvfobrrfr_!!1080040467.png" },//未匹配到元素的时候的miss提示
tip1: {
good: { "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01JYo2QM1FJvfkLrD3C_!!1080040467.png", val: 2 },
great: { "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN017FLxAa1FJvfr4gt5S_!!1080040467.png", val: 5 },
miss: { "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN018Qz6K91FJvfobrrfr_!!1080040467.png", val: 0 },
perfect: { "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01iUoari1FJvfq4U9HK_!!1080040467.png", val: 7 },
},
btns: [
{
x: 0,
y: 1012,
col: 0,
bound: { left: 30, top: 230, right: 74, bottom: 8 },
def: { src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01CtJHLW1FJvft4zSNM_!!1080040467.png", },
active: { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01jiyue71FJvfrF9Pa7_!!1080040467.png" },
loadActive: { src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01obVnLs1FJvfqGhrcr_!!1080040467.png", x: 6, y: 670, showTime: 100 },
},
{
x: 154,
y: 1012,
col: 1,
bound: { left: 54, top: 230, right: 50, bottom: 6 },
def: { src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01Hc1zHh1FJvfdmcMoJ_!!1080040467.png", },
active: { src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN013CI8g01FJvfrFBgwu_!!1080040467.png" },
loadActive: { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01BbC7Bp1FJvfur7CZn_!!1080040467.png", x: 192, y: 670, showTime: 100 },
},
{
x: 340,
y: 1012,
col: 2,
bound: { left: 47, top: 230, right: 50, bottom: 6 },
def: { src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN0166aTDQ1FJvfoZskEA_!!1080040467.png", },
active: { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01RVwEMt1FJvfnLptQ2_!!1080040467.png" },
loadActive: { src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN0147AnqM1FJvfojF1e1_!!1080040467.png", x: 378, y: 670, showTime: 100 },
},
{
x: 494,
y: 1012,
col: 3,
bound: { left: 80, top: 230, right: 26, bottom: 6 },
def: { src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01R80z8w1FJvfulZMqr_!!1080040467.png", },
active: { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01zsu0xJ1FJvfnLrq2F_!!1080040467.png" },
loadActive: { src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN011045RN1FJvfqrLpcD_!!1080040467.png", x: 423, y: 670, showTime: 100 },
},
],
scorePos: {
align: "center",
x: 50,
y: 8,
// money: true,
// bg: {
// src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01XKDCKs1FJvfIQXH9a_!!1080040467.png",
// x: 50,
// y: 70
// },
// 分数数字图片 0 - 9
numOffset: 6,//数字两边空白太多，增加偏移量
numArr: [
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01XnQQl81FJvfiWpzUk_!!1080040467.png", val: 0 },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01ry5UxO1FJvfu608zW_!!1080040467.png", val: 1 },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01IJ4MEs1FJvfu5y45D_!!1080040467.png", val: 2 },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01Oz1cJl1FJvft7TGAS_!!1080040467.png", val: 3 },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN013b3LVo1FJvfocAs0q_!!1080040467.png", val: 4 },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01A7rcco1FJvfoJrYVm_!!1080040467.png", val: 5 },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01MR7yzL1FJvfpmVzJv_!!1080040467.png", val: 6 },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01AGuYxJ1FJvfke3POi_!!1080040467.png", val: 7 },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01M9iJ3b1FJvfqmRXTO_!!1080040467.png", val: 8 },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01eDGhX71FJvfmmiiKb_!!1080040467.png", val: 9 },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01hKnjmo1FJvfqmPf5M_!!1080040467.png", val: "s" },
],
},
timePos: {
align: "center",
x: 695,
y: 8,
// bg: {
// src: "https://img.alicdn.com/imgextra/i1/555657275/O1CN01SqKaAA23c04M4oqRY_!!555657275.png",
// x: 48,
// y: 206
// },
time: 10,//倒计时时间
// 时间数字图片 0 - 9
numOffset: 6,//数字两边空白太多，增加偏移量
numArr: [
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01XnQQl81FJvfiWpzUk_!!1080040467.png", val: 0 },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01ry5UxO1FJvfu608zW_!!1080040467.png", val: 1 },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01IJ4MEs1FJvfu5y45D_!!1080040467.png", val: 2 },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01Oz1cJl1FJvft7TGAS_!!1080040467.png", val: 3 },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN013b3LVo1FJvfocAs0q_!!1080040467.png", val: 4 },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01A7rcco1FJvfoJrYVm_!!1080040467.png", val: 5 },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01MR7yzL1FJvfpmVzJv_!!1080040467.png", val: 6 },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01AGuYxJ1FJvfke3POi_!!1080040467.png", val: 7 },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01M9iJ3b1FJvfqmRXTO_!!1080040467.png", val: 8 },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01eDGhX71FJvfmmiiKb_!!1080040467.png", val: 9 },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01hKnjmo1FJvfqmPf5M_!!1080040467.png", val: "s" },
],
},
}
},
onLoad() {
},
// 组件主动公开方法----------
beginFun() {
// 开始游戏
this.gameComponent.onEvent("start");
},
resetFun(e) {
// 重置游戏
this.gameComponent.onEvent("reset");
},
// 组件回调方法------------------
onRef(game) {
this.gameComponent = game;
console.log("进入游戏")
},
onInitDone() {
// my.alert({
// content: "游戏初始化完成"
// })
// 初始化game
this.gameComponent.onEvent("reset");
},
onUpdate(ops) {
// { totalScore: 0, imgObj: { } }
console.log(ops)
},
onGameOver(totalScore) {
console.log("游戏结束：", totalScore)
},
isShowFun() {
this.setData({
showGame: !this.data.showGame
})
}
});- xaml
<view class="pageBox">
<view class="gameBox">
<game gameSource="{{gameSource}}"
a:if="{{!showGame}}"
onRef="onRef"
onInitDone="onInitDone"
onUpdate="onUpdate"
onGameOver="onGameOver"
/>
</view>
<view style="position:absolute;width: 100%;height:1px;left:0;top:1218rpx;background:red;"></view>
<!-- <view style="position:absolute;width:192rpx;height: 1500rpx;background:rgba(0,0,0,0.1);left: 280rpx;top:0;"></view> -->
<view onTap="beginFun" style="position:relative;z-index: 10; float:left;">开始</view>
<view onTap="resetFun" style="position:relative;z-index: 10; float:left;">重置游戏</view>
<view onTap="isShowFun" style="position:relative;z-index: 10; float:left;">切换</view>
</view>