JS纸牌记忆游戏
海拥✘ 人气:0这节实验我们将使用 HTML、CSS 和 JavaScript 制作纸牌记忆游戏。
让我们开始吧!
知识点
animation-duration 属性
backface-visibility 属性
visibility 属性
animation-timing-function 属性
HTML 用户界面
HTML 代码用于设计项目的基本结构,其中包含了一个 h1 标题,分数、星级和游戏时间面板,纸牌卡片列表以及获胜时的恭喜面板。
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>实验十七 纸牌记忆游戏</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="style.css" rel="external nofollow" > <!-- 导入bootstrap以及字体图标等样式 --> <link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="external nofollow" > </head> <body> <div class="container"> <header> <h1>纸牌记忆游戏</h1> </header> <section 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="timer"></div> <div class="restart" onclick="startGame()"> <i class="fa fa-repeat"></i> </div> </section> <ul class="deck" id="card-deck"> <li class="card" type="diamond"><i class="fa fa-diamond"></i></li> <li class="card" type="plane"><i class="fa fa-paper-plane-o"></i></li> <li class="card match" type="anchor"><i class="fa fa-anchor"></i> </li> <li class="card" type="bolt" ><i class="fa fa-bolt"></i></li> <li class="card" type="cube"><i class="fa fa-cube"></i></li> <li class="card match" type="anchor"><i class="fa fa-anchor"></i></li> <li class="card" type="leaf"><i class="fa fa-leaf"></i></li> <li class="card" type="bicycle"><i class="fa fa-bicycle"></i></li> <li class="card" type="diamond"><i class="fa fa-diamond"></i></li> <li class="card" type="bomb"><i class="fa fa-bomb"></i></li> <li class="card" type="leaf"><i class="fa fa-leaf"></i></li> <li class="card" type="bomb"><i class="fa fa-bomb"></i></li> <li class="card open show" type="bolt"><i class="fa fa-bolt"></i></li> <li class="card" type="bicycle"><i class="fa fa-bicycle"></i></li> <li class="card" type="plane"><i class="fa fa-paper-plane-o"></i></li> <li class="card" type="cube"><i class="fa fa-cube"></i></li> </ul> <div id="popup1" class="overlay"> <div class="popup"> <h2>恭喜
加载全部内容
- 猜你喜欢
- 用户评论