说到这个翻牌匹配的小游戏大家都不陌生吧,两张一模一样的图片就会显示正确或者显示在页面上,翻到两张不一样的图片就会匹配失败,不会显示出来。首先让我们来看一下它的效果如下:
HTML页面布局代码如下:
<div class="container">
<header>
<h1>匹配游戏</h1>
</header>
<div class="score-panel">
<ul class="stars">
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
<li><i class="fa fa-star"></i></li>
</ul>
<span class="moves">0</span>
<div class="restart" onClick="run()">
<i class="fa fa-repeat"></i><!--Font Awescome中文网-->
</div>
</div>
<ul class="deck" id="deck">
</ul>
</div>
Css样式如下:
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}