0.0.3 • Published 3 years ago
gm-game-box v0.0.3
gm-game-box
箱子运动小游戏
安装
npm install gm-game-box使用
- json
{
"usingComponents": {
"gm-game-box": "gm-game-box/box"
}
}- js
Page({
data: {
show: true,
gameSource: {
showWallLeft: !true,//是否显示周边墙（true:显示）
showWallRight: !true,//是否显示周边墙（true:显示）
showWallTop: !true,//是否显示周边墙（true:显示）
showWallBottom: !!true,//是否显示周边墙（true:显示）
gravityX: 0,//x轴重力（小于0：x轴偏左）
gravityY: 50,//y轴重力（小于0：Y轴偏上）
moveHeight: 5,//1,//每次物体堆积到一定高度的时候，移动距离
moveSpeed: 1 / 10,//移动的速度
defaultDataBottomCenter: true,//默认在底部中心位置一个物体
holdTime: 1500,//掉落后稳定时间，如果超过此时间还未稳定，就手动调用稳定回调
fixDef: {
density: 0.000000001,//密度
friction: 1.0,//摩擦力（0-1）0：没有摩擦力
restitution: 0,//0.2;//回复力（0-1）0：不会反弹
fixedRotation: false,//是否禁止刚体旋转 true:允许旋转
},
bg: { src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01QgXj841FJvbiHOGlZ_!!1080040467.png", width: 750, height: 3400 },
imgArr: [
{ src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN013DVQcR1FJvbegLiKO_!!1080040467.png", width: 120, height: 120, val: 2, },
{ src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01JP8QDF1FJvbjtgwQA_!!1080040467.png", width: 120, height: 120, val: 2, },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01jJEuWr1FJvbgsnOXR_!!1080040467.png", width: 120, height: 120, val: 2, },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01VdNpXR1FJvbmktA4x_!!1080040467.png", width: 120, height: 120, val: 2, },
],
world: [
{ src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01Mc96Ok1FJvbgg833a_!!1080040467.png", direction: "bottom", width: 750, height: 330 },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN011tf1yN1FJvbf2Giw2_!!1080040467.png", direction: "top", width: 750, height: 10 },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01289gtt1FJvbbeuLLr_!!1080040467.png", direction: "left", width: 8, height: 1716 },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01289gtt1FJvbbeuLLr_!!1080040467.png", direction: "right", width: 8, height: 1716 }
],
bottomUp: { src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01mZJXaV1FJvbgSh7Pd_!!1080040467.png", width: 750, height: 54 },
clip: { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01awAq4E1FJvbggpUAv_!!1080040467.png", width: 5, height: 374, step: 0.02, animateType: "rotate" },
scorePos: {
src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01LW9d8R1FJvbnDARLx_!!1080040467.png",
width: 104,
height: 34,
scoreTop: 246,//分数值顶部位置
scoreCenter: 750 / 2,//分数值居中位置
left: 323,
top: 213,
// 分数值图片 0 - 9
numArr: [
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01CHiYNO1FJvbkjlhaL_!!1080040467.png", width: 67, height: 75, val: 0 },
{ src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01gKXCm41FJvbdo1N7x_!!1080040467.png", width: 67, height: 75, val: 1 },
{ src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01vwwseO1FJvbhVUlgl_!!1080040467.png", width: 67, height: 75, val: 2 },
{ src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01DQwKG41FJvbfW53b2_!!1080040467.png", width: 67, height: 75, val: 3 },
{ src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01ITjQtj1FJvblg66LN_!!1080040467.png", width: 67, height: 75, val: 4 },
{ src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01hkuciB1FJvbiLHt4R_!!1080040467.png", width: 67, height: 75, val: 5 },
{ src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01u6fQLQ1FJvbnbCxeG_!!1080040467.png", width: 67, height: 75, val: 6 },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01Lws61P1FJvblg4Yib_!!1080040467.png", width: 67, height: 75, val: 7 },
{ src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01XAUGGU1FJvbkMDnRY_!!1080040467.png", width: 67, height: 75, val: 8 },
{ src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01WHwc501FJvbkjkxsO_!!1080040467.png", width: 67, height: 75, val: 9 },
],
},
timePos: {
src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01UYLp611FJvbnb4R41_!!1080040467.png",
width: 130,
height: 130,
time: 60,//倒计时时间
showAll: true,//可以直接显示60秒
timeTop: 247,//倒计时数字顶部位置
timeleft: -999,//倒计时第一位数字左侧位置，第二位数紧跟其后
timeRight: 130,//倒计时最后一位数字右侧位置，第三位数字在其前面
timeCenter: 83,//倒计时时间中间位置，如果有该字段，timeLeft和timeRight无效
left: 18,
top: 200,
// 时间数字图片 0 - 9
numArr: [
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01CHiYNO1FJvbkjlhaL_!!1080040467.png", width: 67, height: 75, showWidth: 67 / 75 * 55, showHeight: 75 / 75 * 55, val: 0 },
{ src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01gKXCm41FJvbdo1N7x_!!1080040467.png", width: 67, height: 75, showWidth: 67 / 75 * 55, showHeight: 75 / 75 * 55, val: 1 },
{ src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01vwwseO1FJvbhVUlgl_!!1080040467.png", width: 67, height: 75, showWidth: 67 / 75 * 55, showHeight: 75 / 75 * 55, val: 2 },
{ src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01DQwKG41FJvbfW53b2_!!1080040467.png", width: 67, height: 75, showWidth: 67 / 75 * 55, showHeight: 75 / 75 * 55, val: 3 },
{ src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01ITjQtj1FJvblg66LN_!!1080040467.png", width: 67, height: 75, showWidth: 67 / 75 * 55, showHeight: 75 / 75 * 55, val: 4 },
{ src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01hkuciB1FJvbiLHt4R_!!1080040467.png", width: 67, height: 75, showWidth: 67 / 75 * 55, showHeight: 75 / 75 * 55, val: 5 },
{ src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01u6fQLQ1FJvbnbCxeG_!!1080040467.png", width: 67, height: 75, showWidth: 67 / 75 * 55, showHeight: 75 / 75 * 55, val: 6 },
{ src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01Lws61P1FJvblg4Yib_!!1080040467.png", width: 67, height: 75, showWidth: 67 / 75 * 55, showHeight: 75 / 75 * 55, val: 7 },
{ src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01XAUGGU1FJvbkMDnRY_!!1080040467.png", width: 67, height: 75, showWidth: 67 / 75 * 55, showHeight: 75 / 75 * 55, val: 8 },
{ src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01WHwc501FJvbkjkxsO_!!1080040467.png", width: 67, height: 75, showWidth: 67 / 75 * 55, showHeight: 75 / 75 * 55, val: 9 },
],
},
},
},
onLoad() {
function connectWebSocket(boxId) {
// 1.连接前先关闭
my.closeSocket();
// 2.开始连接服务器
let url = "ws://39.98.189.22:30004/connectWebSocket/1339083016415760385";
my.connectSocket({
url: url
});
// 3.socket打开事件监听
my.onSocketOpen(function (res) {
// WebSocket连接已打开1111111111111！
// my.alert({ content: "open" })
});
// 4.socket关闭监听
my.onSocketClose(function (res) {
// WebSocket连接关闭
// my.alert({ content: "close" })
});
// 5.socket错误监听
my.onSocketError(function (res) {
// WebSocket连接打开失败，请检查！
// my.alert({ content: "error" })
});
// 6.socket收取消息监听
my.onSocketMessage(function (res) {
// 收到服务器内容
// my.alert({ content: res })
});
/* socket主动发送消息 */
/* my.sendSocketMessage({
data: this.data.toSendMessage, // 需要发送的内容
success: (res) => {
},
}); */
}
connectWebSocket();
},
onRef(game) {
this.boxGameComponent = game;
},
beginFun() {
/* my.alert({
content: "游戏开始"
}) */
this.boxGameComponent.start();
},
onFinish() {
my.alert({
content: "游戏结束"
})
},
onInitDone() {
console.log("initDone...")
/* my.alert({
content: "游戏初始化完成"
}) */
},
onUpdate(item) {
// imgObj:消除对象
// {curScore,totalScore,imgObj}
// console.log(item)
this.setData({
totalScore: item.totalScore,
curScore: item.curScore,
})
},
});- xaml
<!--
onInitDone:游戏渲染完回调
onUpdate:游戏消除回调
onFinish:游戏结束回调
-->
<box
gameSource="{{gameSource}}"
onRef="onRef"
onInitDone="onInitDone"
onUpdate="onUpdate"
onFinish="onFinish"
/>