# js **Repository Path**: yao-y1/js ## Basic Information - **Project Name**: js - **Description**: 由JavaScript语言开发的平台游戏 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2023-06-14 - **Last Updated**: 2024-01-17 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # [2022-2023学年第2学期]([Document (js2023.pages.dev)](https://js2023.pages.dev/#/guide)) # [**实 验 报 告**]([Document (js2023.pages.dev)](https://js2023.pages.dev/#/lab/proj.final)) ![zucc](http://sigcc.gitee.io/plc2021/lab/zucc.png) - 课程名称:跨平台脚本开发技术 - 实验项目:期末大作业 - 专业班级：计算2003 - 学生学号：32001088 - 学生姓名：姚乙 - 实验指导教师:郭鸣 # 实验内容 ~~1.翻译英文每人五页~~ 2. 1. （选做）完成一个介绍JS进展的技术报告,要求如下，附加分。 - 内容范围 - Javascript语言新技术动向 - 如 async await, generator,webassembly, web socket,Service Worker, Reflect API 等 - Javascript框架 vue, cyclejs,infernojs, sveltejs,hyperapp... 介绍框架原理,使用案例. - Javascript 某个技术实现 Vdom,GraphQL - 技术报告范例参考[500 Lines or Less](http://www.aosabook.org/en/index.html) - 提交形式 - 提交 code + markdown文档 - 技术报告讲座 (可选,加分) - 预计 20分钟左右,下下周开始 - 制作 ppt (markdown) - 自我评估 5为最高 - 原创性 (1-5) - 技术难度 (1-5) - 工作量 (1-5) 3.大项目，分组完成，评分方式，以下为起始评分 - 及格 在现有的项目代码 - 现有代码修改与改进 - 客户端有服务器API发起网络调用 - 有简单的服务器处理逻辑 - 能解释服务器REST API 接口 - 能展示 网络请求的 Request Response 数据 - 中 采用前端框架,实现应用跨平台的适配，Desktop, Tablet, Mobile - 对现有功能有较多改进 - 优秀/良 完成自定义项目. - 使用比较有特点JavaScript框架 - solidjs/hyper/elm - 采用比较新颖的技术 例如FRP PWA Service Worker等 - 函数式编程 - 响应式编程 - 项目有创新新与技术难度 4.现有改进方式建议列表 - 开发技术 - UI 响应式设计 - 采用 BootStrap, Material Design等前端框架 - 支持 Desktop,Tablet,Mobile - 服务端 NodeJs框架 - Express、Koa等实现服务端 - WebSocket socket.io等实时交互技术 - Web Assembly 技术 5.项目信息参考 - 实际公司项目 - JavaScript程序性能优化 - GraphQL 项目 - UI设计器 - https://demo.realworld.io/#/ - 前后端分离 - 平台游戏 or 2048 - 添加用户登录 - 用户登录id 会话保存 - 用户头像保存 - 管理员后台 - CRUD操作 - 用户积分排行 - 积分排行存储到本地 - 积分排行存储到服务器 - 实现游戏手机平台，平板的支持 - 在线关卡编辑器 - 5 * 5 2048 - Time travel 编译器compiler/debugger - Cyclejs Time traveler - 图形化 FSM 编译器 - http://jsflap.com/ - http://bgrawi.com/Fourier-Visualizations/ - http://www.jflap.org/ - http://www.cs.sjsu.edu/faculty/pollett/154.1.11s/ - http://hackingoff.com/compilers - https://github.com/jahan-addison/posiy - JS语言创新 在js 中实现其他语言的语法特性 - https://github.com/slurmulon/flap - https://github.com/sanctuary-js/sanctuary - http://www.sweetjs.org/ - 健康/中医/书法/太极/汉服/传统文化方面项目 - [大家中医](http://www.dajiazhongyi.com/) - 中医资料学习 - 传统养生 八段锦 练习 （https://gotokeep.com/）类似的中医锻炼软件 - IT技术学习平台 - https://github.com/rusthon/Rusthon - webpackbin.com - https://hourofpython.trinket.io/ke3-shi4-hua4-python-jian3-jie4#/huan1-ying2/bian1-cheng2-yi1-xiao3-shi2 - Jupyter in browser 无服务端的jupyter? - https://try.jupyter.org/ - https://github.com/jvilk/BrowserFS - http://slides.com/bahmutov/browser-is-the-new-server-nodefest - https://github.com/kripken/emscripten - http://cyrille.rossant.net/numpy-browser-llvm/ - http://www.rfk.id.au/blog/entry/pypy-js-first-steps/?utm_source=tuicool&utm_medium=referral - 可视化项目 - 服务端数据存储, 网页端显示数据 - echarts NVD3.js - superset https://github.com/airbnb/superset - https://vega.github.io/voyager2/ - [https://ipywidgets.readthedocs.io/en/latest/examples/Widget%20Basics.html](https://ipywidgets.readthedocs.io/en/latest/examples/Widget Basics.html) - 参考 https://electron.atom.io/ 6.git 管理技术文档,和项目代码,可以使用 github desktop - 验收大作业的时候查看git log - npm i -g git-stats - https://github.com/tomgi/git_stats/graphs/contributors 7.代码风格 standard https://standardjs.com/readme-zhcn.html 8.项目分工表格 - 1人项目权重为1.0 - 2人项目权重和为 1.9 | 姓名 | 学号 | 班级 | 任务 | 权重 | | ---- | -------- | ---------- | ---------- | ------ | | Name | No. | Class | Task | Factor | | 姚乙 | 32001088 | 计算机2003 | 设计、编码 | 1.0 | 1. 项目自我评估表 | 技术点 | 自我评价 | 备注 | | --------------- | -------- | ---- | | session Storage | 4 | | | 响应式编程 | 2 | | | 函数式编程 | 3 | | | XMLHttpRequest | 4 | | | async | 3 | | 1. 项目自评等级:(1-5) 3 2. 项目说明 1. 项目 是基于现有的xxx代码 - 改进 16_game.js模块 增加了计分功能，通关时进行计分结算，死亡时清空未结算积分 - 开发 admin模块 实现管理员CRUD ![image-20230615232318662](C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20230615232318662.png) - 开发了login模块 实现了登录功能 ![image-20230615232443473](C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20230615232443473.png) - 开发了index模块 具备用户头像显示，排行榜查看，进行游戏等功能 ![image-20230615232626087](C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20230615232626087.png) 2.项目 是独立开发 3. 解决技术要点说明 - 解决了组件间数据传递问题， 关键代码与步骤如下 使用sessionStorage将数据存储到本地 ![image-20230615232800896](C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20230615232800896.png) 在其他组件中取出来使用 ![image-20230615232919371](C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20230615232919371.png) - 解决局内计分问题， 关键代码与步骤如下 在游戏程序内定义一个全局变量cnt_score,在达到won条件时对服务器发送请求更新分数并将其清零，在达到lost条件时将其清零 ![image-20230615233023271](C:\Users\Lenovo\AppData\Roaming\Typora\typora-user-images\image-20230615233023271.png) 4. 心得体会（结合自己情况具体说明） - 大项目开发过程心得 - 在这门课程中我第一次进行了前后端分离的尝试，一开始完全不知道该怎么做，在第一次使用XMLHttpRequest对服务器发送请求时也经常发生错误，但参考网上的资料一步步排查错误，一步步完善功能的感觉也很不错。在这次大项目开发过程中，我对JavaScript有了新的认知，JavaScript应用范围广泛，交互性强，JavaScript不仅可以在浏览器中运行，还可以在服务器端和移动端等多个平台上使用，具备较高的灵活性和可扩展性，在前后端均可使用；JavaScript对异步支持性比较好；JavaScript的可支持性比较好，几乎所有web浏览器都原生支持JavaScript。 - 本课程建议 - 课程难度适中。