制作HTML5手机游戏的7个步骤.docxVIP

制作 HTML5手机游戏的7个步骤 想用HTML5制作跨平台的手机游戏？不必理会Java 或Objective-C？也不用管应用商店？听起来真不可思议！ 现在有许多游戏开发者都在挖掘手机 HTML 手机游戏的潜能。如《Nutmeg》和《Lunch Bug》就是优秀的案例。HTML5游戏的优势在于，使用相同的代码就能让游戏在手机和电脑上运行得一样好。这是否意味着HTML5能够让游戏代码编写成为一件一劳永逸的事？ 准备 在你开始编写你自己的“神庙逃亡”或“愤怒的小鸟”以前，以下几点可能会浇灭你的创作热情： 表现： 一般说来，手机浏览器的 JavaScript 引擎表现并不出众。尽管从 iOS 6和 Chrome 的 Android 测试版的情 况上看，它进步得很快。 分辨率： Android 设备的分辨率已经五花八门了，更别说 iPhone 4和 iPad 3的分辨率和像素密度也在不断提高。 声音： 但愿你不介意没有声音的游戏——手机浏览器的声音支持很差。延迟是主要问题，大部分设备只支持一种声道。iOS 甚至要等到用户主动开启才会加载声音。 现在，作为网页开发者的你已经习惯于处理浏览器的这些缺陷。所以，一些技术问题是难不倒你的，对吧？另外，这些表现和声音问题都是暂时的。毕竟手机浏览器进步飞快，这些问题很快就会变成历史。在本教程中，你将通过制作一款比较简单的游戏来了解这些基本问题以及解决办法。 iphone(from smashingmagazine) 这是一款相当简单的游戏：玩家要做的就是点击从屏幕底部浮起来的白色圆形，不要让它们通过。你可以把这些白色圆形想象成漂浮上升的泡泡，你要在它们飞上天以前刺破它们。所以，我把这款小游戏叫作《POP》。 我们的制作过程可以分成如下7个步骤： 1、设置视图，以适合大多数手机屏幕的尺寸； 2、使用 canvas API 在屏幕上绘制图形； 3、捕捉触击事件； 4、制作基本的游戏循环； 5、引入游戏“实体”； 6、添加碰撞检测和一些简单的数学计算； 7、修饰外观，即添加少量特效。 1、设置视图 背景故事就随便了。 正如前面提到的，不同的设备具有不同的分辨率和像素密度。这意味着我们必须调整画布以适应不同的视图。这就可能损失游戏的外观质量，但我们有一个小技巧，也就是先使用小画布，然后按比例放大，这么做后的画面效果就好多了。 我们先写一段基本的 HTML 代码： !DOCTYPE HTML html lang=”en” head meta charset=”UTF-8″ meta name=”viewport” content=”width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, user-scalable=0″ / meta name=”apple-mobile-web-app-capable” content=”yes” / meta name=”apple-mobile-web-app-status-bar-style” content=”black-translucent” / style type=”text/css” body { margin: 0; padding: 0; background: #000;} canvas { display: block; margin: 0 auto; background: #fff; } /style /head body canvas /canvas script all the code goes here /script /body /html 这个 meta 视图标签的作用是，命令浏览器禁止用户缩放画面，以及按完全尺寸渲染，而不是收缩页面。 随后的带 apple-前缀的 meta 标签允许游戏被加入书签。在 iPhone 上，加入书签的应用不会显示页面底部 的在工具条上，因此节省了大片空间。 看看以下代码： namespace our game var POP = { set up some initial values WIDTH: 320, HEIGHT: 480, we’ll set the rest of these in the init function RATIO: null, currentWidth: null, currentHeight: null, canvas: null, ctx: null, init: function() { the proportion of width to height POP.RATIO = POP.WIDTH / POP.HEIGHT; these will change when t