html5 游戏开发入门 哪个框架比较好_百度知道
html5 游戏开发入门 哪个框架比较好
Construct2、ImpactJS、GameMaker三个是收费的，其中Construct2与GameMaker更像一个游戏开发工具，可以实现不用写一行代码来制作游戏，更适合于没有编程基础的人使用。而ImpactJS作为一个高质量的框架，且易于扩展，虽然是收费的，但是物有所值。开源引擎中，three.js是最火的，但是仅限于开发3D游戏。其次是CreateJS，由Adobe官方赞助且采用Flash类似的API以及模块化开发，是Flash开发者以及将Flash游戏转换成html5不可多得的选择。Turbulenz虽然开源时间比较晚，但颇有后来者居上的趋势，由于其对2D和3D的同时支持，是同时开发2D和3D游戏的最佳选择。LimeJS与Crafty相比的优势在于有一个公司进行维护，相比个人要更稳定，但是需要依赖于Google Closure，也使之成为一个重量级的框架。Crafty体积小、轻量级，更适合于小游戏的开发。Cocos2d-html5作为国产框架的一个优势在于中文文档和教程多，且得到了Google的支持，但相比ImpactJS、CreateJS仍不够成熟。melonJS、Quintus、lycheeJS的开发者和使用者都较少，相关文档和教程也相对少，还有待观察。
其他类似问题
为您推荐：
提问者采纳
根据要做的游戏了解计算机图形学, w3school上有js的在线手册MDN上有html5的教程, cnblogs上能找到几个做html5游戏的博主有些挺好的入门博文要先把js熟悉了, 也可以直接找个好用的框架做, 之后要做游戏可以自己参考着cocos2d之类的框架做, html5的内容不算多一两天就能大致学会了
网络工程师
html5的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁教你HTML5开发爱心鱼游戏
随着互联网发展，HTML5游戏开发越来越火爆，从PC端到手机端无处不见，再不学习，您就 OUT了！让我们动起来，从基础到实践，手把手教你“爱心鱼”游戏开发。
教你HTML5开发爱心鱼游戏
8644人在学
JavaScript是前端开发必备技术，掌握JS基础及面向对象相关知识，对后续游戏实践打下基础。
Canvas开发基础
Canvas是游戏原生开发必学，掌握绘图基础，并精通Canvas各种接口使用，让您可以在浏览器上绘制各种炫丽的图形。
实践才是王道，该步骤带您使用 HTML5 Canvas API，实现爱心鱼游戏，帮您熟悉游戏开发流程，提升开发能力。
Copyright (C)
All Rights Reserved | 京ICP备 号-2游戏开发用什么语言做基础？怎么学？
游戏开发用什么语言做基础？怎么学？
游戏开发用什么语言做基础？怎么学？
浏览次数：1091
6天前浏览次数：105
5天前浏览次数：90
6天前浏览次数：88
4天前浏览次数：42
浏览次数：117
浏览次数：61
浏览次数：77
浏览次数：85
如果你对以下课程意犹未尽，，查看全部课程
HTML5全栈开发
HTML5最新课程
156 人在学
c#编程概述
C#快速入门
简单又好玩
120 人在学
没有账号？
s后重新发送
已有账号？
已有账号？
验证码确认
话题标题：
400-877-8190
登录后反馈HTML5游戏开发技术基础整理
随着HTML5标准最终敲定，HTML5将有望成为游戏开发领域的的热门平台。HTML5游戏能够运行于包括iPhone系列和iPad系列在内的计算机、智能手机以及平板电脑上，是目前跨平台应用开发的最佳实施方案。本文系根据[HML5 Canvas游戏开发实战]一书中的内容整理而成，是了解和学习HTML5游戏开发的基础内容，希望能够帮助到那些和博主一样致力于游戏开发的朋友们！
JavaScript中的面向对象编程
对于游戏开发来说，面向对象编程(OOP)是一种重要而且必要的方法，所以在了解HTML5游戏开发前，首先应该了解JavaScript中的面向对象编程。JavaScript是一种基于对象的语言，可它并不是一种真正的面向对象的编程语言，因为在JavaScript的语法中不存在类(Class)的概念。下面我们将分析和解决在JavaScript中实现封装、继承等面向对象的问题。
在JavaScript中函数(function)就是就是一个类(class)
//声明一个函数
function MyClass(){}
//实例化一个对象
var cls1 = new MyClass();
使用this关键字就可以为类增加属性
//声明一个类并定义其构造函数
function MyClass(name,age)
this.name =
//实例化一个对象
var cls1 = new MyClass("张三",20)
//输出cls1的两个属性值
alert("name=" + cls1.name + "&" + cls1.age)
使用prototype属性可以为类添加方法
//声明一个类并定义其构造函数
function MyClass(name,age)
this.name =
//为MyClass增加方法
MyClass.prototype=
toString:function()
alert("name=" + this.name + "&" + this.age)
getName:function()
alert("name=" + this.name)
getAge:function()
alert("age=" + this.age)
使用apply方法实现属性和方法的继承
//定义一个父类People
function People()
this.type="人"
//为父类定义一个方法
People.prototype=
getType:function()
alert("type=" + this.type)
//定义一个子类Student
function Student(name,age,sex)
//继承父类的属性type
People.apply(this,arguments);
this.name =
this.age =
this.sex =
//声明一个Student实例
var stu = new Student("张三",20,"男")；
//输出type
alert(stu.type)
//下面我们来了解下如何继承父类的方法，继承父类方法主要通过循环使用父对象的prototype进行复制来实现，如
//重新定义子类Student
function Student(name,age,sex)
//继承父类的属性type
People.apply(this,arguments);
//继承父类的方法，略显抽象
for(prop in People.prototype)
var proto = this.constructor.
if(!proto[prop])
proto[prop] = People.prototype[prop];
proto[prop]["super"] = People.
//属性定义
this.name =
this.age =
this.sex =
//实例化Student对象
var stu = new Student("张三",20,"男");
stu.getType();
静态类的实现
function staticClass()
staticClass.name = "张三";
staticClass.toString=function
alert("name=" + staticClass.name )
alert(staticClass.name);
staticClass.toString();
Canvas绘图基础
HTML5提供了图像、视频、音频、表单、位置、本地、离线存储、websocket等各种全新的特性，对于HTML游戏开发而言，我们主要关注图像、音频、本地数据库以及websocket等，首先我们来了解下Canavs绘图的基础内容。
Canvas是HTML5为我们提供的一张画布，可以让我们在HTML上直接绘制图形，因此Canvas可以作为HTML5游戏开发的基本元素，即HTML5游戏引擎的底层都是以Canvas元素来驱动的。Canvas本身没有绘图的能力，需要借助于Script来实现绘图的功能。使用Canvas元素只需要在网页中添加canvas标记即可，如
接下来我们通过来获取这个Canvas并通过相关API实现绘图环境的初始化
//获取Canvas元素
var canvas = document.getElementById('myCanvas');
//检查canvas合法性
if(canvas && canvas.getContext)
//获取当前上下文
var ctx = canvas.getContext('2d')
因为目前Canvas只支持2D绘图，因此，这里的参数暂时只能为2d。因为Cnavas绘图的API都封装在ctx这个实例中，因此下面的所有操作都是基于ctx来实现的：
使用Canvas绘制线
//设置线宽
ctx.lineWidth = 10;
//设置画笔颜色
ctx.strokeStyle = "red";
//创建一个路径
ctx.beginPath();
//路径起点
ctx.moveTo(10,10);
//路径终点
ctx.lineTo(150,50);
//绘制路径
ctx.stroke();
//设置线宽
ctx.lineWidth=5;
//设置画笔颜色
ctx.strokeStyle-"red"
//创建路径
ctx.beginPath();
//绘制矩形
ctx.strokeRect(10,10,70,40);
//定义矩形
ctx.rect(10,10,70,40);
//绘制矩形
ctx.stroke();
如果需要对矩形进行填充
//创建路径
ctx.beginPath()
//绘制矩形
ctx.fillRect(10,10,70,40)
使用Canvas绘制圆
//创建路径
ctx.beginPath();
ctx.arc(100,100,50,0,360*Math.PI/180,true);
ctx.stroke();
同样地，可以使用fill进行填充绘制
//创建路径
ctx.beginPath();
ctx.arc(100,100,50,0,360*Math.PI/180,true);
ctx.fill();
使用Canvas绘制圆角矩形
绘制圆角矩形需要arcTo函数配合lineTo来完成
//创建路径
ctx.beginPath();
ctx.moveTo(40,20);
ctx.lineTo(100,20);
ctx.arcTo(100,20,120,40,20);
ctx.lineTo(120,70);
ctx.arcTo(120,90,100,90,20);
ctx.lineTo(40,90);
ctx.arcTo(20,90,100,70,20);
ctx.lineTo(20,40);
ctx.arcTo(20,20,40,20,20);
//绘制圆角矩形
ctx.stroke();
使用Canvas绘制复杂图形
在HTML5中可以通过quadraticCurveTo函数绘制二次贝塞尔曲线，通过bezierCurveTo函数绘制三次贝塞尔曲线,具体代码请参考API文档。
使用Canvas绘制文字
//设置字体
ctx.font="30px Arial";
//绘制文字
ctx.strokeText("Hello HTML5",100,50);
使用Canvas绘制图片
绘制图片使用drawImage函数，其函数原型如下：
drawImage(image,dx,dy);
其中image可以是HTML中的标签或者是JavaScript中的Image对象。如
//定义一个img标签
接下来通过getElementById来取得图像数据，并将其绘制出来
var img=document.getElementById("img_source");
ctx.draw(img,200,200);
如果直接使用JavaScript代码
var img=new Image();
img.src="/uploadfile/407.jpg";
ctx.draw(img,200,200)
图形的平移操作
使用translate函数实现在水平和垂直方向上的平移
图形的旋转操作
使用rotate函数实现旋转，需要注意的是传入的参数是弧度
图形的伸缩操作
使用scale函数实现伸缩，当参数为负值时表示在该方向上翻转
图形高级特效
这里主要介绍线性渐变、径向渐变、颜色反转、灰度。
//创建一个线性渐变容器
var grd=ctx.createLinearGradient(0,0,200,0);
//添加颜色
grd.addColorStop(0.2,"#00ff00");
grd.addColorStop(0.8,"#ff0000");
//应用渐变
ctx.fillStyle=
//创建一个径向渐变容器
var grd=ctx.createRadialGradient(100,100,10,100,100,50);
//添加颜色
grd.addColorStop(0,"#00ff00");
grd.addColorStop(,"#ff0000");
//应用渐变
ctx.fillStyle=
遍历每个像素并对RGB值进行取反
灰度计算公式：gary=red*0.3+green*0.59+blue*0.11
基础的内容就是这些了，以后如果碰到需要HTML5的地方可以回过头来看看。
(window.slotbydup=window.slotbydup || []).push({
id: '2467140',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467141',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467143',
container: s,
size: '1000,90',
display: 'inlay-fix'
(window.slotbydup=window.slotbydup || []).push({
id: '2467148',
container: s,
size: '1000,90',
display: 'inlay-fix'HTML5游戏开发基础视频教程
HTML5游戏开发基础视频教程
适用人群： 有志于进军游戏领域的人士
付费特权：
加入购物车
下载学院APP缓存视频离线看
[免费观看]
介绍HTML5游戏开发的发展前景，游戏效果展示；
说明HTML5游戏开发的学习路线；
介绍HTML5游戏开发的生命周期。
[免费观看]
介绍Canvas与Context的概念，介绍如何使用Canvas与Context完成游戏动画的程序编写。
介绍如何设置绘制样式，以及如何绘制线段。
如何使用API完成矩形的绘制，填充，擦除等效果。
介绍在HTML5当中，如何实现平移、旋转、缩放等效果，为游戏特效打下基础。
采用基础知识完成动画案例，让方块旋转起来，三种不同特效。
介绍如何使用HTML5绘制不规则路径、圆形、扇形等。
介绍如何实现阴影特效，如何实现线性渐变，径向渐变。
介绍如何实现阴影特效，如何实现线性渐变，径向渐变。
介绍如何实现阴影特效，如何实现线性渐变，径向渐变。
老师的讲解表达(4.7)
老师的答疑服务(3.7)
课程的更新速度(5)
这个视频看完有点失望，就算看完也不能做出什么游戏出来，顶多是个动画，鼠标和键盘的控制都没讲 这叫哪门子的游戏开发？另外除了第一节课有ppt下载，其他节课都没有ppt，也没有代码下载。。失望，不值￥50块钱
很好，期待看到老师做整个游戏的过程哦~
很好 适合学习
您可能感兴趣的课程
学员评分：4.9分
学员评分：5分
学员评分：4.4分
学员评分：5分
河北师范大学专业课教师，企业硕士生导师，软件评测师，集成信息系统项目管理师，信息系统项目管理师
好评率：97%
开课时间：
9007人学习过
学习过此课程的人还学习了
学员评分：4.9分
学员评分：4.9分
学员评分：5分
学员评分：5分
学员评分：4.9分
51CTO学院产品建议群：}