《基于HTML5的智力游戏设计-电子信息工程本科学生毕业论文》由会员分享，可在线阅读，更多相关《基于HTML5的智力游戏设计-电子信息工程本科学生毕业论文（50页珍藏版）》请在金锄头文库上搜索。
1、本科学生毕业论文（设计）题目（中文）：基基于于H HT TM ML L5 5的的智智力力游游戏戏设设计计 （英文）：Design of Intelligent Game Based on HTML5姓 名 x xx xx x 学 号 xxx 院 （系） 电电子子与与信信息息工工程程学学院院 专业、年级 电电子子信信息息工工程程 指导教师 x xx xx x 讲讲师师 2017年 5 5月 10日xxx科技学院本科毕业论文（设计）诚信声明本人郑重声明：所呈交的本科毕业论文（设计），是本人在指导老师的指导下，独立进行研究工作所取得的成果，成果不存在知识产权争议，除文中已经注明引用的内容外，本论文不
2、含任何其他个人或集体已经发表或撰写过的作品成果。对本文的研究做出重要贡献的个人和集体均已在文中以明确方式标明。本人完全意识到本声明的法律结果由本人承担。本科毕业论文（设计）作者签名：二一七 年 五 月 十 日毕毕业业论论文文（设设计计）任任务务书书课题名称课题名称基于基于 HTML5HTML5 的智力游戏设计的智力游戏设计姓姓 名名xxxxxx学学 号号xxx院院 系系电子与信息工程学院电子与信息工程学院专专 业业电子信息工程电子信息工程指导教师指导教师xxxxxx 讲师讲师2015 年 10 月 20 日1、关键词：2048； HTML5； 智力游戏；Webstrom；Angular2； 2
3、、毕业论文（设计）内容要求：该课题需要设计和实现一个在网页上运行的智力游戏，需要使 JavaScript语言和 Webstorm 或其他前端开发工具，要求所设计的游戏画面良好，运行流畅。(1)游戏介绍： 游戏为益智类游戏，越到后面越难越有挑战； 游戏玩法：使用键盘上、下、左、右键控制所有方块往这个方向移动。 游戏规则：当所有方块往一个方向移动时，数字相同的方块可以相加变成一个方块，当拼出一个方块为 2048，即为胜利；当 16 宫被占满且所有相邻方块不能再相加时，游戏结束； 游戏界面：游戏界面有新游戏，记录当前分数，游戏介绍，记录历史最高分； 按照游戏的系统实现方法，做出系统分析、系统设计、系
4、统实施。（2）主要工作量和工作流程如下： 进行系统的需求分析； 开始搭建开发平台和环境； 根据需求分析和设计图来进行代码的编写； 对功能模块进行测试； 对项目整体进行测试； 将项目打包上传至网站； 完成毕业论文撰写，论文格式严格按照xxx 科技学院本科毕业设计（论 文）规范撰写，字数不少于10000 字； 准备答辩。3、文献查阅指引：1 胡崧. HTML 从入门到精通M.北京：中国青年出版社，2007.2 贾素玲,王强. Javasqript 程序设计M. 清华大学出版社.20073 费东东. 挑战Java scriptconstconst webpackMerge = requirerequ
5、ire(webpack-mergewebpack-merge); / 用于合并 WebPACK 配置constconst webpackMergeDll = webpackMerge.strategy(pluginsplugins: replacereplace);constconst commonConfig = requirerequire(./mon.js./mon.js); / 开发的设置/* WebPACK 插件*/constconst AddAssetHtmlPlugin = requirerequire(add-asset-html-webpack-pluginadd-asset
6、-html-webpack-plugin);constconst DefinePlugin = requirerequire(webpack/lib/DefinePluginwebpack/lib/DefinePlugin);constconst NamedModulesPlugin = requirerequire(webpack/lib/NamedModulesPluginwebpack/lib/NamedModulesPlugin);constconst LoaderOptionsPlugin = requirerequire(webpack/lib/LoaderOptionsPlugi
7、nwebpack/lib/LoaderOptionsPlugin);/* WebPACK 常数*/constconst ENV = processprocess.env.ENVENV = processprocess.env.NODE_ENVNODE_ENV = developmentdevelopment;constconst HOST = processprocess.env.HOST | 0.0.0.00.0.0.0;/设置项目运行 ip 地址constconst PORT = processprocess.env.PORT | 3000;/设置端口号constconst HMR = h
8、elpers.hasProcessFlag(hothot);constconst METADATA = webpackMerge(commonConfig(envenv: ENV).metadata, hosthost: HOST,portport: PORT,ENVENV: ENV,HMRHMR: HMR);constconst DllBundlesPlugin = requirerequire(webpack-dll-bundles-pluginwebpack-dll-bundles-plugin).DllBundlesPlugin;/* webpack 配置*/modulemodule.
9、exports = functionfunction (options) returnreturn webpackMerge(commonConfig(envenv: ENV), /* 开发工具，以加强调试*/devtooldevtool: cheap-module-source-mapcheap-module-source-map,10/* 影响编译输出的选项。*/outputoutput: /* 输出目录为绝对路径（必填）。*/pathpath: helpers.root(distdist),/* 指定磁盘上每个输出文件的名称。*/filenamefilename: name.bundle
10、.jsname.bundle.js,/* The filename of the SourceMaps for the JavaScript files.*/sourceMapFilenamesourceMapFilename: file.mapfile.map,/* 非登录块的文件名作为相对路径*/chunkFilenamechunkFilename: id.chunk.jsid.chunk.js,librarylibrary: ac_nameac_name,libraryTargetlibraryTarget: varvar,modulemodule: rulesrules: /* CSS
11、 加载支持 CSS 文件（样式目录）*/testtest: /.css$/,useuse: style-loaderstyle-loader, css-loadercss-loader,includeinclude: helpers.root(srcsrc, stylesstyles),/*11* scss 加载*/testtest: /.scss$/,useuse: style-loaderstyle-loader, css-loadercss-loader, sass-loadersass-loader,includeinclude: helpers.root(srcsrc, styles
12、styles),pluginsplugins: /*用于开发具有调试日志或添加全局常量的* Environment helpers*/newnew DefinePlugin(ENVENV: JSONJSON.stringify(METADATA.ENV),HMRHMR: METADATA.HMRHMR,process.envprocess.env: ENVENV: JSONJSON.stringify(METADATA.ENV),NODE_ENVNODE_ENV: JSONJSON.stringify(METADATA.ENV),HMRHMR: METADATA.HMRHMR,),newnew
13、 DllBundlesPlugin(bundlesbundles: polyfillspolyfills: core-jscore-js,namename: zone.jszone.js,pathpath: zone.js/dist/zone.jszone.js/dist/zone.js,namename: zone.jszone.js,pathpath: zone.js/dist/long-stack-trace-zone.jszone.js/dist/long-stack-trace-zone.js,ts-helpersts-helpers,12,vendorvendor: angular
14、/platform-browserangular/platform-browser,angular/platform-browser-dynamicangular/platform-browser-dynamic,angular/coreangular/core,angular/commonangular/common,angular/formsangular/forms,angular/httpangular/http,angular/routerangular/router,angularclass/hmrangularclass/hmr,rxjsrxjs,dllDirdllDir: helpers.root(dlldll),webpackConfigwebpackConfig: webpackM
