Web学员作品-个人项目NoRiShooter

项目背景

项目时间：2019-03 - 2019-05

开发人员：陈**1902-02班

项目名称：NoRiShooter

项目描述：以游戏《**战士2》为主题的一个多功能网站，在原官网基础上临摹和创新、实现酷炫动效及数据处理等

项目介绍：主要进行了游戏内容介绍以及数据展示，同时添加游戏最新资讯，版本更新，图库收录，原声OST，数据模拟等一系列便利玩家的 功能模块

技术栈

前端：h5/css3/bootstrap/ js/jq/vue

后端：Node.js/mysql

开发环境：windows平台

代码管理工具：git

代码管理仓库：开源github

代码使用工具：vscode/webStorm/photoshop

项目功能难点介绍

1.音乐播放器

(1)界面内容vue获取数据渲染

(2)vue切换src实现歌曲切换

(3)通过调用的audio的方法,获取、修改进度实现拖动和暂停

(4)监听audio vue computed同步计算生成进度条进度和时间

(5)自定义播放器外观

2. 图库列表呈现

(1)通过按钮修改查询sql排序修改图片数据的的获取实现排序

(2)页码切换实现图片切换

(3)动画与js作用实现炫酷特效

(4)交互设计

3. 模拟武器选择功能

(1)合理的数据结构

(2)模拟下拉框,下拉选中数据的获得

(3)界面展示的设计

(4)严谨的js运算结合数据生成结果

项目总结

功能实现: html css js vue数据相互结合

思路:

1.先定义好功能

2.设置功能css类名通过增添删改类名实现功能

3.打桩调试,一步一脚印

4.功能实现

收获:

1.巩固了在课堂上学习的知识

2.为了实现功能样式拓展了自己的思路与方法

3.学习到了一些在课堂上没有讲到的知识点

4.代码更加精简,重用性更高,更加合理清晰