育才学习网1.HTML5游戏是怎么做的
从学习HTML开始，建议先去w3school找一些HTML教程，
再去买本HTML5的书研究网页。 最好还要学好css和JavaScript，这对于HTML的处理有很大作用的配合，而且最好能掌握jQuery。
都建议用引擎，其实现在压根没有什么很完善的HTML5游戏引擎，都处于发展阶段，本身HTML5就是新兴技术，入引擎首先得去理解引擎里各种组件，然后还未必知道组件为什么要这么写.
如何上手？
1，用canvas画张图片，写两个字
2，用循环函数改变图片和文字的属性让他们动起来
3，旋转，放大缩小，位移，混合，透明。.
4，绑定按键事件，去控制元素的属性
好了，差不多像个游戏了
这个过程会学到很多javascript的处理经验.比较懒的人就会开始想办法写对象复用调取和设置属性.
然后就会去考虑一些增加的部分：鼠标事件，触控事件，绘制性能优化，屏幕适配，资源载入。..
逐渐的就丰富起来了，就这样。
2.如何开发一个简单的html5小游戏
创建画布// Create the canvas var canvas = document.createElement("canvas"); var ctx = canvas.getContext("2d"); canvas.width = 512; canvas.height = 480; document.body.appendChild(canvas)； 首先我们需要创建一张画布作为游戏的舞台。
这里通过JS代码而不是直接在HTML里写一个
然后我们还设置了画布大小，最后将其添加到页面上。准备图片// 背景图片 var bgReady = false; var bgImage = new Image(); bgImage.onload = function () { bgReady = true; }; bgImage.src = "images/background.png"； 游戏嘛少不了图片的，所以我们先加载一些图片先。
简便起见，这里仅创建简单的图片对象，而不是专门写一个类或者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[e.keyCode] = true; }, false); addEventListener("keyup", function (e) { delete keysDown[e.keyCode]; }, false）； 现在开始处理用户的输入（对初次接触游戏开发的前端同学来说，这部分开始可能就需要一些脑力了）。
在前端开发中，一般是用户触发了点击事件然后才去执行动画或发起异步请求之类的，但这里我们希望游戏的逻辑能够更加紧凑同时又要及时响应输入。所以我们就把用户的输入先保存下来而不是立即响应。
为此，我们用keysDown这个对象来保存用户按下的键值（keyCode），如果按下的键值在这个对象里，那么我们就做相应处理。开始一轮游戏// 当用户抓住一只怪物后开始新一轮游戏 var reset = function () { hero.x = canvas.width / 2; hero.y = canvas.height / 2； // 将新的怪物随机放置到界面上 monster.x = 32 + (Math.random() * (canvas.width - 64)); monster.y = 32 + (Math.random() * (canvas.height - 64)); }; reset方法用于开始新一轮和游戏，在这个方法里我们将英雄放回画布中心同时将怪物放到一个随机的地方。
更新对象// 更新游戏对象的属性 var update = function (modifier) { if (38 in keysDown) { // 用户按的是↑ hero.y -= hero.speed * modifier; } if (40 in keysDown) { // 用户按的是↓ hero.y += hero.speed * modifier; } if (37 in keysDown) { // 用户按的是← hero.x -= hero.speed * modifier; } if (39 in keysDown) { // 用户按的是→ hero.x += hero.speed * modifier； } // 英雄与怪物碰到了么？ if ( hero.x <= (monster.x + 32) && monster.x <= (hero.x + 32) && hero.y <= (monster.y + 32) && monster.y <= (hero.y + 32) ) { ++monstersCaught; reset（)； } }； 这就是游戏中用于更新画面的update函数，会被规律地重复调用。首先它负责检查用户当前按住的是中方向键，然后将英雄往相应方向移动。
有点费脑力的或许是这个传入的modifier 变量。你可以在main 方法里看到它的来源，但这里还是有必要详细解释一下。
它是基于1开始且随时间变化的一个因子。例如1秒过去了，它的值就是1，英雄的速度将会乘以1，也就是每秒移动256像素；如果半秒钟则它的值为0.5，英雄的速度就乘以0.5也就是说这半秒内英雄以正常速度一半的速度移动。
理论上说因为这个update 方法被调用的非常快且频繁，所以modifier的值会很小，但有了这一因子后，不管我们的代码跑得快慢，都能够保证英雄的移动速度是恒定的。现在英雄的移动已经是基于用户的输入了，接下来该检查移动过程中所触发的事件了，也就是英雄与怪物相遇。
这就是本游戏的胜利点，monstersCaught +1然后重新开始新一轮。渲染物体// 画出所有物体 var render = function () { if (bgReady) { ctx.drawImage(bgImage, 0, 0); } if (heroReady) { ctx.drawImage(heroImage, hero.x, hero.y); } if (monsterReady) { ctx.drawImage(monsterImage, monster.x, monster.y)； } // 计分 ctx.fillStyle = "rgb(250, 250, 250)"; ctx.font = "24px Helvetica"; ctx.textAlign = "left"; ctx.textBaseline = "top"; ctx.fillText("Monsterrs caught: " + monstersCaught, 32, 32)； }； 之前的工作都是枯燥的，直到你把所有东西画出来之后。
首先当然是把背景图画出来。然后如法炮制将英雄和怪物也画出来。
这个过程中的顺序是有讲究的，因为后画的物体会覆盖之前的物体。这之后我们改变了一下Canvas的绘图上下文的样式并调用fillText来绘制文字，也就是记分板那一部分。
本游戏没有其他复杂的动画效果和打斗场面，绘制部分大功告成！主循环函数// 游戏主函数 var main = function () { var now = Date.now(); var 。
3.为什么我要自己写html5游戏引擎
用html5写游戏，会面临一系列的问题，情况很复杂。而当下热衷于html5开发游戏的，有两拨不同的人——熟悉dom、css、js、web2.0的传统前端开发工程师和熟悉canvas的传统游戏开发工程师。这两拨人的背景截然不同，所以在很多问题的处理上有出入。
1)js语法简单，很多高级一点的语法特性都没有，不适合直接拿来开发大型项目。
js核心语法只经过一个星期就设计完成了，很仓促。它在设计之初主要是为是给页面写一点“表单验证”之类的小功能，它是基于对象的语言，但extend、mix-in、import等语法都没有提供，因为打从一开始js之父从没想过有一天js会变得如此重要。在web2.0时代，有大量的DHTML需求，所以大型一些的js框架都会着手解决“大型项目可维护性”方面的问题，扩展js语言，通过封装api模拟高级语法特性，例如YUI3和Dojo。
extend和mix-in之类的还好解决一点，特别值得一提的是js模块化问题。js原生不提供import和包的机制，所以聪明的工程师自己封装了相关的api，更在近两年形成了commonJS规范。模块化、动态加载、依赖处理非常非常重要，不解决这个问题，很难优雅地处理大型项目。
html5游戏，首先它得是个js大型项目。web site在这些年积累了很多这方面的经验，html5游戏开发者应该吸收这些经验，不要写出web2.0以前的js代码水平。
2)html5是web前端技术，有web方面的特殊性。
比如说跨域问题、5游戏引擎是不方便处理这些的。这些内容可以交给传统前端的框架来做。
3)canvas和DOM，不同的GUI套路。
这是个巨大的鸿沟。前端们非常熟悉的三大基本元素html + css + js，传统游戏开发工程师们很陌生。特别是神器css，传统游戏工程师们很排斥，他们知道这个东西很好，却提不起兴趣学习，他们害怕浏览器兼容问题。他们号称开发html5游戏，其实只敢用canvas相关的子集。现在绝大多数的html5游戏引擎都是基于canvas的，纯canvas。
其实css是个巨大的神器，在GUI编程方面性价比奇高。css的api设计得如此简单却出奇强大！在桌面端已经有很多软件使用c++做个框，框里套个html，所有的GUI全是用html+css+js来实现的。在移动终端phonegap也是同样的思路。
纯canvas虽然省却了css、dom、浏览器兼容的学习成本，却主动放弃了css和dom引擎提供的大量帮助。捡芝麻丢西瓜。
4）大量不同终端和平台的适配。
html5适用的终端包括pc、移动设备甚至平板电视。操作系统有windows、ios、android、win8等主流平台，还有blackberry、web os、chrome os、ubuntu touch、firefox os，甚至wii u等非主流平台。不同的操作系统、不同分辨率、不同物理尺寸。游戏的尺寸该如何取舍？是放任缩放还是做响应式设计？浏览器能否全屏？浏览器状态栏有多高？是否是从主屏打开的（ios设备）？是横屏还是竖屏？
除了上面的这些操作系统，还有人人网、微博、微信这样的平台，也是html5游戏可以发布的地方，这些地方对接入的游戏尺寸又有哪些要求和限制？我能改页面的viewport吗？还是要将游戏的根结点进行scale缩放？
除了游戏的尺寸要适配，还有输入设备也要适配。pc的输入设备是键盘和鼠标，移动设备的输入设备是触摸屏和重力感应。什么设备使用虚拟十字键，什么设备键盘操作就行了，我们还需要对当前的终端做嗅探。
适配问题是个巨大的问题，终端多也就罢了，还很可能在不停地变化，系统升个级或者出来个新设备什么的，适配方面的工作还得持续更新。这些，游戏引擎们考虑过吗？考虑得完善，能应付我的定制需要吗？引擎更新得频繁和及时吗？
4.如何开发一个简单的html5小游戏
首先我们需要创建一张画布作为游戏的舞台。
这里通过JS代码而不是直接在HTML里写一个
然后我们还设置了画布大小，最后将其添加到页面上。 准备图片 // 背景图片 var bgReady = false; var bgImage = new Image(); bgImage.onload = function () { bgReady = true; }; bgImage.src = "images/background.png"； 游戏嘛少不了图片的，所以我们先加载一些图片先。
简便起见，这里仅创建简单的图片对象，而不是专门写一个类或者Helper来做图片加载。bgReady这个变量用来标识图片是否已经加载完成从而可以放心地使用了，因为如果在图片加载未完成情况下进行绘制是会报错的。
整个游戏中需要用到的三张图片：背景，英雄及怪物我们都用上面的方法来处理。 游戏对象 // 游戏对象 var hero = { speed: 256， // 每秒移动的像素 x: 0, y: 0 }; var monster = { x: 0, y: 0 };。
转载请注明出处育才学习网 » html5游戏怎么写