摘要：基于HTML5技术开发的网页游戏，快捷轻便，无需下载客户端，一些精致的Web游戏画面和游戏性也不比客户端游戏差，所以越来越多的开发者选择以网页的形式来制作应用软件与游戏。本课题通过设计一款“飞行的小鸟”的网页单机游戏，介绍了如何利用HTML5技术来开发Web游戏。该设计使用HTML5中的Canvas技术，实现了一个休闲类的人机对战游戏。此游戏通过智能算法实现电脑游戏场景中障碍物的自动移动、和随机生成长短不同障碍物等功能，实现人机对战。

关键词：HTML5；Web游戏；Canvas；JavaScript

WEB Game Design And Development

Abstract：H5 technology based on the development of Web games, fast and light, no need to download the client, open the page can play, save space, go with the play, and some exquisite Web game screen and gameplay does not lose the client game; The more developers choose to create applications and games in the form of Web pages. This is one of the important reasons for the rise of HTML5 technology. In this paper, through the design of a "flying bird" Web page stand-alone game, introduced how to use HTML5 technology to develop Web games. The design uses HTML5 in the Canvas technology, to achieve a casual break through the class of man-machine game. This game through the intelligent algorithm to achieve the computer game scenes in the automatic movement of obstacles, and the random generation of different obstacles and other functions, to achieve man-machine battle.Focusing on the "flying bird" design ideas and part of the function of the process and the realization of specific code.

Key Words：HTML5；Web game；Canvas；JavaScript

目录

摘要 3

引言 3

1.研究背景与意义 4

2.开发技术介绍 6

2.1HTML 6

2.2JavaScript 6

2.3CSS3 7

3.系统分析与设计 7

3.1系统需求分析 7

3.2可行性分析 7

3.3游戏设计 8

4.游戏功能实现 8

4.1图片加载 8

4.2绘制背景 9

4.3背景无缝滚动 9

4.4小鸟入场 9

4.5为小鸟添加单击事件 10

4.6随机生成管道 10

4.7大地的绘制 11

5.测试与结果 11

6.总结 12

参考文献 12

致谢 13

WEB网页游戏的设计与开发

引言

随着计算机的发展与社会的需要，互联网逐步成为网络购物、网络游戏等一展风采的平台。与传统媒介相比，HTML5具备动画演示的优点。目前智能手机与平板电脑等移动设备对此应用较多。近几年来不论是Web浏览器，还是智能手机在社会生活中的使用频率一直保持较高，移动设备在互联网发展的今天逐步成为一种大潮。面对多终端的复杂环境，HTML5开发的应用具有随时性、多设备、高标准化与跨平台的优点，从而使HTML5游戏不断趋于完善，逐步成为主流。很多的开发公司选择开发Web游戏应用去融入社会发展潮流之中[1]。正是由于移动技术的进步和智能终端的逐渐普遍化，以及人们具有利用零碎时间的习惯，使HTML5游戏在历经多年的发展和多方面趋于原生游戏的高水平之后，逐步被众多玩家们接受，从而这种利用全新技术平台的HTML5游戏得到市场高度认可，获得巨大发展空间。为了使用户在可视化、生活娱乐需求碎片化等方面得到满足，开发与设计这款以HTML5技术为核心和使用JavaScript脚本的Web游戏，实现了游戏操作简单化、游戏场景美观化和动画展现逼真化，使得玩家在满足体验与视觉享受的同时也达到放松心情的效果[2]。

1.研究背景与意义

随着网络、计算机的普及和人们生活质量的提高，电脑游戏逐渐成为人们生活中重要的组成部分。人们在忙碌的生活之余，可以通过电脑游戏给自己带来放松和快乐，使游戏可玩性得到大幅度提高。

在上世纪八九十年代，最早的单机游戏就被开发了。由于手机硬件配置性能的增强与网络技术的进步，促使移动游戏也随之得到发展。在最新的我国网络游戏市场规模的调查数据中可以看出，从2011年之后，PC端游戏所占有的市场份额呈逐年下降趋势。与此同时，移动端游戏所占市场份额保持逐年上升，从两者的下降速度和上升速度来看，在2016年移动端游戏很可能超过PC端游戏[3]。