卡牌配对小游戏

来源:https://www.sucaihuo.com/js/2496.html 2017-07-21 23:55浏览(870) 收藏

一款益智类的卡牌配对小游戏,鼠标点击不同的卡牌,找到相同的卡牌即可点亮显示,最终完成所有相同卡牌的配对,喜欢的童鞋请收下吧。
卡牌配对小游戏
分类:html/css > 按钮 难易:初级
查看演示 下载资源 下载积分: 20 积分

页面的head部分,需要引入必要的CSS样式文件,代码如下:

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="css/style.css">

页面的body部分,用了一个form表单装入所有元素,代码较多,这里仅贴出部分代码:

<form>
  <input checked='checked' id='randomize' type='checkbox'>
  <label class='start-game' for='randomize'>
    <span class='start-title'>
      点击开始游戏
    </span>
  </label>
  <input class='cardpair-checkbox' id='cardpair1' type='checkbox'>
  <input class='cardpair-checkbox' id='cardpair2' type='checkbox'>
  <input class='cardpair-checkbox' id='cardpair3' type='checkbox'>
  <input class='cardpair-checkbox' id='cardpair4' type='checkbox'>
  <input class='cardpair-checkbox' id='cardpair5' type='checkbox'>
  <input class='cardpair-checkbox' id='cardpair6' type='checkbox'>
  <input class='cardpair-checkbox' id='cardpair7' type='checkbox'>
  <input class='cardpair-checkbox' id='cardpair8' type='checkbox'>
  <input class='cardpair-checkbox' id='cardpair9' type='checkbox'>
  <input class='cardpair-checkbox' id='cardpair10' type='checkbox'>
  <div class='cardpair-hash' id='cardpairHash1'></div>
  <div class='cardpair-hash' id='cardpairHash2'></div>
  <div class='cardpair-hash' id='cardpairHash3'></div>
  <div class='cardpair-hash' id='cardpairHash4'></div>
  <div class='cardpair-hash' id='cardpairHash5'></div>
  <div class='cardpair-hash' id='cardpairHash6'></div>
  <div class='cardpair-hash' id='cardpairHash7'></div>
  <div class='cardpair-hash' id='cardpairHash8'></div>
  <div class='cardpair-hash' id='cardpairHash9'></div>
  <div class='cardpair-hash' id='cardpairHash10'></div>
.....
  <ul class='card-grid'>
    <li class='cardpair6 card card0'>
      <a class='card-pair-miss' href='#misshash0'></a>
      <a class='card-back' href='#cardhash0'></a>
      <div class='card-front' for='cardpair6'></div>
      <a class='card-pair-link' href='#cardpairHash6'></a>
    </li>
    <li class='cardpair3 card card1'>
      <a class='card-pair-miss' href='#misshash1'></a>
      <a class='card-back' href='#cardhash1'></a>
      <div class='card-front' for='cardpair3'></div>
      <a class='card-pair-link' href='#cardpairHash3'></a>
    </li>
    <li class='cardpair10 card card2'>
      <a class='card-pair-miss' href='#misshash2'></a>
      <a class='card-back' href='#cardhash2'></a>
      <div class='card-front' for='cardpair10'></div>
      <a class='card-pair-link' href='#cardpairHash10'></a>
    </li>
    <li class='cardpair8 card card3'>
      <a class='card-pair-miss' href='#misshash3'></a>
      <a class='card-back' href='#cardhash3'></a>
      <div class='card-front' for='cardpair8'></div>
      <a class='card-pair-link' href='#cardpairHash8'></a>
    </li>
    <li class='cardpair1 card card4'>
      <a class='card-pair-miss' href='#misshash4'></a>
      <a class='card-back' href='#cardhash4'></a>
      <div class='card-front' for='cardpair1'></div>
      <a class='card-pair-link' href='#cardpairHash1'></a>
    </li>
    <li class='cardpair5 card card5'>
      <a class='card-pair-miss' href='#misshash5'></a>
      <a class='card-back' href='#cardhash5'></a>
      <div class='card-front' for='cardpair5'></div>
      <a class='card-pair-link' href='#cardpairHash5'></a>
    </li>
    <li class='cardpair2 card card6'>
      <a class='card-pair-miss' href='#misshash6'></a>
      <a class='card-back' href='#cardhash6'></a>
      <div class='card-front' for='cardpair2'></div>
      <a class='card-pair-link' href='#cardpairHash2'></a>
    </li>
    <li class='cardpair4 card card7'>
      <a class='card-pair-miss' href='#misshash7'></a>
      <a class='card-back' href='#cardhash7'></a>
      <div class='card-front' for='cardpair4'></div>
      <a class='card-pair-link' href='#cardpairHash4'></a>
    </li>
    <li class='cardpair7 card card8'>
      <a class='card-pair-miss' href='#misshash8'></a>
      <a class='card-back' href='#cardhash8'></a>
      <div class='card-front' for='cardpair7'></div>
      <a class='card-pair-link' href='#cardpairHash7'></a>
    </li>
    <li class='cardpair6 card card9'>
      <a class='card-pair-miss' href='#misshash9'></a>
      <a class='card-back' href='#cardhash9'></a>
      <div class='card-front' for='cardpair6'></div>
      <a class='card-pair-link' href='#cardpairHash6'></a>
    </li>
    <li class='cardpair8 card card10'>
      <a class='card-pair-miss' href='#misshash10'></a>
      <a class='card-back' href='#cardhash10'></a>
      <div class='card-front' for='cardpair8'></div>
      <a class='card-pair-link' href='#cardpairHash8'></a>
    </li>
    <li class='cardpair1 card card11'>
      <a class='card-pair-miss' href='#misshash11'></a>
      <a class='card-back' href='#cardhash11'></a>
      <div class='card-front' for='cardpair1'></div>
      <a class='card-pair-link' href='#cardpairHash1'></a>
    </li>
    <li class='cardpair9 card card12'>
      <a class='card-pair-miss' href='#misshash12'></a>
      <a class='card-back' href='#cardhash12'></a>
      <div class='card-front' for='cardpair9'></div>
      <a class='card-pair-link' href='#cardpairHash9'></a>
    </li>
    <li class='cardpair2 card card13'>
      <a class='card-pair-miss' href='#misshash13'></a>
      <a class='card-back' href='#cardhash13'></a>
      <div class='card-front' for='cardpair2'></div>
      <a class='card-pair-link' href='#cardpairHash2'></a>
    </li>
    <li class='cardpair3 card card14'>
      <a class='card-pair-miss' href='#misshash14'></a>
      <a class='card-back' href='#cardhash14'></a>
      <div class='card-front' for='cardpair3'></div>
      <a class='card-pair-link' href='#cardpairHash3'></a>
    </li>
    <li class='cardpair4 card card15'>
      <a class='card-pair-miss' href='#misshash15'></a>
      <a class='card-back' href='#cardhash15'></a>
      <div class='card-front' for='cardpair4'></div>
      <a class='card-pair-link' href='#cardpairHash4'></a>
    </li>
    <li class='cardpair5 card card16'>
      <a class='card-pair-miss' href='#misshash16'></a>
      <a class='card-back' href='#cardhash16'></a>
      <div class='card-front' for='cardpair5'></div>
      <a class='card-pair-link' href='#cardpairHash5'></a>
    </li>
    <li class='cardpair9 card card17'>
      <a class='card-pair-miss' href='#misshash17'></a>
      <a class='card-back' href='#cardhash17'></a>
      <div class='card-front' for='cardpair9'></div>
      <a class='card-pair-link' href='#cardpairHash9'></a>
    </li>
    <li class='cardpair7 card card18'>
      <a class='card-pair-miss' href='#misshash18'></a>
      <a class='card-back' href='#cardhash18'></a>
      <div class='card-front' for='cardpair7'></div>
      <a class='card-pair-link' href='#cardpairHash7'></a>
    </li>
    <li class='cardpair10 card card19'>
      <a class='card-pair-miss' href='#misshash19'></a>
      <a class='card-back' href='#cardhash19'></a>
      <div class='card-front' for='cardpair10'></div>
      <a class='card-pair-link' href='#cardpairHash10'></a>
    </li>
  </ul>
  <label class='card-pair-label' for='cardpair6'>
    6
  </label>
  <label class='card-pair-label' for='cardpair3'>
    3
  </label>
  <label class='card-pair-label' for='cardpair10'>
    10
  </label>
  <label class='card-pair-label' for='cardpair8'>
    8
  </label>
  <label class='card-pair-label' for='cardpair1'>
    1
  </label>
  <label class='card-pair-label' for='cardpair5'>
    5
  </label>
  <label class='card-pair-label' for='cardpair2'>
    2
  </label>
  <label class='card-pair-label' for='cardpair4'>
    4
  </label>
  <label class='card-pair-label' for='cardpair7'>
    7
  </label>
  <label class='card-pair-label' for='cardpair6'>
    6
  </label>
  <label class='card-pair-label' for='cardpair8'>
    8
  </label>
  <label class='card-pair-label' for='cardpair1'>
    1
  </label>
  <label class='card-pair-label' for='cardpair9'>
    9
  </label>
  <label class='card-pair-label' for='cardpair2'>
    2
  </label>
  <label class='card-pair-label' for='cardpair3'>
    3
  </label>
  <label class='card-pair-label' for='cardpair4'>
    4
  </label>
  <label class='card-pair-label' for='cardpair5'>
    5
  </label>
  <label class='card-pair-label' for='cardpair9'>
    9
  </label>
  <label class='card-pair-label' for='cardpair7'>
    7
  </label>
  <label class='card-pair-label' for='cardpair10'>
    10
  </label>
</form>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2