0.0.4 • Published 2 years ago
game-mi4 v0.0.4
game-mi4
游戏
安装
npm install game-mi4
使用
必须开启 "enableSkia": "true"
- json
{
"usingComponents": {
"game": "game-mi4/index"
}
}
- mini.project.json
{
"node_modules_es6_whitelist": [
"common-game"
]
}
- js
Page({
data: {
gameSource: {
baseOps: {
// 基础位置
numBaseX: 100,
numBaseY: 310,
// 如果配置了每个元素的X位置,上面的基础X位置就失效
num1X: 170,
num2X: 270,
num3X: 350,
num4X: 396,
num5X: 482,
num6X: 560,
// 匹配值
ppz: "9.83",
// 误差值
wcz: "0.53"
},
player: {
boomSpeed: "0.3",//初始速度
maxSpeed: "1",//最大速度
addSpeedTime: 30,//从默认速度加速到最大速度的时间,加到最大速度就不变了
loop: true,
// scale: { x: 0.5, y: 0.5 },
x: "375",
y: "600",
anchor: { x: "0.5", y: "0.5" },
json: require('./ani.json'),
src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01pGKinl1FJvgxCloqf_!!1080040467.png"
},
number: [
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01fKGYoP1FJvgzA34nN_!!1080040467.png", "val": "0", "offsetX": "-20", "width": "109", "height": "205" },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01N6kBj81FJvgxJzs13_!!1080040467.png", "val": "1", "offsetX": "-20", "width": "60", "height": "205" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01YHtaeP1FJvgvYTUQm_!!1080040467.png", "val": "2", "offsetX": "-20", "width": "111", "height": "205" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01gygA2Y1FJvgzqQifL_!!1080040467.png", "val": "3", "offsetX": "-20", "width": "110", "height": "205" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01aGVAI11FJvgzA1bLm_!!1080040467.png", "val": "4", "offsetX": "-20", "width": "123", "height": "205" },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01IGDlKq1FJvguagSWr_!!1080040467.png", "val": "5", "offsetX": "-20", "width": "111", "height": "205" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01zTWiKh1FJvgsyF4GD_!!1080040467.png", "val": "6", "offsetX": "-20", "width": "110", "height": "205" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01wCOnbr1FJvgy3vBAP_!!1080040467.png", "val": "7", "offsetX": "-20", "width": "108", "height": "205" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01MbkatX1FJvgrPf90i_!!1080040467.png", "val": "8", "offsetX": "-20", "width": "110", "height": "205" },
{ "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01vPzQHT1FJvgi9h8vR_!!1080040467.png", "val": "9", "offsetX": "-20", "width": "110", "height": "205" },
{ "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01CISo9R1FJvgzqXdNB_!!1080040467.png", "val": ".", "offsetX": "-20", "width": "60", "height": "205" },
{ "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01u9NT1h1FJvgzAJzho_!!1080040467.png", "val": "秒", "offsetX": "0", "width": "44", "height": "205" },
],
bg: {
src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN017PvNc51FJvgrP7yhP_!!1080040467.png",
width: 750,
height: 1700,
x: 375,
y: 550,
anchor: { x: 0.5, y: 0.5 },
minScale: 1,//默认缩放
maxScale: 2,//最大缩放
addScaleTime: 30,//从默认缩放到最大缩放的时间,加到最大就不变了
}
}
},
onLoad() {
},
beginFun(e) {
// 开始游戏 必须在游戏初始化完成之后开始
this.gameComponent.onEvent("start");
},
stopFun() {
this.gameComponent.onEvent("stop");
},
resetFun() {
this.gameComponent.onEvent("init");
},
isShowFun() {
this.setData({
showGame: !this.data.showGame
})
},
onRef(game) {
this.gameComponent = game;
console.log("进入游戏")
},
onInitDone() {
/* my.alert({
content: "游戏初始化完成"
}) */
},
onGameOver(data) {
console.log(data)
}
});
- xaml
<view class="pageBox">
<view class="gameBox" a:if="{{!showGame}}">
<game gameSource="{{gameSource}}" onRef="onRef" onInitDone="onInitDone" onGameOver="onGameOver" />
</view>
<!--<view style="position:absolute;width:100%;height:2px;background:red;left:0;top:800rpx;"></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: 1200rpx;
/* background: #323449; */
background-color: #ccc;
}