Gm-game-ball

躲避障碍物小游戏

安装

npm install gm-game-ball

使用

• json

{
    "usingComponents": {
        "gm-game-ball": "/pages/components/ballGame/ballGame"
    }
}

• js

Page({
  data: {
  	//分数背景图片位置参数
    scorePos: {
      src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01TlwpbW1FJvZ2Q5aGq_!!1080040467.png",
      width: 136,
      height: 43,
      left: 500,
      top: 100,
      txt: {
      	//分数文字参数
        color: "#fff",
        fontSize: 14,//换成px值传递
        textHeight: 10,//文字左下角Y坐标（高度）
        left: 510,
        top: 110
      }
    },
    //游戏图片数据
    gameSource: {
    	//玩家
      playerInfo: { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01htfguA1FJvZIgAvxd_!!1080040467.png", width: 186, height: 338 },
      //障碍物
      barrierArr: [
        { src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01A5w8hq1FJvZcCaIff_!!1080040467.png", width: 243, height: 100, bound: { left: 0, right: 0, top: 0, bottom: 0 } },//bound：障碍物触碰的边界 相对障碍物图片边界向指定方向缩进
        { src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01A5w8hq1FJvZcCaIff_!!1080040467.png", width: 243, height: 100, bound: { left: 0, right: 0, top: 0, bottom: 0 } },
        { src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01A5w8hq1FJvZcCaIff_!!1080040467.png", width: 243, height: 100, bound: { left: 0, right: 0, top: 0, bottom: 0 } },
        { src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01A5w8hq1FJvZcCaIff_!!1080040467.png", width: 243, height: 100, bound: { left: 0, right: 0, top: 0, bottom: 0 } },
      ],
      //能量
      energyArr: [
        { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN014XhPxP1FJvZKH2Atm_!!1080040467.png", width: 94, height: 94, val: 6, showHeight: 0 },//showHeight:出现的高度
        { src: "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01LY1v8r1FJvZMipHyn_!!1080040467.png", width: 94, height: 94, val: 2, showHeight: 0 },
        { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01UKH6jB1FJvZN3Fe7y_!!1080040467.png", width: 94, height: 94, val: 5, showHeight: 0 },
        { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN016ALiAh1FJvZHfakok_!!1080040467.png", width: 94, height: 94, val: 3, showHeight: 0 },
      ]
    }
  },
  onLoad() { },
  overFun() {
  	//游戏结束
    this.ballGameComponent.stop();
  },
  beginFun() {
  	//游戏开始
    this.ballGameComponent.start();
  },
  goonFun(){
  	//游戏继续
    this.ballGameComponent.goOn();
  },
	//回调方法
  onFinish() { },
  onStart() { },
  onUpdate() { },
});

• xaml

  <gm-game-ball 
                speed="{{2}}" //游戏速度
                audio="{{''}}" //音乐
                speed-step="{{0.1}}"//速度递增值 
                speed-step-height="{{200}}"//指定高度递增一次速度
                barrier-height-step="{{0}}"//障碍物间隔距离递减速度 为0时，两个障碍物之间固定高度
                barrier-max-height="{{2.5}}"//障碍物之间的最大高度，此处值为玩家高度的倍数
                no-over="{{!true}}"//true游戏触发到障碍物不结束，会回调onUpdate传入障碍物
                player-bottom="{{10}}"//玩家离底部距离
                nosingleenergy="{{false}}"//不需要单独一行能量值 false：（障碍物+能量）-》（能量） true：（障碍物+能量）-》（障碍物+能量）
                gameSource="{{gameSource}}"//游戏图片数据
                score-pos="{{scorePos}}"//分数位置属性
                onFinish="onFinish" 
                onStart="onStart" 
                onUpdate="onUpdate" 
  ></gm-game-ball>