javascript - 当任何国王(卡片 13)被选中时,我如何让我的游戏结束?

标签 javascript html css

我现在有一个随机顺序的卡片,但游戏只会在我选择 c13.gif 卡片时结束。我曾尝试使用 else if 来解决这个问题,但不幸的是,这不起作用。如果 13 号(国王)牌中的任何一张被选中,我希望你结束游戏。该游戏的概念与扫雷类似。

<!DOCTYPE HTML>
    <html>
    <body>
    <head> 
    <meta charset="utf-8">
    <title>Don't Pick the King!</title>

    <table style="width:50%">
      <tr>
        <td><img src="cards/b.gif" Class="back" id="card_0" onClick="flipCard(0);"></td>
        <td><img src="cards/b.gif" Class="back" id="card_1" onClick="flipCard(1);"></td>
        <td><img src="cards/b.gif" Class="back" id="card_2" onClick="flipCard(2);"></td>
      </tr>
      <tr>
       <td><img src="cards/b.gif" Class="back" id="card_3" onClick="flipCard(3);"></td>
       <td><img src="cards/b.gif" Class="back" id="card_4" onClick="flipCard(4);"></td>
       <td><img src="cards/b.gif" Class="back" id="card_5" onClick="flipCard(5);"></td>
      </tr>
      <tr>
      <td><img src="cards/b.gif" Class="back" id="card_6" onClick="flipCard(6);"></td>
      <td><img src="cards/b.gif" Class="back" id="card_7" onClick="flipCard(7);"></td>
      <td><img src="cards/b.gif" Class="back" id="card_8" onClick="flipCard(8);"></td>
      </tr>
      <tr>
      <td><img src="cards/b.gif" Class="back" id="card_9" onClick="flipCard(9);"></td>
      <td><img src="cards/b.gif" Class="back" id="card_10" onClick="flipCard(10);"></td>
      <td><img src="cards/b.gif" Class="back" id="card_11" onClick="flipCard(11);"></td>
      </tr>
    </table>
    <p id="score" style="float:center">If you pick a king you lose.</p>

    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="hard-copy.html">Restart</a></li>
    </ul>
    </div>
    <style>
    * {
        background-color: lightblue;
        border-color: hsla(173,100%,50%,1.00);
        font-weight: bold;  
    }
    ul { 
        list-style-type: none;
        margin:0;
        padding:0; <!--- Getting rid of the bullets within the list --> 
    }

    .back
    {width:100px;
    height:100px;
    }

    </style>

    <script language="JavaScript">


    /*ID of each card 0,1,2
                      3,4,5,
                      6,7,8,
                      9,10,11 ---12 cards 0 being the 1st and 11 being 12th card */


    var deck = ["cards/c11.gif","cards/c12.gif","cards/d11.gif","cards/d12.gif","cards/h11.gif",
            "cards/h12.gif","cards/s11.gif","cards/s12.gif","cards/c13.gif", "cards/d13.gif", "cards/h13.gif", "cards/s13.gif"];
    //deck of cards
    function shuffle(deck){ 

        for(swaps=0; swaps<11; swaps++){
            var shuffle1=Math.floor(Math.random()*deck.length);
            var shuffle2=Math.floor(Math.random()*deck.length);
            var temp=deck[shuffle1];
            deck[shuffle1]=deck[shuffle2];
            deck[shuffle2]=temp;
        }
    }
    //for loop there to shuffle from deck the 12 cards
    //var shuffles randomises deck every time game is played
    var disabledCards = [];
    var gameOver = false;

    function flipCard(card) {
      if(!gameOver) //if game not over 
      {
          if(disabledCards[card] !== false) //not equal value or not equal type
          {
              if(deck[card] != "cards/c13.gif")  
              {
                  disabledCards[card] = false; 
                  selection = card;
                  document.images[card].src = deck[card];
              }

              else {
                  gameOver = true;
                  alert("You chose a King!  ¯|_(ツ)_|¯" );
              }
          } else {
              alert("Card has already been clicked! ¯|_(ツ)_|¯" );
          }
      } else {
          alert("Game has already ended!  ¯|_(ツ)_|¯");
      }
    }

    //when user clicks on a card the card will flip over and choose random image from deck
    function onLoad(){
        shuffle(deck);
        }
    //when program first loads up place the cards in a random order
    document.addEventListener("DOMContentLoaded", onLoad);
    //event listener waits for DOM to finish loading then executes onLoad function
    </script>
    </body>
    </html>

最佳答案

不要每次选择卡片时都调用随机播放,您可以让它只执行一次,当 DOM 完成加载时。并将 var 关键字添加到变量中。试试这个:

var deck = ["cards/c11.gif", "cards/c12.gif", "cards/d11.gif", "cards/d12.gif", "cards/h11.gif",
  "cards/h12.gif", "cards/s11.gif", "cards/s12.gif", "cards/c13.gif", "cards/d13.gif", "cards/h13.gif", "cards/s13.gif"
];
deck(1, 0);

function shuffle(deck) {
  for (var swaps = 0; swaps < 12; swaps++) {
    var shuffle1 = Math.floor(Math.random() * deck.length);
    var shuffle2 = Math.floor(Math.random() * deck.length);
    var temp = deck[shuffle1];
    deck[shuffle1] = deck[shuffle2];
    deck[shuffle2] = temp;
  }
}

function flipCard(card) {
  selection = card;
  document.images[card].src = deck[card];
}

function onLoad() {
  shuffle(deck)
}

document.addEventListener("DOMContentLoaded", onLoad);

关于javascript - 当任何国王(卡片 13)被选中时,我如何让我的游戏结束?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30064283/

相关文章:

javascript - 为什么 jQuery 将其原型(prototype)别名为 `fn` ?

javascript - 仅启用 mouseup 事件 Jquery 中的 Click 事件

javascript - jQuery 使用 $.get 页面读取标题

javascript - 使用jquery将div转换为图像数据

html - 始终在底部页脚不起作用

c# - KENDO ui menU IE9问题

javascript - 计算机重启后的 TestCafe/Atom 运行结果

html - 高度和最大高度有什么区别?

Javascript mouseenter() 无法正常工作

javascript - 我怎样才能让这个动画响应?