0.0.9 • Published 2 years ago
game-colorkey v0.0.9
game-colorkey
游戏
安装
npm install game-colorkey使用
必须开启 "enableSkia": "true"- json
{
"usingComponents": {
"game": "game-colorkey/colorkey"
}
}- mini.project.json
{
"node_modules_es6_whitelist": [
"common-game"
]
}- js
Page({
data: {
gameSource: {
baseOps: {
renderNextTime: { min: 0, max: 0 },//上一个元素隐藏后随机一个时间生成下一个元素
robotClickShowAni: true,//机器人点中了是否播放动画 默认false:不播放
robotClickWaitAni: !true,//机器人点击中了是等待动画播放完成动画（true时，robotClickShowAni参数无效）
robotClickTime: { min: 0.5, max: 0.8 },//机器人点击的时间范围
tipPos: { x: 750 / 2, y: 100 },
tipHideTime: 1,//提示消失时间
},
hand: { src: "https://img.alicdn.com/imgextra/i3/555657275/O1CN01CTUO2u23c05dnzxQJ_!!555657275.png", x: 400, y: 300 },
items: [
{
src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01iMdD9J1FJvfnSBaJW_!!1080040467.png", val: -5, probability: 1, tipName: "miss", boom: {
type: "animate",
boomSpeed: 0.2,
srcArr: [
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01NZ58CU1FJvfnCpwpH_!!1080040467.png" },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01jwM6pK1FJvfh7ZUqy_!!1080040467.png" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01L6hYIc1FJvfsgOdWR_!!1080040467.png" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01BNd7gj1FJvfnCqoqo_!!1080040467.png" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01aSF9s71FJvfcPpXvL_!!1080040467.png" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01RFNxth1FJvfpMRKSk_!!1080040467.png" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01UysiuF1FJvfoMmpKW_!!1080040467.png" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01h3uxLT1FJvfh7Y9gi_!!1080040467.png" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01qLO4co1FJvfjEyKRc_!!1080040467.png" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01BnqNoD1FJvfpsGsjE_!!1080040467.png" },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01DbNgXu1FJvflPh3oo_!!1080040467.png" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01z8Taon1FJvfh7Y9gv_!!1080040467.png" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01PVRnjd1FJvflNwQp7_!!1080040467.png" },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01JYgj411FJvfrhND01_!!1080040467.png" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01pS1Msx1FJvfpMSs47_!!1080040467.png" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01LgdM6i1FJvfjF0oHn_!!1080040467.png" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01A5sYy01FJvfoMlxHS_!!1080040467.png" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01tyDowU1FJvflPi4As_!!1080040467.png" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01zu0yfe1FJvftNsM7X_!!1080040467.png" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01Kx1n3e1FJvfpMTfzB_!!1080040467.png" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN015TVd3S1FJvfcPoPHp_!!1080040467.png" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN017RlVmr1FJvfrhLnjD_!!1080040467.png" },
],
}
},
{
src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN018sNAT21FJvfnSDvpD_!!1080040467.png", val: 30, probability: 1, tipName: "val30", boom: {
type: "animate",
boomSpeed: 0.2,
srcArr: [
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01NZ58CU1FJvfnCpwpH_!!1080040467.png" },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01jwM6pK1FJvfh7ZUqy_!!1080040467.png" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01L6hYIc1FJvfsgOdWR_!!1080040467.png" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01BNd7gj1FJvfnCqoqo_!!1080040467.png" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01aSF9s71FJvfcPpXvL_!!1080040467.png" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01RFNxth1FJvfpMRKSk_!!1080040467.png" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01UysiuF1FJvfoMmpKW_!!1080040467.png" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01h3uxLT1FJvfh7Y9gi_!!1080040467.png" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01qLO4co1FJvfjEyKRc_!!1080040467.png" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01BnqNoD1FJvfpsGsjE_!!1080040467.png" },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01DbNgXu1FJvflPh3oo_!!1080040467.png" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01z8Taon1FJvfh7Y9gv_!!1080040467.png" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01PVRnjd1FJvflNwQp7_!!1080040467.png" },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01JYgj411FJvfrhND01_!!1080040467.png" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01pS1Msx1FJvfpMSs47_!!1080040467.png" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01LgdM6i1FJvfjF0oHn_!!1080040467.png" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01A5sYy01FJvfoMlxHS_!!1080040467.png" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01tyDowU1FJvflPi4As_!!1080040467.png" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01zu0yfe1FJvftNsM7X_!!1080040467.png" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01Kx1n3e1FJvfpMTfzB_!!1080040467.png" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN015TVd3S1FJvfcPoPHp_!!1080040467.png" },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN017RlVmr1FJvfrhLnjD_!!1080040467.png" },
],
}
},
// { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01qiNiai1FJvfnxwAdq_!!1080040467.png", val: 20, probability: 1, tipName: "val20" },
// { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01hYdcd51FJvfaWA3XG_!!1080040467.png", val: 10, probability: 1, tipName: "val10" },
],
tip: [
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01eEMibK1FJvfaWC4GO_!!1080040467.png", name: "miss" },
{ src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01SVoi9p1FJvflIeA1P_!!1080040467.png", name: "val30" },
{ src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01Lw2gSc1FJvfkztasN_!!1080040467.png", name: "val20" },
{ src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01CTHBCG1FJvfpmXoY1_!!1080040467.png", name: "val10" },
],
timePos: {
align: "center",
x: 660,
y: 14,
bg: {
src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN014z81Ka1FJvfnxzWYg_!!1080040467.png",
x: 630,
y: 0
},
time: 45,//倒计时时间
// 时间数字图片 0 - 9
numOffset: -4,//数字两边空白太多，增加偏移量
numArr: [
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01biqoN01FJvfql8j8Q_!!1080040467.png", val: 0 },
{ "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01oZvdFl1FJvfpmW8b2_!!1080040467.png", val: 1 },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01btVnzO1FJvfk53R5D_!!1080040467.png", val: 2 },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01bDctnk1FJvffDy29i_!!1080040467.png", val: 3 },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01qfArdM1FJvfqlA8Sy_!!1080040467.png", val: 4 },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01IRcRQC1FJvfrSYcRD_!!1080040467.png", val: 5 },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01SDquU61FJvfkztSZZ_!!1080040467.png", val: 6 },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01sYCuuM1FJvfhL4o17_!!1080040467.png", val: 7 },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01HuWQSL1FJvfjW3FNO_!!1080040467.png", val: 8 },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01pLfdFb1FJvfgkP9x4_!!1080040467.png", val: 9 },
],
},
}
},
onLoad() {
my.t = this;
},
// 组件主动公开方法----------
beginFun() {
// 开始游戏
this.gameComponent.onEvent("start");
},
stopFun() {
// 结束游戏
this.gameComponent.onEvent("stop");
},
resetFun(e) {
// 重置游戏
this.gameComponent.onEvent("reset");
},
isShowFun() {
this.setData({
showGame: !this.data.showGame
})
},
// 组件回调方法------------------
onRef(game) {
this.gameComponent = game;
console.log("进入游戏")
},
onInitDone() {
// my.alert({
// content: "游戏初始化完成"
// })
// 初始化game
this.gameComponent.onEvent("reset");
this.beginFun();
this.gameComponent.onEvent("showHand");
},
onUpdate(ops) {
// self:用户 robot:机器人 win:本次点中的(self/robot)
// { self: {score:0}, robot: { score:0},win:"" }
console.log(ops)
// this.gameComponent.onEvent("hideHand");
},
onGameOver(totalScore) {
console.log(totalScore)
}
});- xaml
<view class="pageBox">
<view class="gameBox">
<game gameSource="{{gameSource}}"
a:if="{{!showGame}}"
onRef="onRef"
onInitDone="onInitDone"
onUpdate="onUpdate"
onGameOver="onGameOver"
/>
</view>
<view onTap="beginFun" style="position:relative;z-index: 10;">开始</view>
<view onTap="stopFun" style="position:relative;z-index: 10;">结束</view>
<view onTap="resetFun" style="position:relative;z-index: 10;">重置游戏</view>
<view onTap="isShowFun" style="position:relative;z-index: 10;">切换</view>
</view>-acss
.pageBox{
position: absolute;
width: 750rpx;
height: 100vh;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
.gameBox{
position: relative;
width: 750rpx;
height: 800rpx;
background: #ccc;
}