HTMlCSS实现切分方块小游戏

愛在花開的季節  论坛元老 | 5 天前 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 1826|帖子 1826|积分 5478

本内容来自网络，仅学习使用
这段代码构建了一个 HTML5 切积木益智游戏的前端界面，联合了 HTML、CSS 技能。HTML 部分界说了游戏的根本结构，包括游戏画布、游戏信息显示区（HUD）和菜单体系；CSS 部分则负责页面的样式设计，如配景、字体、按钮效果等。
代码详细分析

1. HTML 部分

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>HTML5切积木益智游戏</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <link rel="stylesheet" href="css/style.css">
  8. </head>
  9. <body>
  10.     <!-- Game canvas -->
  11.     <canvas id="c"></canvas>
  13.     <!-- Gameplay HUD -->
  14.     <div class="hud">
  15.         <div class="hud__score">
  16.             <div class="score-lbl"></div>
  17.             <div class="cube-count-lbl"></div>
  18.         </div>
  19.         <div class="pause-btn"><div></div></div>
  20.         <div class="slowmo">
  21.             <div class="slowmo__bar"></div>
  22.         </div>
  23.     </div>
  25.     <!-- Menu System -->
  26.     <div class="menus">
  27.         <div class="menu menu--main">
  28.             <h1>切块</h1>
  29.             <button type="button" class="play-normal-btn">开始游戏</button>
  30.             <button type="button" class="play-casual-btn">休闲模式</button>
  31.         </div>
  32.         <div class="menu menu--pause">
  33.             <h1>暂停</h1>
  34.             <button type="button" class="resume-btn">重新开始</button>
  35.             <button type="button" class="menu-btn--pause">主菜单</button>
  36.         </div>
  37.         <div class="menu menu--score">
  38.             <h1>游戏结束</h1>
  39.             <h2>分数:</h2>
  40.             <div class="final-score-lbl"></div>
  41.             <div class="high-score-lbl"></div>
  42.             <button type="button" class="play-again-btn">再玩一次</button>
  43.             <button type="button" class="menu-btn--score">主菜单</button>
  44.         </div>
  45.     </div>
  46.     <script  src="js/index.js"></script>
  47. </body>
  48. </html>
复制代码


  • 主体（<body>）：

    • 游戏画布（<canvas>）：id 为 c，用于绘制游戏画面。
    • 游戏信息显示区（.hud）：

      • .hud__score：包含分数显示区（.score - lbl）和方块数量显示区（.cube - count - lbl）。
      • .pause - btn：暂停按钮。
      • .slowmo：慢动作条，此中 .slowmo__bar 体现慢动作进度。

    • 菜单体系（.menus）：

      • .menu.menu--main：主菜单，包含 “开始游戏” 和 “休闲模式” 按钮。
      • .menu.menu--pause：暂停菜单，包含 “重新开始” 和 “主菜单” 按钮。
      • .menu.menu--score：游戏竣事菜单，显示终极分数、最高分数，包含 “再玩一次” 和 “主菜单” 按钮。

    • 脚本引入：引入外部 JavaScript 文件 js/index.js，可能包含游戏的焦点逻辑。

2. CSS 部分
  1. body {
  2.     margin: 0;
  3.     background-color: #000;
  4.     background-image: radial-gradient(ellipse at top, #335476 0.0%, #31506e 11.1%, #304b67 22.2%, #2f4760 33.3%, #2d4359 44.4%, #2c3f51 55.6%, #2a3a4a 66.7%, #293643 77.8%, #28323d 88.9%, #262e36 100.0%);
  5.     height: 100vh;
  6.     overflow: hidden;
  7.     font-family: monospace;
  8.     font-weight: bold;
  9.     letter-spacing: 0.06em;
  10.     color: rgba(255, 255, 255, 0.75);
  11. }
  13. #c {
  14.     display: block;
  15.     touch - action: none;
  16.     transform: translateZ(0);
  17. }
  19. /*/
  20. //        HUD        //
  21. /*/
  22. .hud__score,
  23. .pause-btn {
  24.     position: fixed;
  25.     font-size: calc(14px + 2vw + 1vh);
  26. }
  28. .hud__score {
  29.     top: 0.65em;
  30.     left: 0.65em;
  31.     pointer - events: none;
  32.     user - select: none;
  33. }
  35. .cube-count-lbl {
  36.     font-size: 0.46em;
  37. }
  39. .pause-btn {
  40.     position: fixed;
  41.     top: 0;
  42.     right: 0;
  43.     padding: 0.8em 0.65em;
  44. }
  46. .pause-btn>div {
  47.     position: relative;
  48.     width: 0.8em;
  49.     height: 0.8em;
  50.     opacity: 0.75;
  51. }
  53. .pause-btn>div::before,
  54. .pause-btn>div::after {
  55.     content: '';
  56.     display: block;
  57.     width: 34%;
  58.     height: 100%;
  59.     position: absolute;
  60.     background-color: #fff;
  61. }
  63. .pause-btn>div::after {
  64.     right: 0;
  65. }
  67. .slowmo {
  68.     position: fixed;
  69.     bottom: 0;
  70.     width: 100%;
  71.     pointer - events: none;
  72.     opacity: 0;
  73.     transition: opacity 0.4s;
  74.     will - change: opacity;
  75. }
  77. .slowmo::before {
  78.     content: 'SLOW - MO';
  79.     display: block;
  80.     font-size: calc(8px + 1vw + 0.5vh);
  81.     margin-left: 0.5em;
  82.     margin-bottom: 8px;
  83. }
  85. .slowmo::after {
  86.     content: '';
  87.     display: block;
  88.     position: fixed;
  89.     bottom: 0;
  90.     width: 100%;
  91.     height: 1.5vh;
  92.     background-color: rgba(0, 0, 0, 0.25);
  93.     z - index: -1;
  94. }
  96. .slowmo__bar {
  97.     height: 1.5vh;
  98.     background-color: rgba(255, 255, 255, 0.75);
  99.     transform - origin: 0 0;
  100. }
  102. /*/
  103. //       MENUS       //
  104. /*/
  105. .menus::before {
  106.     content: '';
  107.     pointer - events: none;
  108.     position: fixed;
  109.     top: 0;
  110.     right: 0;
  111.     bottom: 0;
  112.     left: 0;
  113.     background-color: #000;
  114.     opacity: 0;
  115.     transition: opacity 0.2s;
  116.     transition - timing - function: ease - in;
  117. }
  119. .menus.has - active::before {
  120.     opacity: 0.08;
  121.     transition - duration: 0.4s;
  122.     transition - timing - function: ease - out;
  123. }
  125. .menus.interactive - mode::before {
  126.     opacity: 0.02;
  127. }
  129. /* Menu containers */
  130. .menu {
  131.     pointer - events: none;
  132.     position: fixed;
  133.     top: 0;
  134.     right: 0;
  135.     bottom: 0;
  136.     left: 0;
  137.     display: flex;
  138.     flex - direction: column;
  139.     justify - content: center;
  140.     align - items: center;
  141.     user - select: none;
  142.     text - align: center;
  143.     color: rgba(255, 255, 255, 0.9);
  144.     opacity: 0;
  145.     visibility: hidden;
  146.     transform: translateY(30px);
  147.     transition - property: opacity, visibility, transform;
  148.     transition - duration: 0.2s;
  149.     transition - timing - function: ease - in;
  150. }
  152. .menu.active {
  153.     opacity: 1;
  154.     visibility: visible;
  155.     transform: translateY(0);
  156.     transition - duration: 0.4s;
  157.     transition - timing - function: ease - out;
  158. }
  160. .menus.interactive - mode .menu.active {
  161.     opacity: 0.6;
  162. }
  164. .menus:not(.interactive - mode) .menu.active>* {
  165.     pointer - events: auto;
  166. }
  168. /* Common menu elements */
  169. h1 {
  170.     font - size: 4rem;
  171.     line - height: 0.95;
  172.     text - align: center;
  173.     font - weight: bold;
  174.     margin: 0 0.65em 1em;
  175. }
  177. h2 {
  178.     font - size: 1.2rem;
  179.     line - height: 1;
  180.     text - align: center;
  181.     font - weight: bold;
  182.     margin: -1em 0.65em 1em;
  183. }
  185. .final - score - lbl {
  186.     font - size: 5rem;
  187.     margin: -0.2em 0 0;
  188. }
  190. .high - score - lbl {
  191.     font - size: 1.2rem;
  192.     margin: 0 0 2.5em;
  193. }
  195. button {
  196.     display: block;
  197.     position: relative;
  198.     width: 200px;
  199.     padding: 12px 20px;
  200.     background: transparent;
  201.     border: none;
  202.     outline: none;
  203.     user - select: none;
  204.     font - family: monospace;
  205.     font - weight: bold;
  206.     font - size: 1.4rem;
  207.     color: #fff;
  208.     opacity: 0.75;
  209.     transition: opacity 0.3s;
  210. }
  212. button::before {
  213.     content: '';
  214.     position: absolute;
  215.     top: 0;
  216.     right: 0;
  217.     bottom: 0;
  218.     left: 0;
  219.     background - color: rgba(255, 255, 255, 0.15);
  220.     transform: scale(0, 0);
  221.     opacity: 0;
  222.     transition: opacity 0.3s, transform 0.3s;
  223. }
  225. /* No `:focus` styles because this is a mouse/touch game! */
  226. button:active {
  227.     opacity: 1;
  228. }
  230. button:active::before {
  231.     transform: scale(1, 1);
  232.     opacity: 1;
  233. }
  235. .credits {
  236.     position: fixed;
  237.     width: 100%;
  238.     left: 0;
  239.     bottom: 20px;
  240. }
  242. a {
  243.     color: white;
  244. }
  246. /* Only enable hover state on large screens */
  247. @media (min - width: 1025px) {
  248.     button:hover {
  249.         opacity: 1;
  250.     }
  252.     button:hover::before {
  253.         transform: scale(1, 1);
  254.         opacity: 1;
  255.     }
  256. }
复制代码


  • 全局样式（body）：

    • 设置页面边距为 0，配景颜色为黑色，并添加径向渐变配景。
    • 设置页面高度为 100vh，隐蔽溢出内容。
    • 设置字体、字体粗细、字母间距和文字颜色。

  • 游戏画布（#c）：

    • 显示为块级元素，禁用触摸利用，开启硬件加速。

  • 游戏信息显示区（.hud）：

    • 设置 .hud__score 和 .pause - btn 的字体大小为响应式。
    • 设置 .hud__score 的位置和禁用指针事件、用户选择。
    • 设置 .pause - btn 的位置和样式，通过伪元素创建按钮图标。
    • 设置 .slowmo 的位置、透明度和过渡效果，通过伪元素添加提示文字和配景条。
    • 设置 .slowmo__bar 的高度和配景颜色。

  • 菜单体系（.menus）：

    • 通过伪元素设置菜单配景的透明度和过渡效果。
    • 设置 .menu 的初始状态为隐蔽，通过 .active 类显示菜单，并添加过渡效果。
    • 设置菜单标题、分数显示区和按钮的样式，包括字体大小、边距、配景等。
    • 设置按钮的悬停和激活效果，仅在大屏幕上启用悬停效果。

总结

这段代码通过 HTML 构建了游戏的根本结构，包括游戏画布、信息显示区和菜单体系；通过 CSS 设置了页面的样式，包括配景、字体、按钮效果等，为游戏提供了一个美观且交互性良好的界面。而游戏的焦点逻辑则由外部 JavaScript 文件 js/index.js 实现。
源码可联系QQ:3341742487
 效果如图

 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

愛在花開的季節

论坛元老
这个人很懒什么都没写!

楼主热帖

标签云

AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表