摘 要

随着信息时代的来临，计算机已经成为了人们必不可少的工具，无论是娱乐还是办公，都对人们产生了不可取代的影响，进入二十一世纪后，微电子技术的发展更是推动了智能设备的发展，智能手机越来越多的承担起了曾经计算机所承担的任务，人们开始在智能手机上办公娱乐，尤其是手机游戏越来越多的被人们所接受，并热衷于此。于是掌握一门手机游戏开发技术成为了许多想要在互联网领域一展身手的年轻人的梦想。

在这样的背景下，许多游戏制作框架脱颖而出，都致力于横跨多平台进行游戏开发，

例如Cocos2d，Unity3d等游戏框架，而在这样的大环境下，HTML5游戏又横空出世，得利于Web的便捷性，以及可以运行在各种平台上的优势，HTML5游戏风靡于各大网站之中，成为了吸引粉丝的一大利器，我们经常可以在各种微信平台上看到别人分享的HTML5游戏，人们也喜欢在游戏后分享给好友进行一番炫耀，因此掌握这一技术可以方便的开发手机客户端游戏以及桌面端游戏。

本次毕业设计是通过JavaScript和HTML5新增的Canvas元素进行游戏画面的绘制，并通过JavaScript的事件监听来实现用户的交互体验，由于游戏的主画面是控制一个六方体进行旋转，因此将此游戏起名为六边革命。六边革命主要是通过苹果iOS自带的WebView进行渲染展示游戏画面，当然由于HTML5的通用性，游戏也可以在Andorid平台，Windows Phone平台甚至是桌面平台，也就是浏览器能运行的地方本游戏都可以运行，并且在游戏内部做了多屏幕的适配，当游戏的运行环境发生变化时会自动调整游戏大小以适应屏幕。

关键词：iOS；手机游戏；HTML5游戏；跨平台；混合开发

Game Design for Smart Phone

ABSTRACT

With the advent of the information age, the computer has become a indispensable tools, either entertainment or office, of people produced influence can not be replaced, after entering the 21st century, the development of microelectronics technology is to promote the development of intelligent devices, smart phones are getting more assume the task once the computer assumed, people began in smart phones, office, entertainment, especially mobile phone game is more and more be accepted by people, and keen. So have a mobile phone game development technology has become many young people want to participate in the field of Internet dream.

In this context, many of the game production framework to come to the fore, are committed to the development of the game across multiple platforms,Such as Cocos2d Unity3d game framework, and in such a large environment, HTML5 games and D-Will, enrichment in the convenience of the Web, and can run on a variety of platforms advantage, HTML5 game swept in each big Website, has become a great tool to attract fans, we often can be in a variety of micro channel on the platform to see someone to share the HTML5 games, people also like in the game after the share to a friend of a lot of show off, so to master this technology can facilitate the development of mobile phone game client and desktop game.

This graduation design is through JavaScript and HTML5 new Canvas element game screen rendering and JavaScript event listeners through to achieve the interactive user experience, because the game main screen is a hexagonal body rotation. Therefore, the this game named Hexagonal revolution. Hexagonal revolution is mainly comes through the apple IOS WebView for rendering display picture of the game, of course, because of the versatility of HTML5, games can also in Android platform, Windows Phone Platform even desktop platform, is also the browser can run the game can run, and in the game to do the multi screen adaptation, when changes in the running environment of the game will automatically adjust the size of the game to fit the screen.

Key words：iOS；Mobile Game；HTML5 Game；Cross Platform; Hybird

目 录

1 绪论………………………………………………………………………………………………………1

1.1 目的和意义……………………………………………………………………………………2

1.2 手游开发背景..........................................................................................................3

2游戏开发技术及相关环境……………………………………………………………………5

2.1 关于 HTML5..........................................................................................................3

2.1.1 HTML5发展史………………………………………………………………………………3

2.1.2 HTML5的优势…..………………………………………………………………………….4

2.1.3 HTML5的未来……………………………………………………………………………..5

2.2 HTML5游戏开发技术介绍..............................................................................5

2.2 iOS开发平台介绍.................................................................................6

2.3 开发环境..............................................................................................7

2.3.1 WebStrom.............................................................................................7

2.3.2 Firefox Developer Edition.........................................................................................7

2.3.3 Xcode....................................................................................7

3 六边革命游戏总体设计…………………………………… …………………………………9

3.1 游戏灵感来源......................................................................................................9

3.2 游戏流程设计..........................................................................................................................9

4游戏各流程需求分析………………………………………………………………….................12