界面

src/components/Game.vue

 <template>
-  <div style="user-select: none">
-    <div style="width: 300px;height:300px;float: left; position: fixed ; left: 0; top: 0px; background-color: aliceblue; text-align: center">
+  <div style="user-select: none;position: fixed;left: 0;right: 0;top: 0;bottom: 0;background-repeat: no-repeat;background-size: cover;" :style="{backgroundImage:'url('+require('../img/scene.jpg')+')'}">
+    <div v-show="false" style="width: 300px;height:300px;float: left; position: fixed ; left: 0; top: 0px; background-color: aliceblue; text-align: center">
         <span>
             手牌：{{player2Str[1]}}
         </span>
     </div>
 
-    <div style="width: 300px;height:300px;float: left; position: fixed ; right: 0; top: 0px; background-color: aliceblue; text-align: center">
+    <div v-show="false" style="width: 300px;height:300px;float: left; position: fixed ; right: 0; top: 0px; background-color: aliceblue; text-align: center">
         <span>
             手牌：{{player1Str[1]}}
         </span>
     </div>
 
-    <div style="width: 300px;height:300px;float: left; position: fixed ; left: 600px; top: 0px; background-color: aliceblue; text-align: center">
+    <div v-show="false" style="width: 300px;height:300px;float: left; position: fixed ; left: 600px; top: 0px; background-color: aliceblue; text-align: center">
       <div style="width: 300px;word-wrap: break-word;">
           已出的牌：
           <br/>
@@ -20,32 +20,36 @@
       </div>
     </div>
 
-    <div style="position: fixed;left: 600px;top: 300px;">
-      <button @click="reStart">开始新一局</button>
+    <div style="position: fixed;left: 10px;bottom: 10px;">
+      <button @click="reStart" style="height: 50px;font-size:30px;">开始新一局</button>
     </div>
 
-      <div :style="{ marginLeft: playerMarginLeft-150 + 'px' }" style="position: fixed;bottom:0;width: 100%;height: 200px;line-height: 200px;">
-          你是 {{game.playerList[0].type==='nongmin'?'农民':'地主'}}
+      <div :style="{ marginLeft: playerMarginLeft-150 + 'px' }" style="color:white;position: fixed;bottom:0;width: 100%;height: 200px;line-height: 200px;">
+          你是 <span style="color:red;font-size: 20px">{{game.playerList[0].type==='nongmin'?'农民':'地主'}}</span>
       </div>
       <div :style="{ marginLeft: playerMarginLeft + 'px' }" style="position: fixed;bottom:0;width: 100%;height: 200px;">
-          <div @mouseenter="enter($event,item)" @mousedown="pickPoker(item)" v-for="item in game.playerList[0].pokerList" :class="{ selected: item.selected }" class="poker" style="">
-              {{item.text}}
+          <div @mouseenter="enter($event,item)" @mousedown="pickPoker(item)" v-for="item in game.playerList[0].pokerList" :class="{ selected: item.selected, s:item.number===16, x:item.number===17 }" class="poker pokerDesk" style="">
+              <span v-show="item.number<16">
+                  {{item.text}}
+              </span>
           </div>
       </div>
 
       <div style="position: fixed;bottom:200px;width: 100%;height: 100px;text-align:left;">
-          <div :style="{ marginLeft: buttonMarginLeft + 'px' }" style="width: 200px;height: 30px;">
-              <button @click="sendPoker2" style="height: 30px;border-radius: 4px;float:left">出牌</button>
-              <button @click="pass" style="height: 30px;border-radius: 4px;margin-left: 20px;float:right">不出</button>
-              <div v-show="game.currentPlayer===game.playerList[0]" style="color: red;width:150px;border: solid;border-radius: 4px;float: left">
+          <div :style="{ marginLeft: buttonMarginLeft + 'px' }" style="width: 400px;height: 60px;">
+              <button @click="pass" style="height: 60px;border-radius: 4px;float:left;font-size:40px;background-color: red">不出</button>
+              <button @click="sendPoker2" style="height: 60px;border-radius: 4px;float:right;font-size:40px;background-color: lawngreen">出牌</button>
+              <div v-show="game.currentPlayer===game.playerList[0]" style="color: red;width:150px;border: solid;border-radius: 4px;float: left;margin-left: 20px;">
                   请在{{game.second}}秒内出牌
               </div>
           </div>
       </div>
 
       <div v-if="game.playerList[0].lastSendObj&&game.playerList[0].lastSendObj.poker[0].text" :style="{ marginLeft: deskPokerMarginLeft + 'px' }" style="position: fixed;bottom:350px;width: 100%;height: 200px">
-          <div v-for="item in game.playerList[0].lastSendObj.poker" class="pokerDesk">
-              {{item.text}}
+          <div v-for="item in game.playerList[0].lastSendObj.poker" class="pokerDesk" :class="{ s:item.number===16, x:item.number===17 }">
+              <span v-show="item.number<16">
+                  {{item.text}}
+              </span>
           </div>
       </div>
       <div v-if="game.playerList[0].lastSendObj&&!game.playerList[0].lastSendObj.poker[0].text" :style="{ marginLeft: deskPokerMarginLeft + 'px' }" style="position: fixed;bottom:350px;width: 100%;height: 200px">
@@ -55,7 +59,7 @@
       </div>
 
       <div style="position: fixed;top:40px;left: 20px;height:200px;width:100px;border: solid 1px;border-radius: 8px;background-color: azure;text-align: center">
-          <p>
+          <p style="color:red;font-size: 20px">
               {{game.playerList[2].type==='nongmin'?'农民':'地主'}}
           </p>
           <p>
@@ -70,8 +74,10 @@
           </div>
       </div>
       <div v-if="game.playerList[2].lastSendObj&&game.playerList[2].lastSendObj.poker[0].text" style="position: fixed;top:100px;left:200px;height: 200px;">
-          <div v-for="item in game.playerList[2].lastSendObj.poker" class="pokerDesk">
-              {{item.text}}
+          <div v-for="item in game.playerList[2].lastSendObj.poker" class="pokerDesk" :class="{ s:item.number===16, x:item.number===17 }">
+              <span v-show="item.number<16">
+                  {{item.text}}
+              </span>
           </div>
       </div>
       <div v-if="game.playerList[2].lastSendObj&&!game.playerList[2].lastSendObj.poker[0].text" style="position: fixed;top:100px;left:200px;height: 200px;">
@@ -81,7 +87,7 @@
       </div>
 
       <div style="position: fixed;top:40px;right: 20px;height:200px;width:100px;border: solid 1px;border-radius: 8px;background-color: azure;text-align: center">
-          <p>
+          <p style="color:red;font-size: 20px">
               {{game.playerList[1].type==='nongmin'?'农民':'地主'}}
           </p>
           <p>
@@ -95,8 +101,10 @@
           </div>
       </div>
       <div v-if="game.playerList[1].lastSendObj&&game.playerList[1].lastSendObj.poker[0].text" style="position: fixed;top:100px;right:200px;height: 200px;">
-          <div v-for="item in game.playerList[1].lastSendObj.poker" class="pokerDesk">
-              {{item.text}}
+          <div v-for="item in game.playerList[1].lastSendObj.poker" class="pokerDesk" :class="{ s:item.number===16, x:item.number===17 }">
+              <span v-show="item.number<16">
+                  {{item.text}}
+              </span>
           </div>
       </div>
       <div v-if="game.playerList[1].lastSendObj&&!game.playerList[1].lastSendObj.poker[0].text" style="position: fixed;top:100px;right:200px;height: 200px;">
@@ -130,7 +138,7 @@ export default {
           return (window.innerWidth - (this.game.playerList[0].lastSendObj.poker.length*50))/2;
       },
       buttonMarginLeft: function(){
-          return (window.innerWidth - 200)/2;
+          return (window.innerWidth - 400)/2;
       },
 
       deskPoker: function(){
@@ -234,11 +242,9 @@ export default {
     .pokerDesk{
         height:100%;width:100px;border: solid 1px;border-radius: 16px;float: left;margin-left:-50px;background-color: azure;
         font-size: 30px;
+        background-repeat: no-repeat;background-size: cover;
     }
-    .poker{
-        height:100%;width:100px;border: solid 1px;border-radius: 16px;float: left;margin-left:-50px;background-color: azure;
-        font-size: 30px;
-    }
+
     .poker:hover{
         background-color: antiquewhite;
     }
@@ -246,4 +252,12 @@ export default {
     .selected{
         margin-top: -20px;
     }
+
+    .s{
+        background-image: url("../img/s.jpg");
+    }
+
+    .x{
+        background-image: url("../img/x.png");
+    }
 </style>

src/doudizhu/AI.js

@@ -545,7 +545,11 @@ class AI{
         let types = ['threeWithTwoList','threeWithOneList','threeList','twoList','oneList','threeWithTwo','threeWithOne','three','two','four','sx','one'];
         for(let i=0; i<types.length; i++){
             let obj = this.getSmallestObjByType(types[i], true);
+            if(!obj){
+                continue;
+            }
             this.player.deleteFromPokerListAndSendByObj(obj);
+            break;
         }
     }
 

src/doudizhu/Game.js

@@ -9,7 +9,7 @@ class Game{
         this.oldPokerList = [];
         this.currentPlayer = [];
         this.dizhu = null;
-        this.MaxSecond = 999999;
+        this.MaxSecond = 60;
         this.second = this.MaxSecond;
         this.isOver = true;
 
@@ -50,13 +50,11 @@ class Game{
 
     start(){
 
-        // this.playerList[0].getClassifyObj();
-
         this.isOver = false;
         this.timeLoop();
         this.currentPlayer = this.dizhu;
         if(this.currentPlayer.isRobot){
-            this.currentPlayer.playByAI2();
+            this.currentPlayer.playByAI();
         }
     }
 
@@ -69,12 +67,12 @@ class Game{
         this.resetTime();
         this.currentPlayer = this.currentPlayer.next;
         if(this.currentPlayer.isRobot){
-            this.currentPlayer.playByAI2();
+            this.currentPlayer.playByAI();
         }
     }
 
     gameOver(){
-        alert('gameOver! '+this.currentPlayer.name+' ['+this.currentPlayer.type+'] win!');
+        alert('游戏结束! '+this.currentPlayer.name+' ['+this.currentPlayer.type+'] 胜!');
         this.isOver = true;
     }