如何开发一个简单的html5小游戏

创建画布

// Create the canvas

var canvas = documentcreateElement("canvas");

var ctx = canvasgetContext("2d");

canvaswidth = 512;

canvasheight = 480;

documentbodyappendChild(canvas);

首先我们需要创建一张画布作为游戏的舞台。这里通过JS代码而不是直接在HTML里写一个<canvas>元素目的是要说明代码创建也是很方便的。有了画布后就可以获得它的上下文来进行绘图了。然后我们还设置了画布大小，最后将其添加到页面上。

准备

// 背景

var bgReady = false;

var bgImage = new Image();

bgImageonload = function () {

bgReady = true;

};

bgImagesrc = "images/backgroundpng";

游戏嘛少不了的，所以我们先加载一些先。简便起见，这里仅创建简单的对象，而不是专门写一个类或者Helper来做加载。bgReady这个变量用来标识是否已经加载完成从而可以放心地使用了，因为如果在加载未完成情况下进行绘制是会报错的。

整个游戏中需要用到的三张：背景，英雄及怪物我们都用上面的方法来处理。

游戏对象

// 游戏对象

var hero = {

speed: 256, // 每秒移动的像素

x: 0,

y: 0

};

var monster = {

x: 0,

y: 0

};

var monstersCaught = 0;

现在定义一些对象将在后面用到。我们的英雄有一个speed属性用来控制他每秒移动多少像素。怪物游戏过程中不会移动，所以只有坐标属性就够了。monstersCaught则用来存储怪物被捉住的次数。

处理用户的输入

// 处理按键

var keysDown = {};

addEventListener("keydown", function (e) {

keysDown[ekeyCode] = true;

}, false);

addEventListener("keyup", function (e) {

delete keysDown[ekeyCode];

}, false);

现在开始处理用户的输入(对初次接触游戏开发的前端同学来说，这部分开始可能就需要一些脑力了)。在前端开发中，一般是用户触发了点击事件然后才去执行动画或发起异步请求之类的，但这里我们希望游戏的逻辑能够更加紧凑同时又要及时响应输入。所以我们就把用户的输入先保存下来而不是立即响应。

为此，我们用keysDown这个对象来保存用户按下的键值(keyCode)，如果按下的键值在这个对象里，那么我们就做相应处理。

开始一轮游戏

// 当用户抓住一只怪物后开始新一轮游戏

var reset = function () {

herox = canvaswidth / 2;

heroy = canvasheight / 2;

// 将新的怪物随机放置到界面上

monsterx = 32 + (Mathrandom() (canvaswidth - 64));

monstery = 32 + (Mathrandom() (canvasheight - 64));

};

reset方法用于开始新一轮和游戏，在这个方法里我们将英雄放回画布中心同时将怪物放到一个随机的地方。

更新对象

// 更新游戏对象的属性

var update = function (modifier) {

if (38 in keysDown) { // 用户按的是↑

heroy -= herospeed modifier;

}

if (40 in keysDown) { // 用户按的是↓

heroy += herospeed modifier;

}

if (37 in keysDown) { // 用户按的是←

herox -= herospeed modifier;

}

if (39 in keysDown) { // 用户按的是→

herox += herospeed modifier;

}

// 英雄与怪物碰到了么？

if (

herox <= (monsterx + 32)

&& monsterx <= (herox + 32)

&& heroy <= (monstery + 32)

&& monstery <= (heroy + 32)

) {

++monstersCaught;

reset();

}

};

这就是游戏中用于更新画面的update函数，会被规律地重复调用。首先它负责检查用户当前按住的是中方向键，然后将英雄往相应方向移动。

有点费脑力的或许是这个传入的modifier 变量。你可以在main 方法里看到它的来源，但这里还是有必要详细解释一下。它是基于1开始且随时间变化的一个因子。例如1秒过去了，它的值就是1，英雄的速度将会乘以1，也就是每秒移动256像素；如果半秒钟则它的值为05，英雄的速度就乘以05也就是说这半秒内英雄以正常速度一半的速度移动。理论上说因为这个update 方法被调用的非常快且频繁，所以modifier的值会很小，但有了这一因子后，不管我们的代码跑得快慢，都能够保证英雄的移动速度是恒定的。

现在英雄的移动已经是基于用户的输入了，接下来该检查移动过程中所触发的事件了，也就是英雄与怪物相遇。这就是本游戏的胜利点，monstersCaught +1然后重新开始新一轮。

渲染物体

// 画出所有物体

var render = function () {

if (bgReady) {

ctxdrawImage(bgImage, 0, 0);

}

if (heroReady) {

ctxdrawImage(heroImage, herox, heroy);

}

if (monsterReady) {

ctxdrawImage(monsterImage, monsterx, monstery);

}

// 计分

ctxfillStyle = "rgb(250, 250, 250)";

ctxfont = "24px Helvetica";

ctxtextAlign = "left";

ctxtextBaseline = "top";

ctxfillText("Monsterrs caught: " + monstersCaught, 32, 32);

};

之前的工作都是枯燥的，直到你把所有东西画出来之后。首先当然是把背景图画出来。然后如法炮制将英雄和怪物也画出来。这个过程中的顺序是有讲究的，因为后画的物体会覆盖之前的物体。

这之后我们改变了一下Canvas的绘图上下文的样式并调用fillText来绘制文字，也就是记分板那一部分。本游戏没有其他复杂的动画效果和打斗场面，绘制部分大功告成！

主循环函数

// 游戏主函数

var main = function () {

var now = Datenow();

var delta = now - then;

update(delta / 1000);

render();

then = now;

// 立即调用主函数

requestAnimationFrame(main);

};

上面的主函数控制了整个游戏的流程。先是拿到当前的时间用来计算时间差（距离上次主函数被调用时过了多少毫秒）。得到modifier后除以1000(也就是1秒中的毫秒数)再传入update函数。最后调用render 函数并且将本次的时间保存下来。

关于游戏中循环更新画面的讨论可参见「Onslaught! Arena Case Study」。

关于循环的进一步解释

// requestAnimationFrame 的浏览器兼容性处理

var w = window;

requestAnimationFrame = wrequestAnimationFrame || wwebkitRequestAnimationFrame || wmsRequestAnimationFrame || wmozRequestAnimationFrame;

如果你不是完全理解上面的代码也没关系，我只是觉得拿出来解释一下总是极好的

为了循环地调用main函数，本游戏之前用的是setInterval。但现今已经有了更好的方法那就是requestAnimationFrame。使用新方法就不得不考虑浏览器兼容性。上面的垫片就是出于这样的考虑，它是Paul Irish 博客原版的一个简化版本。

启动游戏！

// 少年，开始游戏吧！

var then = Datenow();

reset();

main();

总算完成了，这是本游戏最后一段代码了。先是设置一个初始的时间变量then用于首先运行main函数使用。然后调用 reset 函数来开始新一轮游戏（如果你还记得的话，这个函数的作用是将英雄放到画面中间同时将怪物放到随机的地方以方便英雄去捉它）。

到此，相信你已经掌握了开发一个简单H5小游戏需要的基本功了。玩玩这个游戏或者下载代码自己研究研究吧 :)

Feel free to repost but keep the link to this page please!

游戏开发中的程序开发主要由如下几个方面组成：

1．图形引擎

2．声音引擎

3．物理引擎

4．游戏引擎

5．人工智能或游戏逻辑

6．游戏GUI界面（菜单）

7．游戏开发工具

8．支持局域网对战的网络引擎开发

9．支持互联网对战的网络引擎开发

下面逐一介绍每个部分：

1．图形引擎主要包含游戏中的场景（室内或室外）管理与渲染，角色的动作管理绘制，特效管理与渲染（粒子系统，自然模拟（如水纹，植物等模拟）），光照和材质处理，LOD(LevelObjectDetail)管理等，另外还有图形数据转换工具开发，这些工具主要用于把美工用DCC软件（如3DSMax，Maya，SoftXSI，SoftImage3D等）软件制作的模型和动作数据以及用Photoshop或painter等工具制作的贴图，转化成游戏程序中用的资源文件。

2．声音引擎主要包含音效（SoundEffect简称SE），语音(VOICE)，背景音乐（Backgroundmusic简称BGM）的播放。SE是指那些在游戏中频繁播放，而且播放时间比较短，但要求能及时无延迟的播放，VOICE是指游戏中的语音或人声，这部分对声音品质要求比较高，基本上用比较高的采样率录制和回放声音，但和SE一样要求能及时无延迟的播放，SE在有的时候因为内存容量的问题，在不影响效果的前提下，可能会降低采样率，但VOICE由于降低采样率对效果影响比较大，所以一般VOICE不采用降低采样率的做法。BGM是指游戏中一长段循环播放（也有不循环，只播放一次）的背景音乐，正是由于BGM的这种特性，一般游戏的背景音乐是读盘（光盘或硬盘）来播放。另外一些高级声音特效，如EAX，数字影院系统(DTS51)，数字杜比环绕等。

3．物理引擎主要包含游戏世界中的物体之间、物体和场景之间发生碰撞后的力学模拟，以及发生碰撞后的物体骨骼运动的力学模拟（比较著名的物理引擎有havok公司的gamedynamicssdk，还有opensource的ODE—OpenDynamicsEngine）。

4．游戏引擎主要是把图形引擎、声音引擎、物理引擎整合起来，主要针对某个游戏制作一个游戏系统，其包含游戏关卡编辑器，主要用途是可以可视化的对场景进行调整，光照效果和雾化等效果调整，事件设置，道具摆放，NPC设置，另外还有角色编辑器，主要用于编辑角色的属性和检查动作数据的正确性。一般日本游戏公司的做法，他们会把关卡编辑器和角色编辑器直接做到游戏中，所有的参数调整都在游戏中通过调试菜单来进行编辑，所以一般他们把这部分调试菜单的功能做的很强大，同时在屏幕上实时的显示一些重要的信息，这样做的好处是关卡编辑器调整的效果直接就是游戏的效果，但是对于程序的重用性来说可能不是很好，比如说要用到另外一个游戏项目中就比较难，除非两个游戏类型相同，只要把场景和角色数据换一下，还有做下一代产品也没有问题，只要根据式样增加调试菜单的功能就可以了。

5．人工智能和游戏逻辑开发，这部分日本和欧美的游戏开发模式也有很大不同，在欧美游戏公司中运用脚本语言开发很普遍，所以这部分程序开发主要是用脚本语言编写，而且脚本程序和游戏程序的耦合性很低，有单独的编辑、编译和调试环境，这样比较利于游戏程序和关卡设计开发分开，同时并行开发，所以一般他们都会有专门做关卡设计的程序员岗位。而日本游戏公司脚本语言一般和游戏的耦合性比较高，一般通过一些语言的宏功能和一些编译器的特定功能来完成一个简单的脚本系统，所以一般这些脚本程序只能在游戏程序中进行调试，而不能在一个单独的脚本编辑，编译环境中进行开发。

6．游戏GUI界面（菜单），主要是指那些游戏中用户界面设计，有做的复杂，有简单的，做的简单就是2DGUI界面，做的复杂有3DGUI界面。

7．游戏开发工具主要包含关卡编辑器，角色编辑器，资源打包管理，DCC软件的插件工具等开发。

8．支持局域网对战的网络引擎开发，主要解决局域网网络发包和延迟处理，通讯同步的问题，有同步通讯和异步通讯两种做法，异步通讯用于那些对运行帧速要求比较高的游戏，同步通讯相对异步通讯来说效率相对低，但是同步通讯的编程模型相对异步通讯来得简单一些。

9．支持互联网对战的网络引擎开发，目前大部分网游都是C/S结构的，服务器端软件配置管理，服务器程序的最优化，还有游戏大厅、组队、游戏逻辑处理、道具管理、收费系统等。另外还有一些网络系统是C/S和P2P两种结构混合的，如XBOXLive等。

二、游戏公司中有哪些和程序员相关的岗位

程序员在游戏公司中的岗位在日本游戏公司和欧美的游戏公司有些不同，日本游戏公司中程序员的岗位主要有技术监督（Director），主程序员（MainProgrammer），程序员（Programmer），在日本游戏公司里负责游戏项目开发的程序员，一般不会专门根据工作内容划分程序员，除了独立的系统研究室和声音系统制作部门（这两个部门是比较独立的，往往同时给好几个项目服务），负责每个游戏项目开发的程序员，随时都可能一人多职，比如说主程序员除了负责整个游戏系统以外，可能还要负责图形或声音引擎开发等，程序员除了人工智能以外还有菜单制作等。这种情况在欧美的游戏公司比较少见，他们分工的比较细，一般有图形程序员，声音程序员，人工智能或游戏关卡程序员，物理程序员，每个组中可能还会有一个Leader。

三、游戏公司一般是如何招聘程序员的

这一点，日本公司和欧美公司也有些不同。日本公司一般喜欢从一些高校中招聘一些应届优秀毕业生，一方面比招聘有经验的人要来的成本低，另方面新人是一张白纸，容易培养，像SEGA、KONAMI等都是按这种原则招聘员工的，所以想进入日本游戏公司，你要学好你的软件课程。而欧美公司希望招聘进来，能马上进入项目的开发中去，所以他们一般希望招聘有工作经验的人，即使不是行业中，在相关行业中工作2、3年的也可以，所以想进入欧美游戏公司你的工作经历很重要。

四、想成为一名游戏开发程序员应该具备哪些条件

我觉的一个游戏软件程序员，最起码的要求是熟练掌握计算机本科专业所学的知识，主要包括C语言或C语言，数据结构，编译原理，算法等，另外线性代数、微积分、牛顿力学在图形和物理引擎开发方面用途也很广泛，如果要提高的话还有必要了解硬件相关的知识如计算机体系结构、汇编语言，这些对我们学习一个新的硬件平台、编写最优化代码、提高自己游戏的竞争力都是非常有益的。另外，保持有恒心、不怕苦（比如说通宵加班）的心态，对游戏的热情也是非常重要的。对于那些想进入游戏行业，但缺乏软件开发知识的人，可以通过参加游戏开发培训来

五、学习游戏编程有哪些好方法

现在有很多人，计算机本科毕业，学了很多软件开发的知识，但是一旦要用到实际的项目开发时，感觉无从下手，这主要是在学校里运用知识的机会太少了。所以学习游戏编程最好的方法是能实际参与到一个好的游戏项目中和有丰富开发经验的人一起开发游戏，可能学到很多你从书本上学不到知识和技能。但有时候你一时还没有机会参与到一个好项目中，没有机会进入一家好的游戏公司，但是你对游戏开发有一腔热情，很希望学习游戏开发的技能，那你就应该去参加专门的游戏开发培训，因为游戏开发培训班中的老师都是一些有丰富开发经验的老师，一般都有五年丰富的项目开发经验，听他们的课，实际上就是在和他一起分享这么多年的开发经验，另外游戏开发培训课程中会专门设计一些项目和课题，它们本身就是可以直接运用游戏开发中，这样你可以不进入著名的游戏公司，但可以学到这些公司中一些常用的开发技能。另外还有一种方法经济实惠的方法，参加一些网上志愿者的开源项目，这些项目从品质来说有好有坏，选择一个好的项目非常重要，另外他们中间本身有许多是业内人士，本来你要进入他们公司，才能学习到他们的经验，但是通过开源项目，你就有向他们学习的机会了，说不定哪一天，你就进入一家知名的游戏公司了，不过目前开源的完整游戏项目好的不多，到是在图形引擎和物理引擎方面有一些很不错的开源项目，但要加入进去的话，你的基础一定要好啊，有些开源的团队也不是随便什么人就能加入的。

以上就是关于如何开发一个简单的html5小游戏全部的内容，包括:如何开发一个简单的html5小游戏、html5游戏开发,需要学习什么技术_游戏开发需要具备哪些技术、等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！