工智能井字棋小游戏 HTML5 APP 的开发【100011677】

# 基于jQuery与Flask前后端框架，借助AJAX跨域通信 # 技术的人工智能井字棋小游戏 HTML5 APP 的开发  关键词： Flask HTML5 CSS Javascript Max-Min Search AI **摘要** 本次嵌入式作业，完成了井字棋HTML5 APP小游戏的开发，并实现了真机调试，真机安装。本APP前端借助HTML5+CSS+JavaScript，并采用了jQuery框架。 前端实现了及其细腻的动画，赏心悦目的用户界面，以及良好的异步操作性能。 游戏中与人对战的AI使用Min-Max搜索，由运行在阿里云服务器上的python程序实现。前后端通信采用了现代的AJAX CROD（ajax跨域）通信技术，利用HTTP协议将json格式的数据在前后端POST。利用Min-Max搜索的深度，可以调节难度。 实验中AI通信良好，一定难度下可以实现保证和棋或赢棋。 本实验利用HBuilderX, appUploader实现了IOS上APP真机联调与开发者协议下APP的安装。 本教程的脱水版即将发布CSDN与Github上的个人博客。 # 基本概念 > 格式原因书写，脱水可以不看 ## HTML5 APP ### HTML5历史 HTML(Hyper Text Markup Language ，超文本标记语言）是互联网发展的基石，目前几乎所有的网站都是基于HTML 进行开发的。HTML5 是HTML 的最新标准，经过近8年的艰辛努力，于2014 年10 月由W3C （万维网联盟） 发布为正式推荐标准。 十年前， Web 只是用来展示一个文档，而现在Web 则成为了应用程序的一个运行平台。互联网的不断发展对网站的功能提出了很多更高的要求，但由于HTML 没有及时地跟进这些需求，很多厂商或组织在HTML 上各自建立了自己的标准，如Flash 、Silv er Light 、Java Fx 等。因为商业上的原因，这些标准往往很难被广泛接受，于是造成了各种解决方案 互相竞争的局面。 当前，移动互联网时代Web 开发主要面临两种困境： (1）有些功能必须借助合适的插件才能实现，例如目前流行的页面上音频和视频的播放大多借助于Flash 插件。 (2) PC 端和移动端应用的多次开发，必须为微软、苹果、安卓等系统设计不同的方案，这意味着一个创业团队或公司必须 HTML5 标准的制定过程正值移动互联网崛起，标准组织成员中的Apple 、Google 、Opera 本身便有着对移动互联网的独立思考和见解，并最终影响HTML 5 的实际成果。设计之初， HTML5 便拥有桌面互联网、移动互联网兼容并蓄的想法，不仅统一了开发方式、网络内容，还做到了访问方式的体验统一化。 ### HTML5的新特性 相比原来的HTML，HTML5支持： - 用于绘画的 canvas 元素 - 用于媒介回放的 video 和 audio 元素 - 对本地离线存储的更好的支持 - 新的特殊内容元素，比如 article、footer、header、nav、section - 新的表单控件，比如 calendar、date、time、email、url、search 等等。这些原来需要用Js，CSS实现的功能，可以现在用HTML5直接实现。 ### HTML5与Flash #### Flash将退出历史舞台 2011 年11 月， Adobe 正式宣布停止为移动设备的浏览器开发F las h Pl ayer ，转而全面发展HTML5 技术，并表示“ HTML5 是各种移动平台浏览器中最佳的内容制作和发布解决方案”，正式宣告了Flash 退出移动端开发的舞台。 所以，目前大多数视频网站采用的是双重技术，如果在iOS 上欣赏网站视频，都会自动切换到HTML 5 播放模式上， PC 上则采用Flash 插件。 #### HTML5的优势 HTML5在很多功能上与Flash存在重叠，但又有显著优势： * Flash不开放，是一个完全封闭的系统， Adobe 公司拥有100 % 的技术专利， Adobe 想通过Flash Player 授权来收费，每台移动设备嵌入Flash Player ，预收1 美元。 而HTML5是开放的标准，网页开发者利用HTML5 就能做出高级的图像、字体、动画以及过渡效果，而不必依赖Flas h 插件。 * Flash 的安全性漏洞较多，黑客经常利用这些漏洞。2009 年，赛门铁克公司曾经指出，Flash 是最不安全的系统之一。 * Flash对触屏支持较差，不适用于当前的移动互联网时代。 ### 利用HTML5开发APP的优势 #### 成本比较 | | HTML5 App | 原生App | | -------- | --------------------------------------------------- | --------------------------------------- | | 开发成本 | 低， 只写一套代码就可以导出不同‘’ 开发成本平台的App | 高，不同的移动平台需要完全不同的代码 | | 测试成本 | bug少，一个工程代码行数有限， | bug多，不同的移动平各自需要各自测试有限 | | 招聘成本 | 招聘成本低，人门门槛低，人才基数大 | 人才少，需要招聘不同平台 | | 复用 | 可与PC及手机浏览器端代码复用 | 无法复用 | #### 难度比较 | | HTML5 App | 原生App | | -------- | ------------------------------------------------------------ | -------------------------------- | | 学习难度 | 低，脚本语言，动态执行 | 高，需要很多与业务无关的底层逻辑 | | 开源资源 | 多，开源库多，且所有HTML5网页都可以直接作为参考。不用重复造轮子 | 相对少 | #### 市场推广比较 | | HTML5 App | 原生App | | -------- | ------------------------------------ | ------------------------------------------------------------ | | 用户获取 | 多，超级App 如微信朋友周）、搜索引擎 | 少，主要是应用市场 | | 导流效率 | 高，广告变用户的转化率明显较高 | 用户从看到应用的广告到装好该应的门槛和时间都很长，导致折损率高 | 可见，HTML5 App 的开发效率更高，开发快，更新快，更能适应“快鱼吃慢鱼”的移动互联网市场变化；成本更低，从技术到管理，各项成本大大降低，便于创业，也降低了失败的机率和风险；对于产品的推广也更容易，导流入口多，效率高，流量大。对于用户而言， App 应用的获取，更快速方便， 更省流量； App 的使用更省电量，更省空间。 **然而**，并不是说HTML5 APP就万五一缺了。相比原生APP，在API的调用，底层硬件实现，还有效率上，HTML5 APP要打折扣。尤其是当设计复杂算法的时候，JS语言的劣势就毕现无疑。这就需要用到之后一节讲到的前后端结合。 ## 前端与后端 ### 前端 所谓前端，主要指的是Web 移动应用三剑客：HTML5 、css 和JavaScript。基于HTML5,CSS 和JavaScript 的移动应用程序将会是未来的趋势。HTML5 移动应用开发并不是单指HTML5 标准，而是指HTM5+CSS3+JavaScript 三项技术：HTML5 负责内容， CSS3 负责外观，JavaScript 负责行为。  ### 后端 网页的内容，需要从远程服务器下载；用户提交的信息，需要在服务器上处理；网页上需要执行的复杂运算，也可以在云服务器上实现。 这些在服务器上实现的功能可以称之为后端。 ### 后端框架 “框架”，可以粗浅的理解为�