三脚猫俱乐部v1.0开发笔记

历时一周，三脚猫俱乐部官网V1.0开发完成。

写篇文章来总结一下，记录一下项目的设计、部分代码文件的功能，以及背后的实现原理。

目录

1. 项目概览
2. 界面预览
3. 代码文件讲解
4. 未来计划

项目概览

三脚猫是ECO30的延伸，而三脚猫俱乐部就是给我们的这个小社团开发的官网。

目前，V1版本是纯粹的，一个有前端动画，可交互的小型静态网站，完全基于CSS、JavaScript、HTML进行开发，

界面预览

以下展示了三种动画效果，以及鼠标悬停时显示的随机成员信息和动态标语的效果：

Hexagon 动画效果

Matrix 动画效果

Yigo 粒子效果

鼠标悬停显示不同成员信息

代码文件讲解

index.html

index.html是整个网站的核心结构文件，包含了页面的基础框架和各个模块的引用。

• 结构概览：页面包含了container和logo等元素，同时引入了style.css来定义样式，JavaScript文件则用于增强交互。
• 引入部分：

  <link rel="stylesheet" href="style.css">
  <script src="logo-manager.js"></script>
  <script src="animations.js"></script>
  <script src="effect.js"></script>
  <!-- 更多JavaScript文件 -->
  

style.css & fonts.css

style.css与fonts.css定义了整个页面的视觉风格和字体使用。

• 全局样式：页面整体风格为深色主题，使用自定义字体进行排版。style.css主要控制元素的位置、Logo的动画效果以及背景的渐变等。
• 字体定义：fonts.css中包含了自定义字体，包括中文和英文的字体，通过@font-face加载字体文件。

  @font-face {
      font-family: 'ZhReRegular';
      src: url('zh_reRegular.woff2') format('woff2');
      font-display: swap;
  }
  

who.js

who.js文件包含了网站的Logo和相关标题、标语的配置，以JSON格式存储并在前端进行动态切换。

• 成员数据：通过配置不同Logo和标语内容，实现鼠标悬停时的动态切换。

  const CONFIG = {
      "defaultLogo": "*******隐藏路径*******",
      "alternatives": [
          { "logo": "*******隐藏路径*******", "title": "742.", "subtitle": { "text": "Real Gamer" } },
          { "logo": "*******隐藏路径*******", "title": "膨膨", "subtitle": { "text": "人生如棋 落子无悔" } }
          // 更多配置项
      ]
  };
  

animations.js

animations.js文件用于实现页面的动画效果，包含matrix、yigo、hexagon三种不同的动画类型。

• 核心逻辑：通过在Canvas上绘制内容，分别实现了矩阵风格字符流、粒子效果和六边形网格动画。

  function startCombinedEffect(effect) {
      if (effect === 'matrix') {
          drawMatrix(); // 启动Matrix效果
      } else if (effect === 'yigo') {
          drawYigo(); // 启动粒子效果
      } else if (effect === 'hexagon') {
          loop(); // 启动六边形动画
      }
  }
  

effect.js

effect.js用于控制背景的渐变以及鼠标交互的遮罩效果。

• 渐变背景：渐变背景由GradientBackground对象管理，通过插值和过渡时间使得背景颜色平滑变化。

  GradientBackground.setNewTargetColors();
  gradientBg.style.background = `linear-gradient(45deg, ${currentColor1}, ${currentColor2})`;
  

sentences.js

sentences.js用于管理页面中显示的标题和标语。标语和标题是动态切换的，通过数组存储多个选项，并在JavaScript中循环展示。

• 标题切换逻辑：通过CycleSequence类来确保标题和标语的循环展示。

  const sentenceSequence = new CycleSequence(SENTENCES.alternatives);
  function cycleText() {
      const nextSentence = sentenceSequence.next();
      updateTitleText(nextSentence.title, nextSentence.subtitle);
  }
  

utils.js

utils.js封装了一些常用的工具函数，例如节流函数、颜色生成、图片预加载等。

• 节流函数：用于控制某些高频事件的触发，减少性能消耗。

  function throttle(func, limit) {
      let inThrottle;
      return function(...args) {
          if (!inThrottle) {
              func.apply(this, args);
              inThrottle = true;
              setTimeout(() => inThrottle = false, limit);
          }
      }
  }
  

logo-manager.js

logo-manager.js用于控制Logo点击后的动画效果以及角落菜单按钮的显示。

• Logo交互：Logo的点击会触发菜单按钮显示，并且在动画期间自动隐藏按钮。

  logo.addEventListener('click', () => this.handleLogoClick());
  function handleLogoClick() {
      if (!this.isAnimationActive()) {
          this.toggleCornerButtons(); // 切换四角按钮
      }
  }
  

未来计划

关于第二个版本，我的想法是在动画加载结束后点击LOGO，在（左上左下右上右下）网页的四个角落出现图标（也可以在其他地方有更多，也可以是浮现菜单栏，然后点一下会有下拉项可以选择），通过点击图标触发功能模块。

目前想的两个功能，一个是相册，一个是CS武器库展示。

点击相册按钮后，页面将渲染出来一个照片瀑布流（圆角），然后背后的渐变动态背景keep，其他的元素消失。这个功能要求不会跳转到其他页面，但是每次点击此按钮，都会随机加载图床里的20张照片。

目前静态的菜单效果（图标是暂代，还未设计）：

静态菜单效果

点击武器库按钮后，会出现一个CS库存，或装备购买菜单（要完美复刻CS2中的样式），然后就可以展示我和朋友们的库存啦~

因为要求的功能较多，所以纯前端是做不出来了感觉，因此下一步的开发计划：

1. 使用VUE + Element重构前端，进一步提高代码的模块化和复用性。
2. 使用Spring作为后台框架，支持更多动态数据的交互。