王冠博 计算机应用技术·大一实践学期

项目简介：

该作品是一款模仿音游DJMAX RESPECT V制作的APP，页面UI以琥珀色和蓝色或紫红色为主色调，与多样的曲风（如色彩贝斯，新金属，艺核，Kpop等）相辅相成，同时设计有与街机类似的大量光效，240FPS的背景动画，视觉效果有张力，使用户沉浸其中。 应用功能较多，包括收藏BGA的播放，滑动切换模式，动态调整页面元素等，外加模拟了注册与登录储存，音视频、图像预加载等功能，给予用户高效、高兼容性的体验，为音游爱好者制作了一款兼具观赏性与交互性的APP。

主要技术：

本作品遵循现代Web技术标准进行开发，其核心架构采用HTML5构建语义化结构，确保页面内容的清晰表达与高效解析;利用CSS3实现样式布局设计涵盖响应式布局方案和通过 JS的resize事件监听窗口大小变化事件，动态调整页面元素的宽度和高度以适配各类终端设备，并加有CSS和JS的页面过渡动画效果以提升视觉体验。功能交互主要通过原生JS实现，包括Canvas 2D 绘制背景图像和视频，postMessage API，本地数据存储和正则表达式结合HTML5表单验证，完成登录与注册的储存与页面登录与注册状态切换，同时加以音效和模态框辅助。 iframe + message的跨域通讯完成了收藏BGA的播放,requestAnimationFrame实现高帧率动画，保证页面流畅性和视觉效果。同时有模态框开关状态，广告的关闭1天功能，滑动切换模式，并触发切换动画和更改背景动画，logo轮播图的切换，启动页的呼吸灯效果，页面的切换与开启，页面切换时的背景音视频播放与开启等。整体技术实现聚焦于原生Web能力开发，确保各环节运行流畅，给予用户高效、高兼容性的体验。

图1 登录注册

图2 模式切换

图3 BGA播放

图4 iPhone XR屏幕的适配

图5华为mata60屏幕的适配

图6 iPhone Pro 12屏幕的适配