增加了棋子气息特效

·
Littlefean · Jan 5, 2023 · 182f4bc · 182f4bc
1 parent 5fcabaa
commit 182f4bc
Show file tree

Hide file tree

Showing 8 changed files with 153 additions and 16 deletions.
diff --git a/css/animation.css b/css/animation.css
diff --git a/css/animation.css.map b/css/animation.css.map
diff --git a/css/animation.less b/css/animation.less
@@ -26,6 +26,7 @@
     transform: scale(1);
   }
 }
+
 // 棋子落地前的特效
 @keyframes putFx {
   0% {
@@ -37,6 +38,7 @@
     opacity: 1;
   }
 }
+
 // 棋盘抖动特效
 @keyframes littleShake {
   @s: 2px;
@@ -129,3 +131,19 @@
     transform: translateX(0px) translateY(0px);
   }
 }
+
+/// 棋子气息抖动
+@keyframes lightShake {
+  0% {
+    //filter: blur(15px);
+    transform: scale(1);
+  }
+  50% {
+    //filter: blur(20px);
+    transform: scale(0.5);
+  }
+  100% {
+    //filter: blur(15px);
+    transform: scale(1);
+  }
+}
diff --git a/css/triangleModeGamePage.css b/css/triangleModeGamePage.css
diff --git a/css/triangleModeGamePage.css.map b/css/triangleModeGamePage.css.map
diff --git a/css/triangleModeGamePage.less b/css/triangleModeGamePage.less
@@ -19,25 +19,33 @@ body {
     margin-top: 10px;
     margin-bottom: 100px;
     outline: solid 1px;
+    position: relative;
 
     .divArea {
       outline: solid 1px;
       display: block;
       position: relative;
       margin: 0 auto;
 
+      @SelectCircleR: 40px;
+      @Border: 3px;
+
       .box {
+        //opacity: 0;
+        width: @SelectCircleR;
+        height: @SelectCircleR;
         position: absolute;
-        @L: 40px;
-        width: @L;
-        height: @L;
+
         border-radius: 50%;
-        //outline: solid 1px;
-        margin-left: -(@L/2);
-        margin-top: -(@L/2);
+        //outline: solid 1px red;
+        margin-left: -(@SelectCircleR/2);
+        margin-top: -(@SelectCircleR/2);
 
         transition: all 0.5s;
-        border: 3px solid transparent;
+        border: @Border solid transparent;
+
+        z-index: 5;
+
 
         &:hover {
           //border-color: black;
@@ -46,14 +54,48 @@ body {
 
         // 棋子
         .piece {
-          width: 100%;
-          height: 100%;
+          position: absolute;
+          @l: @SelectCircleR*0.8; // 棋子直径
+          width: @l;
+          height: @l;
+          left: (@SelectCircleR/2) - @Border;
+          top: (@SelectCircleR/2) - @Border;
+          margin-left: -(@l/2);
+          margin-top: -(@l/2);
           background-color: pink;
           border-radius: 50%;
+          //box-shadow: #666 -2px -2px 5px inset;
+
         }
       }
     }
 
+    .divEffectArea {
+      outline: solid 1px red;
+      margin: 0 auto;
+      display: block;
+      position: relative;
+      filter: contrast(30);
+
+      .effectBox {
+        border-radius: 50%;
+        position: absolute;
+        @L: 50px;
+        width: @L;
+        height: @L;
+        margin-left: -(@L/2);
+        margin-top: -(@L/2);
+        //outline: solid 5px yellow;
+        filter: blur(15px);
+
+        transition: all 0.5s;
+
+        animation-name: lightShake;
+        animation-iteration-count: infinite;
+        animation-duration: 5s;
+      }
+    }
+
     .gameCanvas {
       outline: solid 1px;
       margin: 0 auto;

diff --git a/html/triangleModeGame.html b/html/triangleModeGame.html
@@ -6,6 +6,7 @@
           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>三角形模式的棋盘</title>
+    <link rel="stylesheet" href="../css/animation.css">
     <link rel="stylesheet" href="../css/triangleModeGamePage.css">
     <!--更改选择框颜色的css，js控制-->
     <style class="selectStyle"></style>
@@ -32,6 +33,8 @@ <h1>三角形棋盘模式</h1>
 <div class="gameArea">
     <!--DIV层-->
     <div class="divArea"></div>
+    <!--DIV特效层-->
+    <div class="divEffectArea"></div>
     <!--Canvas层-->
     <canvas class="gameCanvas"></canvas>
 </div>

diff --git a/js/triangleModeGame.js b/js/triangleModeGame.js
@@ -22,6 +22,7 @@ class TriangleModeGame extends Game {
         // 渲染层
         this.locToBoxElement = {};  // (x,y) -> div 的映射字典，直接拿到HTML元素
         this.gameAreaElement = element;
+        this.locToEffectBoxElement = {};
 
         this._initBoardData();
         this._initRendBoard();
@@ -80,7 +81,8 @@ class TriangleModeGame extends Game {
         let boardAreaWidth = dx * 2 + this.width * L - L / 2;
         let boardAreaHeight = dy * 2 + (this.height - 1) * H
         canvasResize(canvas, boardAreaWidth, boardAreaHeight);
-        canvas.style.marginTop = `${-boardAreaHeight}px`;
+
+
         // 填色
         drawRectFill(ctx, 0, 0, boardAreaWidth, boardAreaHeight, "rgb(216,176,77)")
         // 连线
@@ -120,7 +122,28 @@ class TriangleModeGame extends Game {
                 this._bindClickEvent(point);
             }
         }
+        //divEffect层构建
+        let divEffectAreaEle = this.gameAreaElement.querySelector(".divEffectArea");
+        divEffectAreaEle.style.width = boardAreaWidth + "px";
+        divEffectAreaEle.style.height = boardAreaHeight + "px";
+        for (let y = 0; y < this.height; y++) {
+            for (let x = 0; x < this.width; x++) {
+                let point = new Point(x, y);
+                let pointPx = this._pointToPxPoint(point);
+                // 创建div
+                let effectBox = div("effectBox");
+                effectBox.style.left = pointPx.x + "px";
+                effectBox.style.top = pointPx.y + "px";
+                divEffectAreaEle.appendChild(effectBox);
+                this.locToEffectBoxElement[`${x},${y}`] = effectBox;
+            }
+        }
         this._changeHoverCss();
+
+        // 三层叠在一起
+        divEffectAreaEle.style.marginTop = `${-boardAreaHeight}px`;
+        canvas.style.marginTop = `${-boardAreaHeight}px`;
+
     }
 
     /**
@@ -130,7 +153,6 @@ class TriangleModeGame extends Game {
      */
     _bindClickEvent(point) {
         let boxElement = this._getBoxElementByLoc(point);
-        // todo
         boxElement.onclick = () => {
             let putColor = this.getCurrentPlayerColor();
             if (this.placeable(point)) {
@@ -163,10 +185,14 @@ class TriangleModeGame extends Game {
      * @param playerColor {String}
      */
     putPieceRend(putPoint, playerColor) {
+        // div层
         let boxElement = this._getBoxElementByLoc(putPoint);
         let pieceElement = div("piece");
         pieceElement.style.backgroundColor = playerColor;
         boxElement.appendChild(pieceElement);
+        // divEffect层
+        this._getEffectBoxElementByLoc(putPoint).style.backgroundColor = playerColor;
+
     }
 
     /**
@@ -177,6 +203,7 @@ class TriangleModeGame extends Game {
         for (let p of pointArr) {
             let boxEle = this._getBoxElementByLoc(p);
             boxEle.removeChild(boxEle.querySelector(".piece"));
+            this._getEffectBoxElementByLoc(p).style.backgroundColor = "transparent";
         }
     }
 
@@ -333,6 +360,15 @@ class TriangleModeGame extends Game {
         return this.locToBoxElement[`${loc.x},${loc.y}`];
     }
 
+    /**
+     * 通过坐标点拿到对应的 特效层的元素box
+     * @return {*}
+     * @private
+     */
+    _getEffectBoxElementByLoc(loc) {
+        return this.locToEffectBoxElement[`${loc.x},${loc.y}`];
+    }
+
 
     /**
      * 根据坐标点获取这个点对应的像素坐标点