game-2048-1

游戏

安装

npm install game-2048-1

使用

必须开启 "enableSkia": "true"

• json

{
    "usingComponents": {
        "game": "game-2048-1/game2048"
    }
}

• mini.project.json

{
  "node_modules_es6_whitelist": [
    "common-game"
  ]
}

• js

Page({
  data: {
    gameshow: true,
    curScore: 0,
    totalScore: 0,
    gameSource: {
      moveDuration: 0.1,//移动时间
      initNumLen: 2,//初始化生成多少个数字
      maxNum: 131072,//最大合成的数字，合成到此数字就结束游戏
      renderNumArr: [{ val: 2, probability: 10 }, { val: 4, probability: 1 }, { val: 1024, probability: 10000 }],//随机生成的新元素值
      lmd: 10,//滑动灵敏度，超过此值才算滑动
      maxRenderNum: "8",//最大随机生成的数字
      numArr: [
        { "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01z0OqXX1FJvfPnFnTP_!!1080040467.png", "val": "2", "name": "选中0002.png", "width": "158", "height": "163" },
        { "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01Ouvt0Z1FJvfbCIyxt_!!1080040467.png", "val": "4", "name": "选中0004.png", "width": "158", "height": "163" },
        { "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01zk7uKl1FJvfVmdhmC_!!1080040467.png", "val": "8", "name": "选中0008.png", "width": "158", "height": "163" },
        { "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN011W2H4K1FJvfXw6pXa_!!1080040467.png", "val": "16", "name": "选中0016.png", "width": "158", "height": "163" },
        { "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01dIEHAM1FJvfU1XUrI_!!1080040467.png", "val": "32", "name": "选中0032.png", "width": "158", "height": "163" },
        { "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01Qyc9UD1FJvfVmeVf8_!!1080040467.png", "val": "64", "name": "选中0064.png", "width": "158", "height": "163" },
        { "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01lXZUT11FJvfbCIeDW_!!1080040467.png", "val": "128", "name": "选中0128.png", "width": "158", "height": "163" },
        { "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01RnsrZd1FJvfRrkRBc_!!1080040467.png", "val": "256", "name": "选中0256.png", "width": "158", "height": "163" },
        { "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01uzMCQN1FJvfaFXOfN_!!1080040467.png", "val": "512", "name": "选中0512.png", "width": "158", "height": "163" },
        { "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01bpqGRF1FJvfVU1KOP_!!1080040467.png", "val": "1024", "name": "选中1024.png", "width": "158", "height": "163" },
        { "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01j7OySV1FJvfbCHyf7_!!1080040467.png", "val": "2048", "name": "选中2048.png", "width": "158", "height": "163" },
        { "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01DcYJTd1FJvfjtpLYH_!!1080040467.png", "val": "4096", "name": "选中4096.png", "width": "158", "height": "163" },
        { "src": "https://img.alicdn.com/imgextra/i1/1080040467/O1CN01peu7J91FJvfjtpkTb_!!1080040467.png", "val": "8192", "name": "选中8192.png", "width": "158", "height": "163" },
        { "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01HRKePv1FJvfcBxMnL_!!1080040467.png", "val": "16384", "name": "选中16384.png", "width": "158", "height": "163" },
        { "src": "https://img.alicdn.com/imgextra/i4/1080040467/O1CN01bJdblJ1FJvfiHmvSZ_!!1080040467.png", "val": "32768", "name": "选中32768.png", "width": "158", "height": "163" },
        { "src": "https://img.alicdn.com/imgextra/i3/1080040467/O1CN01j1jOHJ1FJvfbbn0bI_!!1080040467.png", "val": "65536", "name": "选中65536.png", "width": "158", "height": "163" },
        { "src": "https://img.alicdn.com/imgextra/i2/1080040467/O1CN01RCYWHv1FJvfinEJO0_!!1080040467.png", "val": "131072", "name": "选中131072.png", "width": "158", "height": "163" },
      ]
    },
  },
  onLoad() {
  },
  /**游戏切换 */
  switchFun() {
    this.setData({ gameshow: !this.data.gameshow });
  },
  /**游戏开始 */
  beginFun() {
    this.gameComponent.onEvent("start");
  },
  resetFun() {
    this.gameComponent.onEvent("restart");
  },
  clearFun() {
    this.gameComponent.onEvent("clearNum", [2]);
  },


  onRef(game) {
    this.gameComponent = game;
  },
  /**游戏初始化完成*/
  onInitDone() {
    console.log("initDone...")
    // my.alert({
    //   content: "游戏初始化完成"
    // })
    // this.beginFun();
  },
  onUpdate(item) {
    // item.totalScore:总分数
    // item.curNum:本次移动合成的数字，是一个数组格式[4,8]
    console.log(item)
    this.setData({
      curScore: item.curScore,
      totalScore: item.totalScore,
    })
  },
  /**游戏结束 */
  onGameOver(item) {
    // item.totalScore 总分数
    console.log(item)
    my.alert({
      content: "游戏结束：" + item.totalScore
    })
  },
  onClearCallback(obj) {
    console.log("清除个数：", obj.clearNum)
  }
});

• xaml

  <view class="game-box" a:if="{{!!gameshow}}">
    本次得分：{{curScore}}==总分：{{totalScore}}
    <view class="tempBox">
      <!-- 
        onInitDone：游戏组件初始化完成
        onUpdate：游戏合成回调
        onGameOver：游戏结束回调
      -->
      <game gameSource="{{gameSource}}" 
        onRef="onRef"
        onInitDone="onInitDone" 
        onUpdate="onUpdate" 
        onGameOver="onGameOver"
        onClearCallback="onClearCallback"
      />
    </view>
  </view>
  <!-- end -->
  <view class="btn-box">
    <view class="btn_css" onTap="beginFun">开始</view>
    <view class="btn_css" onTap="gameOver">结束</view>
    <view class="btn_css" onTap="switchFun">切换</view>
    <view class="btn_css" onTap="clearFun">清除</view>
    <view class="btn_css" onTap="resetFun">重玩</view>
  </view>

• acss

.game-box {
  width: 750rpx;
  height: 780rpx;
  position: absolute;
  left: 0;
  top: 10vh;
  background: url("https://img.alicdn.com/imgextra/i3/1080040467/O1CN01XlxFJR1FJvfZWPA4J_!!1080040467.png") no-repeat center;
  background-size: 100% auto;
}
.tempBox{
  background: rgba(0,0,0,0.3);
  position: absolute;
  width: 656rpx;
  height: 648rpx;
  left: 48rpx;
  top: 66rpx;
}

.btn-box {
  width: 100vw;
  height: 50px;
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
}

.btn_css {
  width: 40%;
  height: 15px;
  padding: 10px;
  margin: 7px 10px;
  text-align: center;
  background-color: rgb(152, 233, 21);
}