基于HTML5的智力游戏设计

本科学生毕业论文（设计） 题目（中文）：基于HTML5的智力游戏设计 （英文）：Design of Intelligent Game Based on HTML5 姓 名 彭佳杰 学 号 201206002116 院 （系） 电子与信息工程学院 专业、年级 电子信息工程 指导教师 李玲香 讲师 2017年 5月 10日湖南科技学院本科毕业论文（设计）诚信声明本人郑重声明：所呈交的本科毕业论文（设计），是本人在指导老师的指导下，独立进行研究工作所取得的成果，成果不存在知识产权争议，除文中已经注明引用的内容外，本论文不含任何其他个人或集体已经发表或撰写过的作品成果。对本文的研究做出重要贡献的个人和集体均已在文中以明确方式标明。本人完全意识到本声明的法律结果由本人承担。 本科毕业论文（设计）作者签名： 二一七 年 五 月 十 日 毕业论文（设计）任务书课题名称基于HTML5的智力游戏设计姓 名彭佳杰学 号201206002116院 系电子与信息工程学院专 业电子信息工程指导教师李玲香 讲师2015年10月20日1、关键词：2048； HTML5； 智力游戏；Webstrom；Angular2； 2、毕业论文（设计）内容要求：该课题需要设计和实现一个在网页上运行的智力游戏，需要使JavaScript语言和Webstorm或其他前端开发工具，要求所设计的游戏画面良好，运行流畅。(1)游戏介绍： 游戏为益智类游戏，越到后面越难越有挑战； 游戏玩法：使用键盘上、下、左、右键控制所有方块往这个方向移动。 游戏规则：当所有方块往一个方向移动时，数字相同的方块可以相加变成一个方块，当拼出一个方块为2048，即为胜利；当16宫被占满且所有相邻方块不能再相加时，游戏结束； 游戏界面：游戏界面有新游戏，记录当前分数，游戏介绍，记录历史最高分； 按照游戏的系统实现方法，做出系统分析、系统设计、系统实施。（2）主要工作量和工作流程如下： 进行系统的需求分析； 开始搭建开发平台和环境； 根据需求分析和设计图来进行代码的编写； 对功能模块进行测试； 对项目整体进行测试； 将项目打包上传至网站； 完成毕业论文撰写，论文格式严格按照湖南科技学院本科毕业设计（论文）规范撰写，字数不少于10000字； 准备答辩。3、文献查阅指引：1 胡崧. HTML 从入门到精通M.北京：中国青年出版社，2007.2 贾素玲,王强. Javasqript 程序设计M. 清华大学出版社.20073 费东东. 挑战Java script&Ajax应用开发J . 机械工业出版社.2008 4 单东飞, 张晓菲, 魏然. 锋利的JQueryM . 人民邮电出版社.20125 William Harrel. HTML, CSS, and JavaScript Mobile Development For DummiesJ . John Wiley .20116 Graffam, J. D. CSS for Print DesignersM .NEW RIDERS PUBL . 201118(3):2332544、毕业论文（设计）进度安排：第01周-第03周： 开题报告的撰写，翻译英文资料 第04周-第05周： 编程软件的熟悉 第06周-第10周： 各个模块设计 第11周-第16周： 调试第17周-第19周： 毕业论文撰写 第20周： 完成毕业论文院（系）意见： 负责人签名： 注：本任务书一式三份，由指导教师填写，经院（系）毕业论文领导小组审批后一份下达给学生，一份交指导教师，一份留院（系）里存档。湖南科技学院本科毕业论文（设计）开题报告书论文（设计）题目基于HTML5的智力游戏设计作 者 姓 名彭佳杰所 属 院（系）、专业、年级 电信学院 电子信息工程专业 2013年级指导教师姓名、职称李玲香讲师预计字数10000开题日期2016.11.5选题的根据：如今社会是当之无愧的网络生活，正是因为计算机的蓬勃发展让我们的生活更进一步。无处不见的科技，让我们生活无论是精神方面还是物质方面都能得到满足。而网络游戏更是丰富了我们的精神生活，随着电脑的出现，我们也拥有了更多乐趣，从一开始的扫雷，直到如今的各种大型网络游戏，电脑游戏也逐渐成为生活中不可缺少的娱乐方式。在电脑游戏中，单机游戏则是可以不用联网则能玩耍，如今基于HTML5开发的游戏也多为单机游戏。单机益智性游戏不需要太多精力的投入，轻松上手，在闯关中得到满足和锻炼，无形中放松了心情，释放了压力，锻炼了自己的思维能力。主要内容：本论文研究的是一个名叫“变色方块”的益智类游戏，游戏基本要求是运行无bug，游戏界面流畅不卡顿，锻炼玩家思维能力，释放压力。按照游戏的系统实现方法，做出系统分析、系统设计、系统实施。开发中需要的核心技术：（1）JavaScript是在游戏开发中最核心的，JavaScript一种直译式脚本语言，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。（2）jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)。jQuery的语法设计可以使开发更加便捷，例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能，其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。（3）css是游戏开发中必不可少的一部分，CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。通过css能使游戏界面更美观，完成初步交互。（4）保存游戏进度，本游戏可以保存玩家的游戏进度。游戏闯过多关，网页会有记录，不管是因为自己退出还是其他原因退出，再进入游戏，都会回到退出时所在关卡。研究方法：（1）模拟法：在研究游戏实现状况的时候，要不断根据游戏完成的状态机来调试，然后通过实际的指令来验证该流程的正确性。（2）实验法：在研究游戏更新模块的时候，需要通过不断的添加、删除调入的数据来测试游戏的更新情况是否出现延迟和卡顿情况等。 完成期限和采取的主要措施：完成期限：2015年10月2016年5月1. 第01周-第03周：将需求分析弄清楚，然后写出功能模块。2. 第04周-第05周：将设计步骤写出来。3. 第06周-第10周：完成程序设计功能模块。4. 第11周-第16周：完成程序代码，实现各个功能模块。5. 第17周-第19周：完成论文整体，根据老师建议修改出合格的论文。6. 第20周： 完成毕业论文。主要参考资料：1 胡崧. HTML 从入门到精通M.北京：中国青年出版社，2007.2 贾素玲,王强. Javasqript 程序设计M. 清华大学出版社.20073 费东东. 挑战Java script&Ajax应用开发J . 机械工业出版社.2008 4 单东飞, 张晓菲, 魏然. 锋利的JQueryM . 人民邮电出版社.20125 William Harrel. HTML, CSS, and JavaScript Mobile Development For DummiesJ . John Wiley .20116 Graffam, J. D. CSS for Print DesignersM .NEW RIDERS PUBL . 201118(3):233254指导教师意见：指导教师签名： 院（系）意见：签 名： 年 月 日注：此表由学生本人填写，一式三份，一份留院（系）里存档，指导老师和本人各保存一份。湖南科技学院毕业论文（设计）中期检查表 毕业论文（设计）题 目基于HTML5的智力游戏设计学生姓名彭佳杰学 号201206002116院（系） 电子与信息工程学院专 业电子信息工程指导教师李玲香 讲师检查日期2017.3.30指导教师检查情况记载及修改意见： 签名： 注：此表用于指导教师在学生毕业论文（设计）初稿完成后对学生执行任务书情况进行中期检查时用，由指导教师填写。湖南科技学院毕业论文（设计）答辩申请暨资格审查表学生姓名彭佳杰学 号201206002116院（系）电子与信息工程学院专 业电子信息工程班 级电信1301指导教师李玲香毕业论文（设计）题目：基于HTML5的智力游戏设计内容综述（对毕业设计或论文的研究步骤和方法、主要内容及创新之处进行综述，提出答辩申请）：研究步骤：本人通过查阅游戏开发相关资料，并学习国内外比较流行的游戏，对这些游戏的架构和操作流程进行分析和研究，再结合自己所学技术，确定游戏架构，最终进行游戏开发并撰写论文。研究方法：文献研究法：通过查阅相关文献，从理论上和游戏结构上研究设计的方法。游戏性分析法：通过玩某些类似的游戏，如腾讯光速工作室的飞机大战取其精华，研究出自己游戏的特色及亮点。实践研究法：通过对游戏的各个模块逐个实践，研究游戏的可玩性与可靠性。经验总结法：通过游戏的各个模块开发经验，撰写毕业论文。主要内容：论文首先对国内外游戏行情做了叙说，对选题意义进行阐述，其次简绍了游戏基本概念和游戏框架，然后对于游戏功能的实现进行了详细的描述，最后对于此次课题进行总结，并对游戏进行展望。经过4个月的努力完成了飞机大战游戏项目，论文多次提交给导师审查并修改，现已得到导师的同意，可以定稿了，故向院答辩委员会提交答辩申请，恳请给予批准。资 格 审 查 项 目是否01工作量是否达到所规定要求02文档资料是否齐全（任务书、开题报告、答辩申请、定稿论文及其相关附件资料等）03文档是否符合规范化要求04是否按时向指导教师提交全部正式材料05是否剽窃他人成果或者直接照抄他人设计（论文）06是否为已公开发表的个人论著备选是否多人设计一个系统或者合作一个课题（多人设计一个系统或者合作一个课题）内容是否雷同院（系）毕业论文（设计）工作领导小组意见：符合答辩资格，同意答辩 不符合答辩资格，不同意答辩（公章） 年 月 日注：此表为学生毕业论文（设计）定稿后申请答辩，及院（系）领导小组对申请答辩学生进行资格审查时用；资格审查项目由指导教师填写。湖南科技学院本科毕业论文（设计）评审表论文题目基于HTML5的智力游戏开发作者姓名彭佳杰所属院（系）、专业、年级电子信息工程院（系） 电子信息工程 专业 1301 年级指导教师姓名、职称李玲香 讲师字 数10000定稿日期2017.05.10中文摘要关键词（3-5个）英文摘要关键词（3-5个）指导教师评定成绩评审基元评审要素评审内涵满分指导教师实评分选题质量25%目的明确符合要求选题符合专业培养目标，体现学科、专业特点和教学计划的基本要求，达到毕业论文（设计）综合训练的目的。10理论意义或实际价值符合本学科的理论发展，有一定的学术意义；对经济建设和社会发展的应用性研究中的某个理论或方法问题进行研究，具有一定的实际价值。10选题恰当题目规模适当，难易度适中；有一定的科学性。5能力水平40%查阅文献资料能力能独立查阅相关文献资料，归纳总结本论文所涉及的有关研究状况及成果。10综合运用知识能力能运用所学专业知识阐述问题；能对查阅的资料进行整理和运用；能对其科学论点进行论证。10研究方案的设计能力整体思路清晰；研究方案合理可行。5研究方法和手段的运用能力能运用本学科常规研究方法及相关研究手段（如计算机、实验仪器设备等）进行实验、实践并加工处理、总结信息。10外文应用能力能阅读、翻译一定量的本专业外文资料、外文摘要和外文参考书目（特殊专业除外）体现一定的外语水平。5论文质量35%文题相符较好地完成论文选题的目的要求。5写作水平论点鲜明；论据充分；条理清晰；语言流畅。15写作规范符合学术论文的基本要求。用语、格式、图表、数据、量和单位、各种资料引用规范化、符合标准。10论文篇幅10000字左右。5实评总分 成绩等级 指导教师评审意见： 指导教师签名： 说明：评定成绩分为优秀、良好、中等、及格、不及格五个等级，实评总分90100分记为优秀，8089分记为良好，7079分记为中等，6069分记为及格，60分以下记为不及格。评阅教师评定成绩评审基元评审要素评审内涵满分评阅教师实评分选题质量25%目的明确符合要求选题符合专业培养目标，体现学科、专业特点和教学计划的基本要求，达到毕业论文（设计）综合训练的目的。10理论意义或实际价值符合本学科的理论发展，有一定的学术意义；对经济建设和社会发展的应用性研究中的某个理论或方法问题进行研究，具有一定的实际价值。10选题恰当题目规模适当，难易度适中；有一定的科学性。5能力水平40%查阅文献资料能力能独立查阅相关文献资料，归纳总结本论文所涉及的有关研究状况及成果。10综合运用知识能力能运用所学专业知识阐述问题；能对查阅的资料进行整理和运用；能对其科学论点进行论证。10研究方案的设计能力整体思路清晰；研究方案合理可行。5研究方法和手段的运用能力能运用本学科常规研究方法及相关研究手段（如计算机、实验仪器设备等）进行实验、实践并加工处理、总结信息。10外文应用能力能阅读、翻译一定量的本专业外文资料、外文摘要和外文参考书目（特殊专业除外）体现一定的外语水平。5论文质量35%文题相符较好地完成论文选题的目的要求。5写作水平论点鲜明；论据充分；条理清晰；语言流畅。15写作规范符合学术论文的基本要求。用语、格式、图表、数据、量和单位、各种资料引用规范化、符合标准。10论文篇幅10000字左右。5实评总分 成绩等级 评阅教师评审意见： 评阅教师签名： 说明：评定成绩分为优秀、良好、中等、及格、不及格五个等级，实评总分90100分记为优秀，8089分记为良好，7079分记为中等，6069分记为及格，60分以下记为不及格。本科学生毕业论文（设计） 题目（中文）：基于HTML5的智力游戏设计 （英文）：Design of Intelligen Game Based on HTML5 姓 名 彭佳杰 学 号 201206002116 院 （系） 电子与信息工程学院 专业、年级 电子信息工程 指导教师 李玲香 讲师 2017年 5月 10日目 录绪论1(1) 国内游戏市场现状1(2) 本文主要研究内容1(3) 论文章节安排11 游戏引擎和相关技术简介31.1 Sgge游戏引擎技术介绍31.1.1 Sgge游戏引擎架构31.1.2 Sgge游戏引擎系统库介绍31.2 Windows编程技术41.3 本章小结52 飞机大战框架游戏功能分析62.1 游戏架构62.2游戏功能分析62.2.1玩家操作规则功能分析72.2.2 子弹功能分析72.2.3 Npc功能分析72.2.4 道具功能分析72.3 本章小结83 游戏的实现以及关键技术93.1 游戏创建及游戏主思路流程93.2 功能类的介绍以及实现103.2.1 玩家飞机功能(Player)实现103.2.2游戏地图功能（Map）实现113.2.3 玩家子弹类（Player Bullte）的实现133.3游戏主要技术难点及解析153.3.1 游戏的碰撞检测算法153.3.2子弹的增加：163.3.3 计分问题183.4本章小结194 功能测试及展示204.1项目运行简介204.2游戏功能测试204.3游戏功能展示图205 总结225.1小结225.2 下一步工作22参考文献24致谢25 基于windows平台的飞机大战游戏的设计与开发摘 要飞机游戏曾在电视机游戏和掌上游戏机上风靡一时，是90后不可磨灭的童年记忆，随着近年来腾讯公司全明飞机大战游戏的运营，将飞机游戏又推上了一个新的高度。本文利用Sgge图形渲染引擎，结合c+语言，阐述了如何开发一个完整的飞行游戏，并完成了游戏的编写，并对文中涉及的一些编程思想和常用的设计模式以及游戏中的关键技术和算法做了全面解析。本游戏完成了物体碰撞、滚动背景、飞机控制等多种功能，具有Npc、道具、子弹等多种系统，其游戏有精美操作界面、有舒适的背景音乐和游戏声效等特点，这些都可以让玩家产生身临其境的感觉，让玩家享受游戏带来的乐趣。【关键词】Sgge图形引擎 碰撞算法 2D游戏 c+Design and Development of Aircraft WarGame Based on Windows PlatformAbstractPlane was on the TV game and PSP game are all the rage, is indelible childhood memories after 90, as the tencent company in recent years all bright aircraft wars game operation, the plane game again to a new level.This paper, by using Sgge graphics rendering engine, combined with the c + + language, expounds how to develop a complete flight game, and completed the writing of the game, and also involved some programming ideas and common design patterns and the games key techniques and algorithms did a comprehensive analysis.This game finished objects collide, scrolling background, aircraft control and other functions, with NPCS, props, bullets and other system, its games have elegant interface, a comfortable game background music and sound effects, etc, these can let the players create immersive feeling, for players to enjoy the game. Key wordsSgge graphics engine Collision algorithm 2D game c+.III1 绪论过去，人们的娱乐方式主要是电视、电影和音乐，而今天，随着计算机多媒体的飞速发展，计算机硬件性能的不断提升，以游戏为代表的电子娱乐正成为主流娱乐方式。游戏是以互联网技术为依托，可以多人同时参与的游戏项目，游戏产业集合高科技、文化、艺术和网络为一体，被称为21世纪的朝阳产业。根据中国互联网络信息中心（CNNIC）显示，2014年中国网民6.49亿，互联网普及率达47.9%，人均周上网时长达26.1小时，而网络游戏占网民使用率的56.4%，2001年中国游戏产业正式进入了高速成长期，其游戏市场规模达3.1亿人民币，2002年，规模扩大到9.1亿元，2003年因受到非典等因素影响，市场规模增速低于预期，为13.2亿元，2006年中国游戏收入达59.6亿元，2011年上半年已达209.7亿元，时至今天2015年上半年已增长至496.2亿元。以上数据不难看出中国游戏产业已经对当今社会经济发展和人们文化休闲生活产生了越来越大的影响，已成为我国文化创意产业不可缺少的重要组成部分。未来中国不但是一个游戏大国，也注定是一个游戏强国。1.1 开发背景随着计算机多媒体技术和互联网的快速发展，游戏和计算机的结合日趋紧密，游戏逐渐成为人们生活中不可缺少的一部分。目前，计算机游戏的发展更是如火如荼，种类繁多，如角色扮演游戏、射击游戏、模拟游戏、格斗游戏、冒险游戏、赛车游戏、益智游戏等。益智类游戏与一般网络游戏的最大不同就在于，益智类游戏蕴含了知识和智慧在里面。相对于其他动作游戏，益智游戏节奏比较缓慢，比较休闲，适合于各个年龄段的游戏玩家。玩家在娱乐的同时不仅可以愉悦身心、释放压力，还可以开发智力、激发学习兴趣、增强自身的逻辑分析能力和提高思维敏捷度。优秀的益智游戏娱乐性也十分强大，既好玩又耐玩。益智游戏的基本特征主要有以下几个方面。目的性: 益智游戏的目的也是游戏者最终想要得到的结果。游戏的目的有多种表现形式，如：得高分、揭示谜底、发现宝藏、解决难题、释放压力等等。游戏目的不同于教学目的或学习目的，益智游戏的目的是将游戏目的与学习目的联系起来，游戏设计者应该充分考虑到益智游戏的教育价值以及休闲娱乐价值。益智游戏不应只是游戏与知识的单一结合，而应着眼于提高益智游戏的学习目标，既保留游戏“可玩性的”特点，实现“乐学”，又使游戏承载着学习策略，使游戏任务执行过程伴随着知识探究过程。竞争性: 游戏通常有某种形式的竞争，这是游戏的最显著特征。可以是与对手对抗、与计算机对抗、与自己先前的成绩对抗、与机会或时间对抗等等。竞争可以发生在个体之间，也可以是团队之间。游戏的竞赛与对抗是社会竞争的简化和再现，与人对社会的适应性发展是一致的，这是青少年学生喜爱游戏的原因之一，也是游戏能用在职业培训中的原因之一。竞争和胜负是游戏的最本质特点，这种竞争不仅可以激发学习者的内部需要，而且还能促使学习者产生新的学习动机。此外，从小培养竞争意识对学习者将来适应社会也有很大的好处。挑战性: 挑战性是游戏具有吸引力的特征之一，挑战是游戏者如何做才能成功达到目标，也就是通常所说的游戏中的“闯关”。游戏者从容易的游戏级别开始，逐渐掌握闯关技巧，最终解决最高难度的问题。想象性: 游戏通常依靠想象来激发动机，想象的程度可以是接近真实情景的，也可以远离真实，或者完全是想象出来的情景。游戏中的想象可以分为两种：对现实的想象或想象在一个期望的或可能的情景中。例如“植物大战僵尸”游戏，将自己比作植物，来打败僵尸。在教学中，幻想会分散学习者对教学目标的注意，学习者越是沉浸在想象中，联想越丰富，注意与教学目标的偏离越远，解决这个问题依赖于想象与教学目标的紧密结合。在益智游戏中，想象可以使游戏玩家全身心的投入，锻炼玩家的逻辑思维能力。娱乐性: 娱乐性就是以直接获得快感（包括生理和心理的愉悦）为主要目的，玩家可以在友好的游戏氛围中，身心获得快乐和满足，这是游戏吸引大家的最基本的特征。Gabriele Cirulli利用周末的时间写2048这个游戏的程序，起初仅仅只是好玩而已，但没想到上传到网络以后使其意外走红。但是，该游戏是为手机端开发的。鉴于有些玩家跟喜欢在PC端玩游戏，这次，我便想把2048这个风靡全球的小游戏在PC端通过浏览器在本地实现。1.2 开发内容本游戏在PC端的实现主要是依靠浏览器实现。开发平台主要采用visual studio 2013和谷歌chrome浏览器。语言主要采用了还HTML5和javascript相结合的方式，目的是为了达到更好的游戏效果。HTML5和CSS相结合构建游戏界面，借用javascript和jquery库来对游戏进行编码。1.3 论文章节安排全文共分为六章，各章主要内容如下：第1章：介绍游戏的一些基本概念，Windows平台的搭建流程和游戏引擎的基本功能。第2章：主要对课题中所涉及游戏的游戏设计和需求进行介绍，对设计做主要说明。第3章：该章对于课题所涉及游戏的实现，以及制作游戏所用的关键技术进行介绍，描述了游戏关键部分的编写思路，以及游戏中所采用的算法，对于技术难点做了重点解析。第4章：讲游戏各功能的测试结果展示。第5章：对于本课题进行总结，对于游戏后期改进做出展望。2游戏开发的相关技术开发工具选择了Git、Webstrom来进行来发。用HTML5和javascript作为主要语言，使用nodejs和webpack来搭建项目，项目框架使用Angular2和typescript，其中还用到了SCSS来实现布局2.1 开发工具介绍2.1.1 Webstrom介绍WebStorm 是jetbrains公司旗下一款开发工具，目前已经被广大中国JS开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScript IDE”等。除了一些其他开发工具所具有的基本功能之外，他还有很多特性，比如集成了多种版本控制，查看本地的修改历史，支持Node.js调试，支持coffeescript和typescript的即时编译、代码提示、代码跳转、代码调试等。因为本项目中使用到了typescript、Node.js和版本控制Git,在综合本人的习惯，于是选择了WebStrom作为本项目的开发工具。2.1.2 Git介绍Git是一款免费、开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目。Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。Torvalds 开始着手开发 Git 是为了作为一种过渡方案来替代 BitKeeper，后者之前一直是 Linux 内核开发人员在全球使用的主要源代码工具。开放源码社区中的有些人觉得BitKeeper 的许可证并不适合开放源码社区的工作，因此 Torvalds 决定着手研究许可证更为灵活的版本控制系统。尽管最初 Git 的开发是为了辅助 Linux 内核开发的过程，但是我们已经发现在很多其他自由软件项目中也使用了 Git。例如 很多 Freedesktop 的项目迁移到了 Git 上。Git的功能特性：从一般开发者的角度来看，git有以下功能：1、从服务器上克隆完整的Git仓库（包括代码和版本信息）到单机上。2、在自己的机器上根据不同的开发目的，创建分支，修改代码。3、在单机上自己创建的分支上提交代码。4、在单机上合并分支。5、把服务器上最新版的代码fetch下来，然后跟自己的主分支合并。6、生成补丁（patch），把补丁发送给主开发者。7、看主开发者的反馈，如果主开发者发现两个一般开发者之间有冲突（他们之间可以合作解决的冲突），就会要求他们先解决冲突，然后再由其中一个人提交。如果主开发者可以自己解决，或者没有冲突，就通过。8、一般开发者之间解决冲突的方法，开发者之间可以使用pull 命令解决冲突，解决完冲突之后再向主开发者提交补丁。优点：适合分布式开发，强调个体。公共服务器压力和数据量都不会太大。速度快、灵活。任意两个开发者之间可以很容易的解决冲突。离线工作。缺点：资料少（起码中文资料很少）。学习周期相对而言比较长。不符合常规思维。代码保密性差，一旦开发者把整个库克隆下来就可以完全公开所有代码和版本信息。2.2开发运用技术介绍2.2.1 HTML5介绍HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。目标是取代1999年所制定的HTML 4.01和XHTML 1.0标准，以期能在互联网应用迅速发展的时候，使网络标准达到符合当代的网络需求。广义论及HTML5时，实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少网页浏览器对于需要插件的丰富性网络应用服务（Plug-in-Based Rich Internet Application，RIA），例如：Adobe Flash、Microsoft Silverlight与Oracle JavaFX的需求，并且提供更多能有效加强网络应用的标准集。具体来说，HTML5添加了许多新的语法特征，其中包括、和元素，同时集成了SVG内容。这些元素是为了更容易的在网页中添加和处理多媒体和图片内容而添加的。其它新的元素如、和则是为了丰富文档的数据内容。新的属性的添加也是为了同样的目的。同时也有一些属性和元素被移除掉了。一些元素，像、和被修改，重新定义或标准化了。同时APIs和DOM已经成为HTML5中的基础部分了。HTML5还定义了处理非法文档的具体细节，使得所有浏览器和客户端程序能够一致地处理语法错误。2.2.2 Angular2介绍Angular2 主要是用来做客户端应用的框架，只需要HTML和能编译成Javascript的语言,比如Dart，比如Typescript,官方推荐的是和Typescript配合着用。Angular2实现当前Web平台最大可能的速度，并更近一步提升，通过Web Worker和服务端渲染技术。Angular2让你在扩展性上可以控制。比如说，通过RxJS、Immutable.js或者其他推模式建立数据模型来满足大数据需求。通过简单的声明模板快速构建特性。通过你自己的组件和利用大量现有组件，扩展模板语言。Angular主要有8个东西构成，包括：模块 (module)、组件 (component)、模板 (template)、元数据 (metadata)、数据绑定 (data binding)、指令 (directive)、服务 (service)、依赖注入 (dependency injection)。模板基本定义了你的应用长啥样，长得好不好看得有人看着，组件就负责管理这些模板。长得好看没用那不就成了花瓶了么，所以还需要服务来给应用添加一些逻辑，这些东西东一块西一块的乱七八糟还真不行，我们还需要模块来打包所有的组件、服务等等。所以说，模块就是用来打包的。一个应用程序有很多模块打的包，一层一层的，最开始那个就叫做根模块。我们通过引诱（其实是引导吧）根模块来启动程序。这是官网的一张照片来描述八大件是怎么互相配合的2.2.3 Typescript介绍TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。TypeScript扩展了JavaScript的语法，所以任何现有的JavaScript程序可以不加改变的在TypeScript下工作。TypeScript是为大型应用之开发而设计，而编译时它产生 JavaScript 以确保兼容性。语法上，TypeScript 很类似于 JScript .NET，另外一个添加了对静态类型，经典的面向对象语言特性如类，继承，接口和命名空间等的支持的 Microsoft 对 ECMA-262 语言标准的实现。TypeScript 是开源的，其源代码可以在 Apache 2 License 下从 CodePlex 获得。这个项目由 Microsoft 维持，但是任何人可以通过经 CodePlex 项目页发送反馈，建议和 bugfixes 而做出贡献。2.2.4 Webpack 介绍webpack是一个模块打包器。webpack把模块(s)连同它的依赖一起打包生成包含这些模块的静态资源。webpack依赖树中有两个依赖类型：同步和异步。异步模块切分成一个新的的块。在块树（chunk tree）优化之后，文件会为每个chunk发文件。webpack可以处理javascript本身，但loader用来将其它资源转换为javascript。这样以来，所有资源都被格式化成模块了。webpack有一个智能解析器，它能处理几乎所有的第三方库。它甚至允许你在依赖中你像这样加表达式 require(./templates/ + name + .jade) 。它可以处理最常见的模块化标准风格：CommonJS和AMD。3 游戏框架的搭建在正式开始编写项目之前，需要将项目中用的提前下载好，搭建适合编码的环境，这样才有利于项目的管理和以后的维护。3.1 Node.js的安装Node.js是一个基于Chrome JavaScript运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动， 非阻塞I/O 模型而得以轻量和高效，非常适合在分布式设备上运行数据密集型的实时应用。在Node.js官网上下载并安装，Node.js有许多不同版本，本项目使用的是版本是6.10.2，查看Node.js版本可通过命令行输入node -v,若出现版本号即代表安装成功也知道了安装的版本。3.2 package.json 的配置安装完Node.js就不得不说npm，npm就是nodejs的包管理和分发工具，package.json是他的一个重要文件，package能做什么事情呢：1、 相当于你本地项目的一个文档说明。2、允许你指定你项目中所使用的node包的版本。3、构建你的项目更加容易，便于给其他人共享。一个典型的package.json文件如下所示 name: my_package, /项目名称，全部小写，不能有空格，一个单词，允许-和_. version: 1.0.0, /项目版本号，最好遵守 GNU 版本号管理。 main: index.js, /目录中启动文件名称。或者称之为入口文件，一般都是 index.js scripts: test: echo Error: no test specified & exit 1 /一般默认一个test的空文件夹、用作写测试代码。 , keywords: , /项目的关键词。 一般用不到，发布npm才用得到。 author: ag_dubs, /作者名称 license: ISC, /协议 repository: / 用来存放到 版本管理远程服务。 发布npm才有用 type: git, url: https:/github.com/ashleygwilliams/my_package.git , dependencies: / 正式使用时，依赖的包 my_dep: 1.0.0 , devDependencies : /开发或者测试时，依赖的包。 my_test_framework: 3.1.0 bugs: /同repository url: https:/github.com/ashleygwilliams/my_package/issues , homepage: https:/github.com/ashleygwilliams/my_package /项目主页、 发布才有用3.3 Webpack配置前面已经介绍了Webpack，Webpack十分强大，下面是项目的Webpack的详细配置const helpers = require(./helpers);const webpackMerge = require(webpack-merge); / 用于合并WebPACK配置const webpackMergeDll = webpackMerge.strategy(plugins: replace);const commonConfig = require(./webpack.common.js); / 开发的设置/* * WebPACK插件 */const AddAssetHtmlPlugin = require(add-asset-html-webpack-plugin);const DefinePlugin = require(webpack/lib/DefinePlugin);const NamedModulesPlugin = require(webpack/lib/NamedModulesPlugin);const LoaderOptionsPlugin = require(webpack/lib/LoaderOptionsPlugin);/* * WebPACK常数 */const ENV = process.env.ENV = process.env.NODE_ENV = development;const HOST = process.env.HOST | 0.0.0.0;/设置项目运行ip地址const PORT = process.env.PORT | 3000;/设置端口号const HMR = helpers.hasProcessFlag(hot);const METADATA = webpackMerge(commonConfig(env: ENV).metadata, host: HOST, port: PORT, ENV: ENV, HMR: HMR);const DllBundlesPlugin = require(webpack-dll-bundles-plugin).DllBundlesPlugin;/* * webpack配置 * */module.exports = function (options) return webpackMerge(commonConfig(env: ENV), /* * 开发工具，以加强调试 */ devtool: cheap-module-source-map, /* * 影响编译输出的选项。 */ output: /* * 输出目录为绝对路径（必填）。 */ path: helpers.root(dist), /* * 指定磁盘上每个输出文件的名称。 */ filename: name.bundle.js, /* * The filename of the SourceMaps for the JavaScript files. * */ sourceMapFilename: file.map, /* 非登录块的文件名作为相对路径 * */ chunkFilename: id.chunk.js, library: ac_name, libraryTarget: var, , module: rules: /* * CSS加载支持CSS文件（样式目录） * */ test: /.css$/, use: style-loader, css-loader, include: helpers.root(src, styles) , /* * scss加载 * */ test: /.scss$/, use: style-loader, css-loader, sass-loader, include: helpers.root(src, styles) , , plugins: /* *用于开发具有调试日志或添加全局常量的 * * Environment helpers */ new DefinePlugin( ENV: JSON.stringify(METADATA.ENV), HMR: METADATA.HMR, process.env: ENV: JSON.stringify(METADATA.ENV), NODE_ENV: JSON.stringify(METADATA.ENV), HMR: METADATA.HMR, ), new DllBundlesPlugin( bundles: polyfills: core-js, na