feat: 添加计分板和倒计时

Suixinlei · Dec 16, 2016 · aed8167 · aed8167
1 parent bc1e8ea
commit aed8167
Show file tree

Hide file tree

Showing 3 changed files with 99 additions and 14 deletions.
diff --git a/img/top-bg.png b/img/top-bg.png
diff --git a/index.html b/index.html
@@ -9,20 +9,25 @@
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
     <style>
-    body {
-      width: 100%;
-      height: 100%;
-      background-color: #000;
-      color: #fff;
-      margin: 0px;
-      padding: 0;
-      overflow: hidden;
-    }
+        body {
+          width: 100%;
+          height: 100%;
+          background-color: #000;
+          color: #fff;
+          margin: 0px;
+          padding: 0;
+          overflow: hidden;
+        }
+        img,
+        #canvas {
+            display: none;
+        }
     </style>
 </head>
 
 <body>
-
+<img id="top-bg" src="img/top-bg.png" alt="">
+<canvas id="canvas" width="256" height="64"></canvas>
 </body>
 
 <script>

diff --git a/src/index.js b/src/index.js
@@ -359,6 +359,9 @@ function gameplay() {
     // 调用声音输入
     uniqueSkill();
   }, WAIT_FOR_UNIQUE_SKILL);
+
+  //显示倒计时和得分
+  countShow.start();
 }
 
 function removeEndPage() {
@@ -716,11 +719,10 @@ function animate(timestamp) {
   //  boom2Out.quaternion.fromArray(pose.orientation);
   //}
 
-  if (center0) {
-    if (pose.orientation) {
-      center0.quaternion.fromArray(pose.orientation);
-    }
+  if (pose.orientation) {
+    center0.quaternion.fromArray(pose.orientation);
   }
+
   //键盘随视角移动
   //for(var i=0;i<3;i++){
   //  if(keyboardloaded[i]){
@@ -922,4 +924,82 @@ function setStageDimensions(stage) {
   // cube.position.set(0, controls.userHeight, 0);
 }
 
+// 倒计时
+function countDown() {
+  // var img = document.getElementById('top-bg');
+  var canvas = document.getElementById('canvas');
+  var ctx = canvas.getContext('2d');
+  // ctx.drawImage(img, 0, 0);
+  ctx.fillStyle = '#ffffff';
+  ctx.font = '24px 黑体';
+  ctx.textAlign = 'center';
+  ctx.textBaseline = 'middle';
+
+
+  ctx.fillText('60s | 得分：0', 128, 36);
+
+  var textureCanvas = new THREE.Texture(canvas);
+  textureCanvas.needsUpdate = true;
+
+  var geometry = new THREE.PlaneGeometry( 0.5, 0.125 );
+  var material = new THREE.MeshBasicMaterial({
+    map: textureCanvas,
+    transparent: true,
+    depthWrite: false,
+    opacity: 0
+    // color: 0xffff00,
+    // side: THREE.DoubleSide
+  });
+  var plane = new THREE.Mesh( geometry, material );
+  plane.position.z = -0.74;
+  plane.position.y = 0.5;
+
+  center0.add( plane );
+
+
+  //底图
+  var texture1 = new THREE.TextureLoader().load('img/top-bg.png');
+  var geometry1 = new THREE.PlaneGeometry( 0.5, 0.125 );
+  var material1 = new THREE.MeshBasicMaterial({
+    map: texture1,
+    transparent: true,
+    depthWrite: false,
+    opacity: 0
+    // color: 0xffff00,
+    // side: THREE.DoubleSide
+  });
+  var plane1 = new THREE.Mesh( geometry1, material1 );
+  plane1.position.z = -0.75;
+  plane1.position.y = 0.5;
+
+  center0.add( plane1 );
+
+  return {
+    start: function () {
+      material.opacity = 1;
+      material1.opacity = 1;
+
+      var startTime = Date.now();
+      var seconds = GAME_TIME / 1000;
+      var timer = null;
+
+      var fn = function () {
+        var now = Date.now();
+        var count = Math.round((now - startTime) / 1000);
+        if (count < seconds) {
+          ctx.clearRect(0, 0, 256, 64);
+          ctx.fillText( (seconds - count) + 's | 得分：' + SCORE, 128, 36);
+          textureCanvas.needsUpdate = true;
+        } else {
+          clearInterval(timer);
+        }
+
+      };
+
+      timer = setInterval(fn, 100);
+    }
+  }
+}
 
+var countShow = countDown();
+// countShow.start();