实训报告_2完整版.doc

PAGE PAGE 2 － － 成都东软学院 小学期实训报告 实训题目： HTML5拼图游戏 指导教师： 毛丽娟 系 别： 计算机科学与技术系 年级专业： 10软件技术 班 级： 2 学 号： 1031721020X 学生姓名： 王 实 训 期： 2012.6.25-2012.7.20 2012 年7月 日 PAGE 1 －－ 实习内容及知识应用 1.1实训内容以及进程安排 实训主要内容有： 了解HTML 5的新特性，通过HTML 编辑器，编辑HTML5。 掌握HTML5 Canvas 编程规范 通过《熊与蘑菇》小游戏，进一步了解HTML5 掌握HTML5结合jquery的应用。 通过学习的HTNL5知识，编写《拼图》小游戏。 进程安排： 阶段 任务明细 起止时间 了解HTML5 HTML5介绍 6.25 HTML5编辑器 DreamWeaver 6.25 HTML5 W3school学习网站 6.25 HTML5 Canvas 了解 HTML5 Canvas 6.26 利用Canvas 绘矩形 6.26 绘制扇形与圆 6.27 绘制多变形与时钟，并实现阴影绘制 6.28-6.29 模拟太阳系行星旋转 6.29 《熊与蘑菇》 分析《熊与蘑菇》 7.2 利用HTML5 Canvas+JQuery游戏界面绘制与游戏功能实现 7.2-7,6 完善游戏，增加游戏趣味性 7.9-7.10 《拼图》 分析游戏，查阅相关资料 7.10-7.11 利用所学知识实现《拼图》游戏并完善。 7.11-7.16 项目验收 项目调试 7.16-7.18 整理项目文档,项目答辩 7.18-7.20 1.2知识（点）应用以及经验总结 通过这次小学期实训，让我提升了许多，同时学到了许多新知识。 HTML5拥有的一些效果已经超越早前标准的效果，其中之一就是动画制作。WEB应用开发更容易，尤其是移动应用。 HTML5应该独立于设备，减少对外部插件的需求（比如Flash）,新特性应该基于HTML、CSS、DOM以及JavaScript。 HTML5 canvas标签定义图形，但知识图形容器，必须使用脚本来绘制图形 Jquery与HTML5结合，可以实现游戏功能与游戏界面绘制。源码看起来更清晰。 实习心得 HTML5是用于取代1999年所制定的 HTML 4.01 和 XHTML 1.0 标准的 HTML 标准版本，现在仍处于发展阶段，但大部分浏览器已经支持某些 HTML5 技术。 HTML 5(text/html)浏览器将在错误语法的处理上更加灵活。HTML 5在设计时保证旧的浏览器能够安全的忽略掉新的HTML 5代码。与HTML 4.01相比，HTML 5给出了解析的详细规则，力图让不同的浏览器即使在发生语法错误时也能返回相同的结果。 HTML5 的 Canvas 对象将改变 JavaScript 的使命，使之成为 HTML5 下强大的动画脚本编写工具。 HTML5使开发时程更快速,HTML5添加了许多新的语法特征，其中包括、和元素，同时整合了SVG内容。这些元素能够让开发人员更容易的在网页中添加和处理多媒体和图片内容，简化了开发人员编写的长度及复杂度，缩短开发的时程。 HTML5创造出惊艳的Web体验HTML5技术让开发及设计能够更有效率、更丰富，更能轻松地打造出令人惊艳的网站。现在网络上已经有许多相关资源可供你查询，像是caniuse、wix及html5rocks，都是很棒的资源。 HTML5 的canvas元素使用Javascript在网页上绘制图形，画布是一个矩形区域，可以控制其每一像素，canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 对于不支持HTML5 canvas的浏览器，会显示canvas标签中的备选文字。但是在canvas中绘制的图片不能设置备选文字（text alternatives）。 界面截图 图1 进入游戏界面，拖动滑条，选择游戏难度，点击图片。可以更换拼图游戏的图片 图2 用鼠标点击，可以使图片移动到空白位置，将图片还原到与原图一致，则游戏结束。 指导教师 评阅意见 成 绩 指导教师签字 评 阅 日 期