《基于HTML5的超级玛丽设计与实现本科毕业设计(论文)》由会员分享，可在线阅读，更多相关《基于HTML5的超级玛丽设计与实现本科毕业设计(论文)（23页珍藏版）》请在金锄头文库上搜索。
1、本 科 毕 业 设 计（论文）题 目：基于 HTML5 的超级玛丽设计与实现 学生姓名：胡垚学 号：11073127专业班级：通信工程 1101指导教师：付文霞2015 年 6 月 20 日中国石油大学（华东）本科毕业设计(论文)基于 HTML5 的超级玛丽设计与实现摘 要随着互联网的不断发展和计算机的不断更新，HTML 也在发生着翻天覆地的变化。从最初的 1999 年 12 月发布的 HTML4.01 的 HTML 标准到 2008 年 1 月 22 日公布的HTML5 的第一份正式草案，不过短短的八年时间。而现如今，WEB 开发也从 HTML的制作超文本文档到 HTML5 可以在移动设备上
2、支持多媒体，新的语法特征被引进以支持这一点，如 video,audio,canvas 标记。HTML5 还引进了新功能，可以真正改变用户与文档的交互方式。而本文也正是在这个大背景下，学习和熟悉 HTML5 的编程原则，编写出基于HTML5 的超级玛丽游戏。该课题应用了 HTML5 中的 canvas，audio 等新技术，以及javascript 语言，将一款动态的、复杂的游戏成功在 Web 上运行。虽然到目前为止HTML5 并不完善，但这并不影响我们学习以及研究它。运行游戏时，屏幕正中央出现游戏界面，玩家在上下左右进行移动以及按键 A 加速，在吃到一朵花的时候可以按 A 发射炮弹。此游戏是在
3、小时候玩的超级玛丽上进行改编，同时采取其中部分功能的小游戏，趣味性很强。关键词：HTML5；超级玛丽；中国石油大学（华东）本科毕业设计(论文)The design and implementation of super marie based on HTML5AbstractAs the Internet continues to evolve constantly updated and computers, HTML is also undergoing tremendous changes. From the initial December 1999 release of HTML4.
4、01 HTML standard HTML5 to the first official draft of January 22, 2008 published in just eight years. And now, WEB development is also produced from HTML hypertext document to HTML5 can support multimedia on mobile devices, the new syntax features are introduced in order to support this, such as vid
5、eo, audio, canvas tag. HTML5 also introduces a new feature, you can actually change how users interact with documents.The paper also is in this backdrop, learn and become familiar with the principles of HTML5 programming, the preparation of the Super Mario game based on the HTML5. The subject of the
6、 application of the HTML5 canvas, audio and other new technologies, and javascript language, will a dynamic, complex game run successfully on the Web. Although so far HTML5 is not perfect, but this does not affect our learning and study it.When you run the game, the screen appears the center of the
7、game screen, players move up and down and left and right button A to accelerate, when to eat a flower fired shells can press A. This game is performed on a child playing Super Mario adaptation, while taking some of which feature a small game, very interesting.Keywords：HTML5；Super marie；中国石油大学（华东）本科毕
8、业设计(论文)目 录第 1 章 引言.1第 2 章 相关技术及开发环境简介.32.1 相关技术简介.32.1.1 HTML5 标准简述 .32.1.2 javascript 简介 .42.2 开发工具简介.4第 5 章 结论.15第 6 章 总结.16致 谢.18参考文献.19第 1 章 引言0第 1 章 引言作为正处于幼年期的新兴网络技术，HTML5 技术肩负着重要的责任和历史使命。这并不是夸大其词，HTML5 的出现极大的推动了互联网 1应用的发展。就以本文而言，超级玛丽这个游戏在 HTML5 的出现之前，都是以 FLASH 的形势出现在网络中，然而，HTML5 中的 Canvas 却改变
9、了这一传统方式。 Canvas 即定义图形的标签，通俗的说就是画布，程序员可以在画布上绘制任何自己想要的图形，如果同时结合 javascript 引擎则可以使静止的图像运动起来。许多业内人士预测，HTML5 将会最终取代许多媒体框架，如 Adobe 的 Flash，但是短时间内还无法实现，2010 年 4 月，苹果 CEO 乔布斯曾发表一篇“对 flash 的思考 2”文章，指出随着 HTML5 的发展，观看视频或者是其他内容时，Flash 已经不是必须的了。可以看出，HTML5 将是未来媒体播放的潮流。同时，HTML5 既有很多有优点，也有很多缺点。它是一种公开的网络技术，也就是程序员可以从
10、 W3C 上学习这个技术；它最重要的优点是可以跨平台使用，即它可以很轻松的移植到 app store 或 google play 或者其他平台，这是为什么人们这么重视 HTML5 的发展；但是它的缺点目前为止也很明显，就是不能很好的被浏览器所支持，除了个别几个浏览器，其它浏览器都不支持 HTML5，相信在以后，HTML5 越来越完善的同时，这个缺点将不再是个问题。在 HTML5 的发展上，国外的步伐明显快于国内。无论是 HTML5 规则的制定还是HTL5 的完善都是由外国人编写的，而国内则是刚刚接触这个技术。而且由于国内对这项技术的不重视，使得国内 HTML5 开发的实例远远少于外国程序员的开
11、发作品，网络上也很少有完整的代码供我们学习和参考，极大的增加了我们学习 HTML5 的难度。因此，我才决定将毕设题目定为基于 HTML5 的超级玛丽设计和实现，既扩宽了知识面，又为以后学习 HTML5 的程序员提供参考。游戏开发一直是程序员开发程序的热门，相信在我之后，会有越来越多的人加入到 HTML5 游戏的开发中来，以推动这项技术的发展和进步。在我做这个毕设之前，我构思了个框架，在传统的超级玛丽上加入我独特的创新。首先是界面，我认为传统的超级玛丽界面太过老套，不够吸引玩家的眼球，所以我将背景换成比较明亮的图片，并在网上找到一些制作的很好的素材，将地面草地，下水管道，金币等都换成自己的素材，
12、使得游戏界面看起来更清爽，美观；其次是人物，第 1 章 引言1我要使用的素材也和传统的超级玛丽不同，因为一直觉得传统的超级玛丽形象太小太模糊，所以我换了个人物模型，相信用户体验比传统的要好；然后是我的创新部分，我本来打算在游戏性上加入更多东西，如冰冻花，但是由于时间关系，这个功能并没有实现，这个我打算在以后有时间了再加入到游戏中去；当时在网上学习时，曾找到一些非常炫的 HTML5 效果，本来也打算加入到游戏中去，但是最后也没有实现，相信在以后随着我对 HTML5 理解的加深，我以后能实现这个功能并加入到我的设计中去。第 2 章 相关技术及开发环境2第 2 章 相关技术及开发环境简介2.1 相关技术简介2.1.1 HTML5 标准简述HTML5 是 HTML 的下一个主要修订版本，现如今还处于发展的过程中。它的出现是为了取代 W3C3在 1999 年制定的 HTML4.01 和 XHTML1.0 标准，以达到在迅速发展的互联网时代，HTML5 能符合当代网络需求的目的。当我们谈及 HTML5 时，大多是指包括 HTML,CSS
