暂存

taobao_jn/client/pages/pagegamemain/pagegamemain.acss

@@ -3,9 +3,9 @@
   left: 0rpx;
   right: 0rpx;
   bottom: 0rpx;
-  margin: auto;
-  width: 750rpx;
-  height: 1624rpx;
+  /* margin: auto; */
+  /* width: 750rpx; */
+  /* height: 1624rpx; */
   display: block;
   position: absolute;
   /* position: fixed; */
@@ -52,13 +52,15 @@
 }
 .gamemain .gamemcont .gamemdaojishi .gamemdjslab {
   width: 404rpx;
-  height: 40rpx;
+  /* height: 40rpx; */
   opacity: 1;
   display: block;
   left: 102rpx;
-  top: 34rpx;
+  top: 28rpx;
   position: absolute;
-  font-size: 22rpx;
+  font-size: 32rpx;
+  font-weight: bold;
+  letter-spacing: 1rpx;
   color: #ffffff;
   transform-origin: 0rpx 0rpx 0rpx;
   text-align: center;
@@ -129,12 +131,16 @@
   opacity: 1;
   display: block;
   left: 0rpx;
-  top: 0rpx;
+  
   position: absolute;
-  font-size: 22rpx;
-  color: #000000;
+  
+  color: #ffcc00;
   transform-origin: 0rpx 0rpx 0rpx;
   text-align: center;
+  white-space:pre-wrap;
+  font-size: 20rpx;
+  top: 2rpx;
+  line-height: 26rpx;
 }
 .gamemain .gamemcont .gamemrolesgro .gamemrole1 .gamemaitor1 {
   width: 200rpx;
@@ -144,10 +150,11 @@
   left: -36.5rpx;
   top: -50rpx;
   position: absolute;
-  font-size: 22rpx;
+  font-size: 20rpx;
   color: #000000;
   transform-origin: 0rpx 0rpx 0rpx;
   text-align: center;
+letter-spacing: 3rpx;
 }
 .gamemain .gamemcont .gamemrolesgro .gamemrole2 {
   width: 127rpx;
@@ -195,12 +202,14 @@
   opacity: 1;
   display: block;
   left: 0rpx;
-  top: 0rpx;
   position: absolute;
-  font-size: 22rpx;
-  color: #000000;
+  color: #ffcc00;
   transform-origin: 0rpx 0rpx 0rpx;
   text-align: center;
+  white-space:pre-wrap;
+  font-size: 20rpx;
+  top: 2rpx;
+  line-height: 26rpx;
 }
 .gamemain .gamemcont .gamemrolesgro .gamemrole2 .gamemaitor2 {
   width: 200rpx;
@@ -210,10 +219,11 @@
   left: -36.5rpx;
   top: -50rpx;
   position: absolute;
-  font-size: 22rpx;
+  font-size: 20rpx;
   color: #000000;
   transform-origin: 0rpx 0rpx 0rpx;
   text-align: center;
+  letter-spacing: 3rpx;
 }
 .gamemain .gamemcont .gamemrolesgro .gamemrole3 {
   width: 127rpx;
@@ -261,12 +271,14 @@
   opacity: 1;
   display: block;
   left: 0rpx;
-  top: 0rpx;
   position: absolute;
-  font-size: 22rpx;
-  color: #000000;
+  color: #ffcc00;
   transform-origin: 0rpx 0rpx 0rpx;
   text-align: center;
+  white-space:pre-wrap;
+  font-size: 20rpx;
+  top: 2rpx;
+  line-height: 26rpx;
 }
 .gamemain .gamemcont .gamemrolesgro .gamemrole3 .gamemaitor3 {
   width: 200rpx;
@@ -276,10 +288,11 @@
   left: -36.5rpx;
   top: -50rpx;
   position: absolute;
-  font-size: 22rpx;
+  font-size: 20rpx;
   color: #000000;
   transform-origin: 0rpx 0rpx 0rpx;
   text-align: center;
+  letter-spacing: 3rpx;
 }
 .gamemain .gamemcont .gamemrolesgro .gamemrole4 {
   width: 127rpx;
@@ -327,12 +340,14 @@
   opacity: 1;
   display: block;
   left: 0rpx;
-  top: 0rpx;
   position: absolute;
-  font-size: 22rpx;
-  color: #000000;
+  color: #ffcc00;
   transform-origin: 0rpx 0rpx 0rpx;
   text-align: center;
+  white-space:pre-wrap;
+  font-size: 20rpx;
+  top: 2rpx;
+  line-height: 26rpx;
 }
 .gamemain .gamemcont .gamemrolesgro .gamemrole4 .gamemaitor4 {
   width: 200rpx;
@@ -342,10 +357,11 @@
   left: -36.5rpx;
   top: -50rpx;
   position: absolute;
-  font-size: 22rpx;
+  font-size: 20rpx;
   color: #000000;
   transform-origin: 0rpx 0rpx 0rpx;
   text-align: center;
+  letter-spacing: 3rpx;
 }
 .gamemain .gamembot {
   width: 750rpx;
@@ -407,6 +423,22 @@
   position: absolute;
   transform-origin: 0rpx 0rpx 0rpx;
 }
+.gamemain .gamembot .gamemtool .gamemtooltime {
+  width: 135rpx;
+  /* height: 40rpx; */
+  opacity: 1;
+  display: block;
+  left: 2rpx;
+  top: 35rpx;
+  position: absolute;
+  font-size: 22rpx;
+  font-weight: bold;
+  letter-spacing: 1rpx;
+  color: #ffffff;
+  transform-origin: 0rpx 0rpx 0rpx;
+  text-align: center;
+  line-height: 28rpx;
+}
 .gamemain .gamembot .gamemsharegro {
   width: 550rpx;
   height: 300rpx;
@@ -427,7 +459,7 @@
   position: absolute;
   transform-origin: 0rpx 0rpx 0rpx;
 }
-.gamemain .gamembot .gamemsharegro .gamenrole {
+.gamemain .gamembot .gamemsharegro .gamenrole1 {
   width: 86rpx;
   height: 84rpx;
   opacity: 1;
@@ -437,6 +469,36 @@
   position: absolute;
   transform-origin: 0rpx 0rpx 0rpx;
 }
+.gamemain .gamembot .gamemsharegro .gamenrole2 {
+  width: 86rpx;
+  height: 84rpx;
+  opacity: 1;
+  display: block;
+  left: 220rpx;
+  top: 0rpx;
+  position: absolute;
+  transform-origin: 0rpx 0rpx 0rpx;
+}
+.gamemain .gamembot .gamemsharegro .gamenrole3 {
+  width: 86rpx;
+  height: 84rpx;
+  opacity: 1;
+  display: block;
+  left: 330rpx;
+  top: 0rpx;
+  position: absolute;
+  transform-origin: 0rpx 0rpx 0rpx;
+}
+.gamemain .gamembot .gamemsharegro .gamenrole4 {
+  width: 86rpx;
+  height: 84rpx;
+  opacity: 1;
+  display: block;
+  left: 440rpx;
+  top: 0rpx;
+  position: absolute;
+  transform-origin: 0rpx 0rpx 0rpx;
+}
 .gamemain .gamembot .gamemsharegro .gamemsharebtn {
   width: 404rpx;
   height: 74rpx;
@@ -477,17 +539,29 @@
   position: absolute;
   transform-origin: 0rpx 0rpx 0rpx;
 }
-.gamemain .gamembot .gameminfo {
+.gamemain .gamembot .gameinfogro{
   width: 411rpx;
-  height: 123rpx;
+  height: 150rpx;
   opacity: 1;
   display: block;
   left: 70rpx;
-  top: 15rpx;
+  top: 0rpx;
   position: absolute;
   transform-origin: 0rpx 0rpx 0rpx;
 }
-.gamemain .gamembot .gameminfo .gameminfobg {
+.gamemain .gamembot .gameinfogro .aninfo{
+  transform-origin: 0% 100%;
+  animation: aniscale .3s forwards;
+}
+@keyframes aniscale{
+  from{
+    transform: scale(0);
+  }
+  to{
+    transform: scale(1);
+  }
+}
+.gamemain .gamembot .gameinfogro .gameminfo {
   width: 411rpx;
   height: 123rpx;
   opacity: 1;
@@ -497,16 +571,28 @@
   position: absolute;
   transform-origin: 0rpx 0rpx 0rpx;
 }
-.gamemain .gamembot .gameminfo .gameminfotxt {
-  width: 371rpx;
+.gamemain .gamembot .gameinfogro .gameminfo .gameminfobg {
+  width: 411rpx;
+  height: 123rpx;
+  opacity: 1;
+  display: block;
+  left: 0rpx;
+  top: 0rpx;
+  position: absolute;
+  transform-origin: 0rpx 0rpx 0rpx;
+}
+.gamemain .gamembot .gameinfogro .gameminfo .gameminfotxt {
+  width: 381rpx;
   height: 40rpx;
   opacity: 1;
   display: block;
   left: 20rpx;
   top: 20rpx;
   position: absolute;
-  font-size: 22rpx;
-  color: #000000;
+  font-size: 24rpx;
+  font-weight: bold;
+  letter-spacing: 2rpx;
+  color: #ffffff;
   transform-origin: 0rpx 0rpx 0rpx;
 }
 .gamemain .gamemguide {
@@ -518,7 +604,7 @@
   top: 0rpx;
   position: absolute;
   transform-origin: 0rpx 0rpx 0rpx;
-  background: rgba(0, 0, 0, 0.5);
+  background: rgba(0, 0, 0, 0.8);
 }
 .gamemain .gamemguide .gamemguidecont {
   width: 750rpx;
@@ -683,3 +769,6 @@
   position: absolute;
   transform-origin: 0rpx 0rpx 0rpx;
 }
+.blackWhiteFilter{
+  filter: grayscale(100%);
+}

taobao_jn/client/pages/pagegamemain/pagegamemain.js

@@ -4,14 +4,27 @@ import resList from '../../resconfig/resList'; //import API from '../../api';
 
 Page({
   data: {
-    show_v:1,//1匹配，2活动
-    isnew:0,//新手进程，0完成，其他阶段
-    invitedata:[],//邀请人
-    gametime:3000,//活动倒计时，s
-    rolesnum:3,//房间人数
-    mywend:0,//我的温度
-    tooltime:1000,//升温工具倒计时
-    
+    show_v: 1,//1匹配，2活动
+    isnew: 0,//新手进程，0完成，其他阶段
+    invitedata: [],//邀请人
+    gametime: 10,//活动倒计时，s
+    gametimeshow: "05:00",
+    roomdata: [{
+      wd: 1
+    }, {
+      wd: 3
+    }],//房间所有人温度信息
+    roomnums: 3,//房间人数
+    myidx: 1,//我的位置
+    tooltime: 5,//升温工具倒计时
+    showtooltime: "04:59",
+    attionlist: [
+      { txt: "1游戏开始啦，共有四名玩家加入游戏，快来升温队伍拿奖励吧。" },
+      { txt: "2游戏开始啦，共有四名玩家加入游戏，快来升温队伍拿奖励吧。" },
+      { txt: "3游戏开始啦，共有四名玩家加入游戏，快来升温队伍拿奖励吧。" },
+      { txt: "4游戏开始啦，共有四名玩家加入游戏，快来升温队伍拿奖励吧。" }
+    ],
+    attiontxt: "游戏开始啦，共有四名玩家加入游戏，快来升温队伍拿奖励吧。",
   },
   onLoad(props) {
     this.setData({
@@ -19,25 +32,120 @@ Page({
     });
 
     this.changePashow();
+    this.updateAct();
+  },
+  //全局的update
+  updateAct() {
+    let update = function () {
+      let ntime = this.data.gametime - 50 / 1000;
+      if (ntime < 0) {
+        ntime = 0;
+      }
+      // let times = Math.ceil(ntime);
+      // let showm1 = Math.floor(times/60);
+      // let shows1 = times-showm1*60;
+
+      // let showm = showm1<10?"0"+showm1:showm1;
+      // let shows = shows1<10?"0"+shows1:shows1;
+      let nshowtime = this.changeshowtime(ntime);
+
+      let tooltime1 = this.data.tooltime - 50 / 1000;
+      if (tooltime1 < 0) {
+        tooltime1 = 0;
+      }
+      let toolshowtime = this.changeshowtime(tooltime1);
+
+      if (ntime == 0) {
+        clearInterval(gameupdate);
+        this.gameover();
+      }
+      this.setData({
+        "gametime": ntime,
+        gametimeshow: nshowtime,
+        tooltime: tooltime1,
+        showtooltime: toolshowtime,
+      });
+    }
+    let gameupdate = setInterval(update.bind(this), 50);
+  },
+  //游戏结束
+  gameover() {
+    console.log("游戏结束");
   },
   //匹配3s，切换活动
-  changePashow(){
+  changePashow() {
     this.setData({
-      show_v:1
+      show_v: 1
     })
-    setTimeout(()=>{
+    setTimeout(() => {
       this.setData({
-        show_v:2
+        show_v: 2
       })
-    },1000);
+    }, 1000);
   },
   //新手下一步
-  tonextguide(){
-    let nguide = this.data.isnew+1;
+  tonextguide() {
+    let nguide = this.data.isnew + 1;
     this.setData({
-      isnew:nguide
+      isnew: nguide
     });
   },
-  
+  //使用道具
+  usetool() {
+    let tooltime = this.data.tooltime;
+    if (tooltime <= 0) {//可使用
+      console.log("使用道具");
+      let ridx = this.data.myidx;
+      let addwd = 3;
+      let rwd = addwd;
+      this.updateRolewd(ridx, rwd);
+    } else {//倒计时中
 
+    }
+  },
+  //升温
+  updateRolewd(ridx, rwd) {
+    this.data.roomdata[ridx - 1]["wd"] = rwd;
+    let ndata = this.data.roomdata;
+    this.setData({
+      roomdata: ndata
+    });
+  },
+  //邀请
+  invitefriends(e) {
+    let dataset = e.currentTarget.dataset;
+    if (dataset) {
+      let sidx = Number(dataset.sidx);
+      if (this.data.invitedata[sidx]) {
+        
+      } else {
+        this.shareact();
+      }
+    }
+  },
+  //分享活动
+  shareact() {
+    console.log("分享本次活动");
+    this.updateAttionList();
+  },
+  //s时间转时间显示
+  changeshowtime(ntime) {
+    let times = Math.ceil(ntime);
+    let showm1 = Math.floor(times / 60);
+    let shows1 = times - showm1 * 60;
+
+    let showm = showm1 < 10 ? "0" + showm1 : showm1;
+    let shows = shows1 < 10 ? "0" + shows1 : shows1;
+    return showm + ":" + shows;
+  },
+  //更新attionlist
+  updateAttionList(){
+    let attionlist = this.data.attionlist;
+    attionlist.push({
+      txt:"新增attion"
+    });
+    this.setData({
+      attionlist:attionlist
+    });
+  }
 });
\ No newline at end of file