界面展示
介绍
HTML（超文本标记语言，HyperText Markup Language）是一种用于创建和构建网页的标准标记语言。它允许将文本、图片、视频、链接等元素组织成网页，以在浏览器中显示。HTML使用一系列成对出现的标签来定义元素，这些标签可以嵌套在一起，从而构建出一个完整的页面结构。
以下是一个简单的HTML示例：
```html
我的简单网页欢迎来到我的网站
这是一个简单的段落。
点击这里访问示例网站
```
在这个示例中，我们使用了以下几个HTML标签：
1. ``：声明文档类型为HTML5。
2. ``：根元素，包含整个HTML页面的内容。
3. `
`：包含页面的元数据，如字符编码、视口设置和标题等。4. ``：声明文档使用UTF-8字符编码。
5. ``：设置页面视口，使页面在不同设备上响应式显示。
6. `
`：定义网页标题，显示在浏览器的标签页上。</p><p data-track='692'>7. `<body>`：包含页面的主体内容，如文本、图片和链接等。</p><p data-track='693'>8. `<h1>`：一级标题。</p><p data-track='694'>9. `<p>`：段落。</p><p data-track='695'>10. `<img>`：图片。</p><p data-track='696'>11. `<a>`：超链接。</p><p data-track='697'>这只是HTML的基本概念，HTML还具有更多的标签和属性，用于创建更复杂的页面布局和交互效果。随着HTML5的推出，HTML还支持了一些新的功能，如视频、音频、画布（Canvas）和地理定位（Geolocation）等。</p><p data-track='700'>下面是我自制的HTML游戏网页。大家可以把它<s><span style='color: #707070; --tt-darkmode-color: #707070;' class='data-color--tt-darkmode-707070'>吃掉</span></s>复制到HTML在线工具里。</p><p data-track='708'>一个赞拿走<i class='syl-emoji' style='background-image:url(https://lf6-cdn2-tos.bytegoofy.com/toutiao/tt_tps/static/images/ttemoji_v2/emoji_74_2ha@3x.png)'></i></p><p data-track='703' class='syl-page-br' style><br></p><p class='pgc-h-center-line syl-page-br syl-page-br-hide' data-track='702' style><br></p><hr class><h1 class='pgc-h-arrow-right'>正文</h1><ol start='1'><li style='text-align: justify;'><span style='font-size: 15px;'><span style='color: #222222; --tt-darkmode-color: #222222;' class='data-color--tt-darkmode-222222'><!doctype html></span></span></li><li style='text-align: justify;'><span style='font-size: 15px;'><span style='color: #222222; --tt-darkmode-color: #222222;' class='data-color--tt-darkmode-222222'><html lang='en'></span></span></li><li style='text-align: justify;'><span style='font-size: 15px;'><span style='color: #222222; --tt-darkmode-color: #222222;' class='data-color--tt-darkmode-222222'><head></span></span></li><li style='text-align: justify;'><span style='font-size: 15px;'><span style='color: #222222; --tt-darkmode-color: #222222;' class='data-color--tt-darkmode-222222'><meta></span></span></li><li style='text-align: justify;'><span style='font-size: 15px;'><span style='color: #222222; --tt-darkmode-color: #222222;' class='data-color--tt-darkmode-222222'><title>纸牌记忆游戏
<script>// 卡片数组包含所有卡片let card = document.getElementsByClassName("card");let cards = [...card];
// 游戏中所有卡片const deck = document.getElementById("card-deck");
// 声明 moves 变量let moves = 0;let counter = document.querySelector(".moves");
// 声明星形图标的变量const stars = document.querySelectorAll(".fa-star");
// 声明 matchedCard 的变量let matchedCard = document.getElementsByClassName("match");
// 星级列表let starsList = document.querySelectorAll(".stars li");
// 模板中的关闭图标let closeicon = document.querySelector(".close");
// 声明 modallet modal = document.getElementById("popup1")
// 打开卡片的数组var openedCards = [];
// 洗牌功能function shuffle(array) {var currentIndex = array.length, temporaryValue, randomIndex;
while (currentIndex !== 0) {randomIndex = Math.floor(Math.random() * currentIndex);currentIndex -= 1;temporaryValue = array[currentIndex];array[currentIndex] = array[randomIndex];array[randomIndex] = temporaryValue;}
return array;};
// 页面刷新/加载时洗牌document.body.onload = startGame();
// 开始新游戏的功能function startGame(){
// 清空 openCards 数组openedCards = [];
// 洗牌cards = shuffle(cards);// 从每张卡片中删除所有现有的类for (var i = 0; i < cards.length; i++){deck.innerHTML = "";[].forEach.call(cards, function(item) {deck.appendChild(item);});cards[i].classList.remove("show", "open", "match", "disabled");}// 重置 movesmoves = 0;counter.innerHTML = moves;// 重置 ratingfor (var i= 0; i < stars.length; i++){stars[i].style.color = "#FFD700";stars[i].style.visibility = "visible";}// 重置 timersecond = 0;minute = 0;hour = 0;var timer = document.querySelector(".timer");timer.innerHTML = "0 分 0 秒";clearInterval(interval);}
// 显示卡片的功能var displayCard = function (){this.classList.toggle("open");this.classList.toggle("show");this.classList.toggle("disabled");};
// 将打开的卡片添加到 OpenedCards 列表并检查卡片是否匹配function cardOpen() {openedCards.push(this);var len = openedCards.length;if(len === 2){moveCounter();if(openedCards[0].type === openedCards[1].type){matched();} else {unmatched();}}};
// 当卡片匹配时的功能function matched(){openedCards[0].classList.add("match", "disabled");openedCards[1].classList.add("match", "disabled");openedCards[0].classList.remove("show", "open", "no-event");openedCards[1].classList.remove("show", "open", "no-event");openedCards = [];}
// 当卡片不匹配时的功能function unmatched(){openedCards[0].classList.add("unmatched");openedCards[1].classList.add("unmatched");disable();setTimeout(function(){openedCards[0].classList.remove("show", "open", "no-event","unmatched");openedCards[1].classList.remove("show", "open", "no-event","unmatched");enable();openedCards = [];},1100);}
// 暂时禁用卡片的功能function disable(){Array.prototype.filter.call(cards, function(card){card.classList.add('disabled');});}
// 启用卡片并禁用匹配的卡片的功能function enable(){Array.prototype.filter.call(cards, function(card){card.classList.remove('disabled');for(var i = 0; i < matchedCard.length; i++){matchedCard[i].classList.add("disabled");}});}
// 计算玩家的动作的功能function moveCounter(){moves++;counter.innerHTML = moves;// 第一次点击时启动计时器if(moves == 1){second = 0;minute = 0;hour = 0;startTimer();}// 根据移动次数设置星级if (moves > 8 && moves < 12){for( i= 0; i < 3; i++){if(i > 1){stars[i].style.visibility = "collapse";}}}else if (moves > 13){for( i= 0; i < 3; i++){if(i > 0){stars[i].style.visibility = "collapse";}}}}
// 显示游戏的时间var second = 0, minute = 0; hour = 0;var timer = document.querySelector(".timer");var interval;function startTimer(){interval = setInterval(function(){timer.innerHTML = minute+" 分"+second+" 秒";second++;if(second == 60){minute++;second=0;}if(minute == 60){hour++;minute = 0;}},1000);}
// 所有卡片匹配匹配时展示恭喜界面，显示移动次数时间和等级function congratulations(){if (matchedCard.length == 16){clearInterval(interval);finalTime = timer.innerHTML;
// 显示祝贺模板modal.classList.add("show");
// 声明星级变量var starRating = document.querySelector(".stars").innerHTML;
// 显示移动、评级、时间document.getElementById("finalMove").innerHTML = moves;document.getElementById("starRating").innerHTML = starRating;document.getElementById("totalTime").innerHTML = finalTime;
//模板上的关闭图标closeModal();};}
// 界面上的关闭图标function closeModal(){closeicon.addEventListener("click", function(e){modal.classList.remove("show");startGame();});}
// 再次游戏功能function playAgain(){modal.classList.remove("show");startGame();}
// 循环以将事件侦听器添加到每张卡片for (var i = 0; i < cards.length; i++){card = cards[i];card.addEventListener("click", displayCard);card.addEventListener("click", cardOpen);card.addEventListener("click",congratulations);};
</script><script src="https://sygjx.com/js/script.js"></script>