首页技术文章自制HTML游戏网页（制作游戏网页）

自制HTML游戏网页（制作游戏网页）

发布时间：2025-02-01 23:55:37
·
20 阅读
·
0 评论
文章标签： bootstrap hover

界面展示





介绍

HTML（超文本标记语言，HyperText Markup Language）是一种用于创建和构建网页的标准标记语言。它允许将文本、图片、视频、链接等元素组织成网页，以在浏览器中显示。HTML使用一系列成对出现的标签来定义元素，这些标签可以嵌套在一起，从而构建出一个完整的页面结构。

以下是一个简单的HTML示例：

```html

<!DOCTYPE html>

<html lang="zh">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>我的简单网页</title>

</head>

<body>

<h1>欢迎来到我的网站</h1>

<p>这是一个简单的段落。</p>

<img src="my-image.jpg" alt="描述图片内容的文本">

<a href="***">点击这里访问示例网站</a>

</body>

</html>

```

在这个示例中，我们使用了以下几个HTML标签：

1. `<!DOCTYPE html>`：声明文档类型为HTML5。

2. `<html>`：根元素，包含整个HTML页面的内容。

3. `<head>`：包含页面的元数据，如字符编码、视口设置和标题等。

4. `<meta charset="UTF-8">`：声明文档使用UTF-8字符编码。

5. `<meta name="viewport" content="width=device-width, initial-scale=1.0">`：设置页面视口，使页面在不同设备上响应式显示。

6. `<title>`：定义网页标题，显示在浏览器的标签页上。

7. `<body>`：包含页面的主体内容，如文本、图片和链接等。

8. `<h1>`：一级标题。

9. `<p>`：段落。

10. `<img>`：图片。

11. `<a>`：超链接。

这只是HTML的基本概念，HTML还具有更多的标签和属性，用于创建更复杂的页面布局和交互效果。随着HTML5的推出，HTML还支持了一些新的功能，如视频、音频、画布（Canvas）和地理定位（Geolocation）等。

下面是我自制的HTML游戏网页。大家可以把它吃掉复制到HTML在线工具里。

一个赞拿走[看]



正文

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>纸牌记忆游戏</title>
  6. <meta name="viewport" content="width=device-width,height=device-height,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">

  8. <style>
  9. html {
  10. box-sizing: border-box;
  11. }

  13. *,
  14. *::before,
  15. *::after {
  16. box-sizing: inherit;
  17. }

  19. html,
  20. body {
  21. width: 100%;
  22. height: 100%;
  23. margin: 0;
  24. padding: 0;
  25. font-weight:bolder;
  26. }

  28. body {
  29. background: #ffffff;
  30. font-size: 16px;
  31. }

  33. .container {
  34. display: flex;
  35. justify-content: center;
  36. align-items: center;
  37. flex-direction: column;
  38. }

  40. h1 {
  41. font-family: 'Gloria Hallelujah', cursive;
  42. }

  44. /*纸牌的样式*/
  45. .deck {
  46. width: 85%;
  47. background: #716F71;
  48. padding: 1rem;
  49. border-radius: 4px;
  50. box-shadow: 8px 9px 26px 0 rgba(46, 61, 73, 0.5);
  51. display: flex;
  52. flex-wrap: wrap;
  53. justify-content: space-around;
  54. align-items: center;
  55. margin: 0 0 3em;
  56. }

  58. .deck .card {
  59. height: 3.7rem;
  60. width: 3.7rem;
  61. margin: 0.2rem 0.2rem;
  62. background: #141214;;
  63. font-size: 0;
  64. color: #ffffff;
  65. border-radius: 5px;
  66. cursor: pointer;
  67. display: flex;
  68. justify-content: center;
  69. align-items: center;
  70. box-shadow: 5px 2px 20px 0 rgba(46, 61, 73, 0.5);
  71. }

  73. .deck .card.open {
  74. transform: rotateY(0);
  75. background: #02b3e4;
  76. cursor: default;
  77. animation-name: flipInY;
  78. -webkit-backface-visibility: visible;
  79. backface-visibility: visible;
  80. animation-duration: .75s;
  81. }

  83. .deck .card.show {
  84. font-size: 33px;
  85. }

  87. .deck .card.match {
  88. cursor: default;
  89. background: #E5F720;
  90. font-size: 33px;
  91. animation-name: rubberBand;
  92. -webkit-backface-visibility: visible;
  93. backface-visibility: visible;
  94. animation-duration: .75s;
  95. }

  97. .deck .card.unmatched {
  98. animation-name: pulse;
  99. -webkit-backface-visibility: visible;
  100. backface-visibility: visible;
  101. animation-duration: .75s;
  102. background: #e2043b;
  103. }

  105. .deck .card.disabled {
  106. pointer-events: none;
  107. opacity: 0.9;
  108. }

  110. /*分数面板的样式*/
  111. .score-panel {
  112. text-align: left;
  113. margin-bottom: 10px;
  114. }

  116. .score-panel .stars {
  117. margin: 0;
  118. padding: 0;
  119. display: inline-block;
  120. margin: 0 5px 0 0;
  121. }

  123. .score-panel .stars li {
  124. list-style: none;
  125. display: inline-block;
  126. }

  128. .score-panel .restart {
  129. float: right;
  130. cursor: pointer;
  131. }

  133. .fa-star {
  134. color: #FFD700;
  135. }

  137. .timer {
  138. display: inline-block;
  139. margin: 0 1rem;

  141. }

  143. /*祝贺面板的样式*/
  144. .overlay {
  145. position: fixed;
  146. top: 0;
  147. bottom: 0;
  148. left: 0;
  149. right: 0;
  150. background: rgba(0, 0, 0, 0.7);
  151. transition: opacity 500ms;
  152. visibility: hidden;
  153. opacity: 0;
  154. }

  156. .overlay:target {
  157. visibility: visible;
  158. opacity: 1;
  159. }

  161. .popup {
  162. margin: 70px auto;
  163. padding: 20px;
  164. background: #ffffff;
  165. border-radius: 5px;
  166. width: 85%;
  167. position: relative;
  168. transition: all 5s ease-in-out;
  169. }

  171. .popup h2 {
  172. margin-top: 0;
  173. color: #333;
  174. font-family: Tahoma, Arial, sans-serif;
  175. }

  177. .popup .close {
  178. position: absolute;
  179. top: 20px;
  180. right: 30px;
  181. transition: all 200ms;
  182. font-size: 30px;
  183. font-weight: bold;
  184. text-decoration: none;
  185. color: #333;
  186. }

  188. .popup .close:hover {
  189. color: #E5F720;
  190. }

  192. .popup .content-1,
  193. .content-2 {
  194. max-height: 30%;
  195. overflow: auto;
  196. text-align: center;
  197. }

  199. .show {
  200. visibility: visible;
  201. opacity: 100;
  202. }

  204. #starRating li {
  205. display: inline-block;
  206. }

  208. #play-again {
  209. background-color: #141214;
  210. padding: 0.7rem 1rem;
  211. font-size: 1.1rem;
  212. display: block;
  213. margin: 0 auto;
  214. width: 50%;
  215. font-family: 'Gloria Hallelujah', cursive;
  216. color: #ffffff;
  217. border-radius: 5px;
  218. }

  220. /* 卡片打开时的动画 */

  222. @keyframes flipInY {
  223. from {
  224. transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
  225. animation-timing-function: ease-in;
  226. opacity: 0;
  227. }

  229. 40% {
  230. transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
  231. animation-timing-function: ease-in;
  232. }

  234. 60% {
  235. transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
  236. opacity: 1;
  237. }

  239. 80% {
  240. transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
  241. }

  243. to {
  244. transform: perspective(400px);
  245. }
  246. }

  248. /* 卡片匹配时的动画 */
  249. @keyframes rubberBand {
  250. from {
  251. transform: scale3d(1, 1, 1);
  252. }

  254. 30% {
  255. transform: scale3d(1.25, 0.75, 1);
  256. }

  258. 40% {
  259. transform: scale3d(0.75, 1.25, 1);
  260. }

  262. 50% {
  263. transform: scale3d(1.15, 0.85, 1);
  264. }

  266. 65% {
  267. transform: scale3d(.95, 1.05, 1);
  268. }

  270. 75% {
  271. transform: scale3d(1.05, .95, 1);
  272. }

  274. to {
  275. transform: scale3d(1, 1, 1);
  276. }
  277. }

  279. /* 卡片不匹配时的动画 */
  280. @keyframes pulse {
  281. from {
  282. transform: scale3d(1, 1, 1);
  283. }

  285. 50% {
  286. transform: scale3d(1.2, 1.2, 1.2);
  287. }

  289. to {
  290. transform: scale3d(1, 1, 1);
  291. }
  292. }

  294. /******媒体查询*****/
  295. /* 适用于 320px 以下的样式*/
  296. @media (max-width: 320px) {
  297. .deck {
  298. width: 85%;
  299. }

  301. .deck .card {
  302. height: 4.7rem;
  303. width: 4.7rem;
  304. }
  305. }

  307. /* 适用于 768px 以上的样式*/
  308. @media (min-width: 768px) {
  309. .container {
  310. font-size: 22px;
  311. }

  313. .deck {
  314. width: 660px;
  315. height: 680px;
  316. }

  318. .deck .card {
  319. height: 125px;
  320. width: 125px;
  321. }

  323. .popup {
  324. width: 60%;
  325. }
  326. }
  327. .page-footer {
  328. position: fixed;
  329. right: 0;
  330. bottom: 20px;
  331. display: flex;
  332. align-items: center;
  333. padding: 5px;
  334. color: black;
  335. background: rgba(255, 255, 255, 0.65);
  336. }

  338. .page-footer a {
  339. display: flex;
  340. margin-left: 4px;
  341. }
  342. .touxiang{
  343. width:24px;
  344. height:24px;
  345. }
  346. </style>
  347. <!-- 导入bootstrap以及字体图标等样式 -->
  348. <link rel="stylesheet prefetch" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


  351. </head>
  352. <body>
  353. <div class="container">
  354. <header>
  355. <h1>纸牌记忆游戏</h1>
  356. <!-- 署名 -->
  357. <p align="center">DOLEFULNESS自制</p>
  358. </header>
  359. <section class="score-panel">
  360. <ul class="stars">
  361. <li><i class="fa fa-star"></i></li>
  362. <li><i class="fa fa-star"></i></li>
  363. <li><i class="fa fa-star"></i></li>
  364. </ul>
  365. <span class="moves">0</span>
  366. <div class="timer"></div>
  367. <div class="restart" onclick="startGame()">
  368. <i class="fa fa-repeat"></i>
  369. </div>
  370. </section>
  371. <ul class="deck" id="card-deck">
  372. <li class="card" type="diamond"><i class="fa fa-diamond"></i></li>
  373. <li class="card" type="plane"><i class="fa fa-paper-plane-o"></i></li>
  374. <li class="card match" type="anchor"><i class="fa fa-anchor"></i> </li>
  375. <li class="card" type="bolt" ><i class="fa fa-bolt"></i></li>
  376. <li class="card" type="cube"><i class="fa fa-cube"></i></li>
  377. <li class="card match" type="anchor"><i class="fa fa-anchor"></i></li>
  378. <li class="card" type="leaf"><i class="fa fa-leaf"></i></li>
  379. <li class="card" type="bicycle"><i class="fa fa-bicycle"></i></li>
  380. <li class="card" type="diamond"><i class="fa fa-diamond"></i></li>
  381. <li class="card" type="bomb"><i class="fa fa-bomb"></i></li>
  382. <li class="card" type="leaf"><i class="fa fa-leaf"></i></li>
  383. <li class="card" type="bomb"><i class="fa fa-bomb"></i></li>
  384. <li class="card open show" type="bolt"><i class="fa fa-bolt"></i></li>
  385. <li class="card" type="bicycle"><i class="fa fa-bicycle"></i></li>
  386. <li class="card" type="plane"><i class="fa fa-paper-plane-o"></i></li>
  387. <li class="card" type="cube"><i class="fa fa-cube"></i></li>
  388. </ul>
  389. <div id="popup1" class="overlay">
  390. <div class="popup">
  391. <h2>恭喜 </h2>
  392. <a class="close" href="#">×</a>
  393. <div class="content-1">
  394. 恭喜你获得了胜利
  395. </div>
  396. <div class="content-2">
  397. <p>你在<span id="totalTime"> </span>内 </p>
  398. <p>移动了<span id="finalMove"> </span> 次 </p>
  399. <p>星级: <span id="starRating"></span></p>
  400. </div>
  401. <button id="play-again"onclick="playAgain()">
  402. 再玩一次 </a>
  403. </button>
  404. </div>
  405. </div>

  407. </div>
  408. <script>
  409. // 卡片数组包含所有卡片
  410. let card = document.getElementsByClassName("card");
  411. let cards = [...card];

  413. // 游戏中所有卡片
  414. const deck = document.getElementById("card-deck");

  416. // 声明 moves 变量
  417. let moves = 0;
  418. let counter = document.querySelector(".moves");

  420. // 声明星形图标的变量
  421. const stars = document.querySelectorAll(".fa-star");

  423. // 声明 matchedCard 的变量
  424. let matchedCard = document.getElementsByClassName("match");

  426. // 星级列表
  427. let starsList = document.querySelectorAll(".stars li");

  429. // 模板中的关闭图标
  430. let closeicon = document.querySelector(".close");

  432. // 声明 modal
  433. let modal = document.getElementById("popup1")

  435. // 打开卡片的数组
  436. var openedCards = [];


  439. // 洗牌功能
  440. function shuffle(array) {
  441. var currentIndex = array.length, temporaryValue, randomIndex;

  443. while (currentIndex !== 0) {
  444. randomIndex = Math.floor(Math.random() * currentIndex);
  445. currentIndex -= 1;
  446. temporaryValue = array[currentIndex];
  447. array[currentIndex] = array[randomIndex];
  448. array[randomIndex] = temporaryValue;
  449. }

  451. return array;
  452. };


  455. // 页面刷新/加载时洗牌
  456. document.body.onload = startGame();

  458. // 开始新游戏的功能
  459. function startGame(){

  461. // 清空 openCards 数组
  462. openedCards = [];

  464. // 洗牌
  465. cards = shuffle(cards);
  466. // 从每张卡片中删除所有现有的类
  467. for (var i = 0; i < cards.length; i++){
  468. deck.innerHTML = "";
  469. [].forEach.call(cards, function(item) {
  470. deck.appendChild(item);
  471. });
  472. cards[i].classList.remove("show", "open", "match", "disabled");
  473. }
  474. // 重置 moves
  475. moves = 0;
  476. counter.innerHTML = moves;
  477. // 重置 rating
  478. for (var i= 0; i < stars.length; i++){
  479. stars[i].style.color = "#FFD700";
  480. stars[i].style.visibility = "visible";
  481. }
  482. // 重置 timer
  483. second = 0;
  484. minute = 0;
  485. hour = 0;
  486. var timer = document.querySelector(".timer");
  487. timer.innerHTML = "0 分 0 秒";
  488. clearInterval(interval);
  489. }


  492. // 显示卡片的功能
  493. var displayCard = function (){
  494. this.classList.toggle("open");
  495. this.classList.toggle("show");
  496. this.classList.toggle("disabled");
  497. };


  500. // 将打开的卡片添加到 OpenedCards 列表并检查卡片是否匹配
  501. function cardOpen() {
  502. openedCards.push(this);
  503. var len = openedCards.length;
  504. if(len === 2){
  505. moveCounter();
  506. if(openedCards[0].type === openedCards[1].type){
  507. matched();
  508. } else {
  509. unmatched();
  510. }
  511. }
  512. };


  515. // 当卡片匹配时的功能
  516. function matched(){
  517. openedCards[0].classList.add("match", "disabled");
  518. openedCards[1].classList.add("match", "disabled");
  519. openedCards[0].classList.remove("show", "open", "no-event");
  520. openedCards[1].classList.remove("show", "open", "no-event");
  521. openedCards = [];
  522. }


  525. // 当卡片不匹配时的功能
  526. function unmatched(){
  527. openedCards[0].classList.add("unmatched");
  528. openedCards[1].classList.add("unmatched");
  529. disable();
  530. setTimeout(function(){
  531. openedCards[0].classList.remove("show", "open", "no-event","unmatched");
  532. openedCards[1].classList.remove("show", "open", "no-event","unmatched");
  533. enable();
  534. openedCards = [];
  535. },1100);
  536. }


  539. // 暂时禁用卡片的功能
  540. function disable(){
  541. Array.prototype.filter.call(cards, function(card){
  542. card.classList.add('disabled');
  543. });
  544. }


  547. // 启用卡片并禁用匹配的卡片的功能
  548. function enable(){
  549. Array.prototype.filter.call(cards, function(card){
  550. card.classList.remove('disabled');
  551. for(var i = 0; i < matchedCard.length; i++){
  552. matchedCard[i].classList.add("disabled");
  553. }
  554. });
  555. }


  558. // 计算玩家的动作的功能
  559. function moveCounter(){
  560. moves++;
  561. counter.innerHTML = moves;
  562. // 第一次点击时启动计时器
  563. if(moves == 1){
  564. second = 0;
  565. minute = 0;
  566. hour = 0;
  567. startTimer();
  568. }
  569. // 根据移动次数设置星级
  570. if (moves > 8 && moves < 12){
  571. for( i= 0; i < 3; i++){
  572. if(i > 1){
  573. stars[i].style.visibility = "collapse";
  574. }
  575. }
  576. }
  577. else if (moves > 13){
  578. for( i= 0; i < 3; i++){
  579. if(i > 0){
  580. stars[i].style.visibility = "collapse";
  581. }
  582. }
  583. }
  584. }


  587. // 显示游戏的时间
  588. var second = 0, minute = 0; hour = 0;
  589. var timer = document.querySelector(".timer");
  590. var interval;
  591. function startTimer(){
  592. interval = setInterval(function(){
  593. timer.innerHTML = minute+" 分"+second+" 秒";
  594. second++;
  595. if(second == 60){
  596. minute++;
  597. second=0;
  598. }
  599. if(minute == 60){
  600. hour++;
  601. minute = 0;
  602. }
  603. },1000);
  604. }


  607. // 所有卡片匹配匹配时展示恭喜界面，显示移动次数时间和等级
  608. function congratulations(){
  609. if (matchedCard.length == 16){
  610. clearInterval(interval);
  611. finalTime = timer.innerHTML;

  613. // 显示祝贺模板
  614. modal.classList.add("show");

  616. // 声明星级变量
  617. var starRating = document.querySelector(".stars").innerHTML;

  619. // 显示移动、评级、时间
  620. document.getElementById("finalMove").innerHTML = moves;
  621. document.getElementById("starRating").innerHTML = starRating;
  622. document.getElementById("totalTime").innerHTML = finalTime;

  624. //模板上的关闭图标
  625. closeModal();
  626. };
  627. }


  630. // 界面上的关闭图标
  631. function closeModal(){
  632. closeicon.addEventListener("click", function(e){
  633. modal.classList.remove("show");
  634. startGame();
  635. });
  636. }


  639. // 再次游戏功能
  640. function playAgain(){
  641. modal.classList.remove("show");
  642. startGame();
  643. }


  646. // 循环以将事件侦听器添加到每张卡片
  647. for (var i = 0; i < cards.length; i++){
  648. card = cards[i];
  649. card.addEventListener("click", displayCard);
  650. card.addEventListener("click", cardOpen);
  651. card.addEventListener("click",congratulations);
  652. };

  654. </script>
  655. <script src="https://sygjx.com/js/script.js"></script>
  656. </body>
  657. </html>