gm-game-drop

v0.0.7

Published

3 years ago

``` npm install gm-game-drop ```

Downloads

0High
0Medium
0Low

singlekai

gm-game-drop

躲避障碍物小游戏

安装

npm install gm-game-drop

使用

必须开启 "enableSkia": "true"

如果项目需要使用插件，在window下加上 disablePluginSandBox：“true”

json

{
    "usingComponents": {
        "gm-game-drop": "gm-game-drop/drop"
    }
}

Page({
  data: {
    renderGame: true,
    scorePos: {
      src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01Vr30aH1FJvczxxubX_!!1080040467.png",
      width: 122,
      height: 122,
      scoreTop: 54,//分数值顶部位置
      scoreCenter: 670,
      left: 610,
      top: 0,
      // 分数值图片 0 - 9
      numArr: [
        { "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01q3zoHI1FJvcybanj3_!!1080040467.png", "width": 22, "height": 36, "val": 0 },
        { "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01vHs1ER1FJvd4tkYQ2_!!1080040467.png", "width": 22, "height": 36, "val": 1 },
        { "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN012wbHD21FJvd2KISov_!!1080040467.png", "width": 22, "height": 36, "val": 2 },
        { "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01m9g1RT1FJvd76dlN6_!!1080040467.png", "width": 22, "height": 36, "val": 3 },
        { "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01x0Xww01FJvd3XujWZ_!!1080040467.png", "width": 22, "height": 36, "val": 4 },
        { "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01vKGT2p1FJvd3XsJqg_!!1080040467.png", "width": 22, "height": 36, "val": 5 },
        { "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01m4hFAy1FJvd3XtnLN_!!1080040467.png", "width": 22, "height": 36, "val": 6 },
        { "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01VVU16H1FJvd9AfPG6_!!1080040467.png", "width": 22, "height": 36, "val": 7 },
        { "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN010F4xYv1FJvd68DWVw_!!1080040467.png", "width": 22, "height": 36, "val": 8 },
        { "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN0111Z2Xk1FJvd5gaFgZ_!!1080040467.png", "width": 22, "height": 36, "val": 9 },
      ],
      tipShowY: 500,//提示分数显示的Y轴坐标，不传或传0，默认显示在底部撞击位置
      tipFadeTime: 1000,
      tipAdd: {
        src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01KvI24T1FJvd6ALmVh_!!1080040467.png",
        width: 34,
        height: 54
      },
      tipNumArr: [
        { "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN0184X6eL1FJvd6ALRix_!!1080040467.png", "width": 34, "height": 54, "val": 0 },
        { "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01c0KGhd1FJvd78ksMS_!!1080040467.png", "width": 34, "height": 54, "val": 1 },
        { "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01Gixm361FJvd3p4Lcq_!!1080040467.png", "width": 34, "height": 54, "val": 2 },
        { "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01MhX5RU1FJvd3a0Ein_!!1080040467.png", "width": 34, "height": 54, "val": 3 },
        { "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01RfdzOm1FJvd0WKQfe_!!1080040467.png", "width": 34, "height": 54, "val": 4 },
        { "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01FTlVkW1FJvcydp1lb_!!1080040467.png", "width": 34, "height": 54, "val": 5 },
        { "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01A5aq6F1FJvd9CqHIP_!!1080040467.png", "width": 34, "height": 54, "val": 6 },
        { "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN012nhLXS1FJvd6AN7g3_!!1080040467.png", "width": 34, "height": 54, "val": 7 },
        { "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01Ag7hxb1FJvcydo1P8_!!1080040467.png", "width": 34, "height": 54, "val": 8 },
        { "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01xh9Z9D1FJvd0WMi3S_!!1080040467.png", "width": 34, "height": 54, "val": 9 },
      ],
      tipFadeTime2: 1000,
      tipAdd2: {
        src: "https://img.alicdn.com/imgextra/i2/1080040467/O1CN011jg7jF1FJvd3ogJbn_!!1080040467.png",
        width: 34,
        height: 54
      },
      tipNumArr2: [
        { "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN015HvZ2g1FJvd4vX3fT_!!1080040467.png", "width": 34, "height": 54, "val": 0 },
        { "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01q7lGul1FJvd0VyPGs_!!1080040467.png", "width": 34, "height": 54, "val": 1 },
        { "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN015gTD7c1FJvd7mfibK_!!1080040467.png", "width": 34, "height": 54, "val": 2 },
        { "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01fY7wNc1FJvd8gqFcc_!!1080040467.png", "width": 34, "height": 54, "val": 3 },
        { "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01hQeXIo1FJvd5iKTPO_!!1080040467.png", "width": 34, "height": 54, "val": 4 },
        { "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01D8tcQa1FJvd3ZcCXt_!!1080040467.png", "width": 34, "height": 54, "val": 5 },
        { "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01jtvN1P1FJvd78RGoT_!!1080040467.png", "width": 34, "height": 54, "val": 6 },
        { "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01RookPs1FJvd2qdMvZ_!!1080040467.png", "width": 34, "height": 54, "val": 7 },
        { "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01CHXLg61FJvd7mclcV_!!1080040467.png", "width": 34, "height": 54, "val": 8 },
        { "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01vyg9xk1FJvd2UV8Pa_!!1080040467.png", "width": 34, "height": 54, "val": 9 },
      ]
    },
    timePos: {
      src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01fSftlZ1FJvd00RS3M_!!1080040467.png",
      width: 122,
      height: 122,
      time: 60,//倒计时时间
      timeTop: 64,//倒计时数字顶部位置
      timeleft: 34,//倒计时第一位数字左侧位置，第二位数紧跟其后
      timeRight: 125,//倒计时最后一位数字右侧位置，第三位数字在其前面
      // timeCenter: 376,//倒计时时间中间位置，如果有该字段，timeLeft和timeRight无效
      left: 20,
      top: 0,
      // 时间数字图片 0 - 9
      numArr: [
        { "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01AvBlJ51FJvd9BoASl_!!1080040467.png", "width": 20, "height": 29, "val": 0 },
        { "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01Nr8Gd51FJvd9BrO1c_!!1080040467.png", "width": 20, "height": 29, "val": 1 },
        { "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01HvuqLN1FJvd69LwqC_!!1080040467.png", "width": 20, "height": 29, "val": 2 },
        { "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01zKbUeh1FJvd2LTi0m_!!1080040467.png", "width": 20, "height": 29, "val": 3 },
        { "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01GEbIAv1FJvd0VQqAJ_!!1080040467.png", "width": 20, "height": 29, "val": 4 },
        { "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01GH4bjm1FJvd0VPy7F_!!1080040467.png", "width": 20, "height": 29, "val": 5 },
        { "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01tJ69sI1FJvd2LTZhQ_!!1080040467.png", "width": 20, "height": 29, "val": 6 },
        { "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01IxNK7L1FJvd7m3ikX_!!1080040467.png", "width": 20, "height": 29, "val": 7 },
        { "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01Nuwkhc1FJvd2TukRV_!!1080040467.png", "width": 20, "height": 29, "val": 8 },
        { "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN017oU45x1FJvczwW9iE_!!1080040467.png", "width": 20, "height": 29, "val": 9 },
      ],
    },
    gameSource: {
      playerInfo: {
        <!-- showY:操作元素显示y坐标，不传或0 默认显示倒底部对齐 -->
        src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01iH0HlQ1FJvd6AnRAG_!!1080040467.png", width: 338, height: 240, paddingLeft: 82, paddingRight: 50,showY: 0
      },
      barrierProbability: 1,//障碍物概率
      barrierArr: [
        // changePlayer:吃掉此元素 改变player显示 {hidePlayer:是否隐藏默认player（如果隐藏了，不能拖动player，必须等player显示后才能拖动） boomArr:改变后的player元素，可以放序列帧 fadeTime：消失时间}
        // rotationVal:旋转速度
        { src: "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01d684o11FJvd7FNOyK_!!1080040467.png", width: 257, height: 256, bound: { left: 64, right: 64, top: 64, bottom: 64 }, rotation: true, rotationVal: 0.01 },//bound：障碍物触碰的边界 相对障碍物图片边界向指定方向缩进
      ],
      energyProbability: 1,//能量概率
      maxEnergyNum: 0,//限制最多能吃多少个能量
      energyArr: [
        { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01cv2eBg1FJvd5bcNDR_!!1080040467.png", width: 134, height: 416, val: 1, showHeight: 0, probability: 1, bound: { left: 0, right: 0, top: 0, bottom: 100 }, tipType: "tipNumArr" },//bound：障碍物触碰的边界 相对障碍物图片边界向指定方向缩进
        { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN018DgizV1FJvd2NqSaE_!!1080040467.png", width: 144, height: 433, val: 1, showHeight: 0, probability: 1, bound: { left: 0, right: 0, top: 0, bottom: 100 }, tipType: "tipNumArr2" },//bound：障碍物触碰的边界 相对障碍物图片边界向指定方向缩进
        { src: "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01Md46g81FJvd71mnby_!!1080040467.png", width: 142, height: 421, val: 1, showHeight: 0, probability: 1, bound: { left: 0, right: 0, top: 0, bottom: 100 }, tipType: "tipNumArr2" },//bound：障碍物触碰的边界 相对障碍物图片边界向指定方向缩进
      ],
      padding: {
        top: 0
      }
    },
  },
  onLoad() {
  },
  onRef(game) {
    this.gameComponent = game;
  },
  changeFun() {
    this.setData({
      renderGame: !this.data.renderGame
    })
  },
  overFun() {
    this.gameComponent.stop();
  },
  beginFun() {
    this.gameComponent.start();
  },
  continueFun() {
    this.gameComponent.continue();
  },
  resetFun() {
    this.gameComponent.reset();
  },
  pauseFun() {
    this.gameComponent.pause();
  },

  onFinish(obj) {
    // obj {score:总分数,type:"timeout"}
    my.alert({
      content: "游戏结束" + obj.score
    })
  },
  onInitDone() {
    // my.alert({
    //   content: "游戏初始化完成"
    // })
    this.beginFun();
  },
  onUpdate(item) {
    // console.log("------", item.imgObj)
    // item.imgObj 返回图片对象
    /* my.alert({
      content: "游戏消除了"
    }) */
  },
});

xaml

  <game-drop
    speed="{{5}}" 
    max-speed="{{10}}"
    dipX="{{0}}"
    topDeg="{{0}}"
    deg="{{0}}"
    speed-step="{{0}}"
    speed-step-height="{{200}}"
    barrier-height-step="{{0}}"
    barrier-max-height="{{0.5}}"
    no-over="{{!true}}"
    player-bottom="{{0}}"
    firstShowHeight="{{0}}"
    gameSource="{{gameSource}}"
    score-pos="{{scorePos}}"
    time-pos="{{timePos}}"
    isTimeOverAnimal="{{!true}}"
    playerAnimal="{{false}}"
    game-col="{{3}}"
    isVertical="{{!true}}"
    playerActive="{{!true}}"
    onRef="onRef"
    onFinish="onFinish" 
    onInitDone="onInitDone" 
    onUpdate="onUpdate" 
  />

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

gm-game-drop

躲避障碍物小游戏

安装

使用