如何使用Createjs来编写HTML5游戏完成一个简单的打飞机游戏
CreateJS包含4个部分，EaselJS、TweenJS、PreloadJS、SoundJS，其中最主要的部分EaselJS包含了开发Html5游戏的所有功能，仅仅使用EaselJS几乎可以完成所有的开发工作，其余三项可以看作EaselJS的辅助工具。比如响应tick事件然后改变元素坐标就可以实现动画功能，而使用TweenJS来创建补间动画，则可以省去你很多代码，简化了操作。一个简单的tick动画看起来是这样的：pre t="code" l="js"var stage, circle;
function init(){
stage = new createjs.Stage(document.getElementById('game'));
createjs.Ticker.addEventListener("tick", handleTick);
createjs.Ticker.setFPS(60);
circle = new createjs.Shape();
circle.graphics.f("red").dc(0,0,50);
circle.x = 0;
circle.y = 100;
stage.addChild(circle);
circle.addEventListener("click", function(event){
createjs.Ticker.setPaused(!createjs.Ticker.getPaused());
});
}
function handleTick(event){
if(!event.paused){
circle.x +=5;
if(circle.x 1000){
circle.x = 0;
}
}
stage.update();
}
HTML5开发游戏如何实现关卡功能,最好有代码
首先你要学会canvas标签的基本用法，画线，画笔大小，画笔，截图保存等，
然后结合你的js功底在画布上要画出连续的平滑的线条，
然后别人就可以根据画的图，猜词语了，猜中了就给分。
然后排名什么的。这就是一个简单的html5游戏了
如何开发一个简单的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里写一个canvas元素目的是要说明代码创建也是很方便的。有了画布后就可以获得它的上下文来进行绘图了。然后我们还设置了画布大小，最后将其添加到页面上。
准备图片
// 背景图片
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 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 = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;
如果你不是完全理解上面的代码也没关系，我只是觉得拿出来解释一下总是极好的
为了循环地调用main函数，本游戏之前用的是setInterval。但现今已经有了更好的方法那就是requestAnimationFrame。使用新方法就不得不考虑浏览器兼容性。上面的垫片就是出于这样的考虑，它是Paul Irish 博客原版的一个简化版本。
启动游戏！
// 少年，开始游戏吧！
var then = Date.now();
reset();
main();
总算完成了，这是本游戏最后一段代码了。先是设置一个初始的时间变量then用于首先运行main函数使用。然后调用 reset 函数来开始新一轮游戏（如果你还记得的话，这个函数的作用是将英雄放到画面中间同时将怪物放到随机的地方以方便英雄去捉它）。
到此，相信你已经掌握了开发一个简单H5小游戏需要的基本功了。玩玩这个游戏或者下载代码自己研究研究吧 :)
Feel free to repost but keep the link to this page please!
如何编程游戏？
需要学习多种编程语言。
1：首先要知道游戏编程用的什么语言。
2：c++语言是目前最为稳定的、指针最为全面的语言。游戏尤其网游的稳定性要求极高，因此必须用c++。
3：先学c语言，c语言是全部计算机语言的基础更是c++的基础。因此要学好。再学c++，这个要学精，不然开发游戏没戏。然后学数据结构、数据库、线性代数、离散数学结构。
4：html、css、js也要知道。
5：如果要制作跨平台游戏，建议学习下opengl/opengles，这是个很强大很专业的图形接口，因为很多平台支持所以适合跨平台游戏制作使用。
6：做2d游戏，可以使用cocos2dx等一些引擎，当然你也可以使用上面的3d引擎制作2d游戏。
怎么用html5制作简单的大球吃小球的游戏
html
head
title
大球吃小球by大奔
/title
script type="text/javascript" src="src/jscex.js"/script
script type="text/javascript" src="src/jscex-parser.js"/script
script type="text/javascript" src="src/jscex-jit.js"/script
script type="text/javascript" src="src/jscex-builderbase.js"/script
script type="text/javascript" src="src/jscex-async.js"/script
script type="text/javascript" src="src/jscex-async-powerpack.js"/script
/head
body
canvas id="myCanvas" width="480" height="300" style="border:1px solid #c3c3c3"
你的浏览器改换了
/canvas
script type="text/javascript"
var d=document.getElementByIdx_x("myCanvas");
var cxt=d.getContext("2d");
var balls=[];
//这里为了获得随机数的向量
function getRandom(a,b){
return (a+Math.floor(Math.random()*(b-a+1)))
}
//这里对向量进行赋值
var Vector2=function(a,b){
this.x=a||0;
this.y=b||0;
};
//这里需要注意，对象的默认方法在这里写不会管用。例如sub
Vector2.prototype={//写对象的构造函数
constructor:Vector2,
multiplyScalar:function(s){
this.x*=s;
this.y*=s;
return this;
},
divideScalar:function(s){
if(s){
this.x/=s;
this.y/=s;
}else{
this.set(0,0);
}
return this;
},
dot:function(v){
return this.x*v.x+this.y*v.y;//即两个向量相乘
},
lengthSq:function(){
return this.x*this.x+this.y*this.y;
},
length:function(){
return Math.sqrt(this.lengthSq());
},
normalize:function(){
//这里得到的是单位向量，按照google的定义，单位的向量是， //（a,b）则a*a+b*b=1;
return this.divideScalar(this.length());
},
reflectionSelf:function(v){
//这里得到的是反射向量。公式参考这个网址。
//blog.physwf.com/?p=42
var nv=v.normalize();
this.sub(nv.multiplyScalar(2*this.dot(nv)));
},
distanceToSquared:function(v){//求出两点之间的距离
var dx=this.x-v.x,
dy=this.y-v.y;
return dx*dx+dy*dy;
}
};
Vector2.sub=function(v1,v2){//这里重写sub方法
return new Vector2(v1.x-v2.x,v1.y-v2.y);
};
for(var i=0;i40;i++){//初始化40个小球
var ball={
position:new Vector2(getRandom(20,600),getRandom(20,600)),
r:getRandom(6,20),
speed:new Vector2(getRandom(-200,200),getRandom(-200,200)),
mass:1,//这是小球的质量
restitution:1//这是弹性系数
};
balls.push(ball);
}
var filterBalls=[];
for(var i=0;iballs.length;i++){
var overlapCount=0;
for(var j=i+1;jballs.length;j++){//两个两个比较防止重复，而且初始化的位置不能重 //叠，否则符合碰撞的条件。去掉这个判断以后，效果不太显著，可以多放些球试试。
var distance=balls[i].position.distanceToSquared(balls[j].position);
var l=balls[i].r+balls[j].r;
if(distance=(l*l)){
overlapCount++;
}
}
if(overlapCount===0){
filterBalls.push(balls[i]);
}
}
balls=filterBalls;//这里可以去掉试试。
cxt.fillStyle="#030303";
cxt.fillRect(0,0,d.width,d.height);
function init(){
cxt.fillStyle="#fff";
for(i in balls){
cxt.beginPath();
cxt.arc(balls[i].position.x,balls[i].position.y,balls[i].r,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
}
}
init();
var cyc=20;
var moveAsync2=eval_r(Jscex.compile("async",function(){
var tag=0;
while(true){
try{
cxt.fillStyle="rgba(0,0,0,3)";
cxt.fillRect(0,0,d.width,d.height);
cxt.fillStyle="#fff";
for(var i=0;iballs.length;i++){
//这里是为了两个小球比较会重复所以，每次比较都是i与i+1 //开始相比较
for(var j=i+1;jballs.length;j++){
collisionSolver(balls[i],balls[j]);
}
}
for(i in balls){
cxt.beginPath();
cxt.arc(balls[i].position.x,balls[i].position.y,balls[i].r,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
if(balls[i].r+balls[i].position.xd.width){
//如果小球x轴跑出了画布的范围
balls[i].position.x=d.width-balls[i].r;
//小球的位置返回到画布的边缘位置
balls[i].speed.x*=-1;
//同时x轴的方向变为反方向
}if(balls[i].position.xballs[i].r){
//如果小球的x坐标小于小球的半径。肯定画不成完整的圆了，所以要归位
balls[i].position.x=balls[i].r;
balls[i].speed.x*=-1; }if(balls[i].r+balls[i].position.yd.height){//同理y轴
balls[i].position.y=d.height-balls[i].r;
balls[i].speed.y*=-1;
}
if(balls[i].position.yballs[i].r){
balls[i].position.y=balls[i].r;
balls[i].speed.y*=-1;
} balls[i].position.x+=balls[i].speed.x*cyc/1000;
//小球的x轴不断按照速度增大
balls[i].position.y+=balls[i].speed.y*cyc/1000;
}
}catch(e){
alert(e);
}
$await(Jscex.Async.sleep(cyc));
}
}));
function collisionSolver(bodyA,bodyB){//判断小球发生碰撞的时候的变化。
var vB=bodyB.speed;
var vA=bodyA.speed;
var l=bodyA.r+bodyB.r;
var distSqr=bodyA.position.distanceToSquared(bodyB.position);
var isTouching=distSqr=l*l? true:false;
//判断两圆心之间的距离如果小于两半径之和的平方。则为true
var normal=Vector2.sub(bodyB.position,bodyA.position).normalize();
//请看上面的解释,所以得到的是B相对于A的单位向量。
var ratio=bodyA.r/l;//这是一个比例
var contactPoint=new Vector2();
//根据平行线切割的三角形，两边的边的比例相等，
contactPoint.x=bodyA.position.x+(bodyB.position.x-bodyA.position.x)*ratio;
contactPoint.y=bodyA.position.y+(bodyB.position.y-bodyA.position.y)*ratio;
var rA=Vector2.sub(contactPoint,bodyA.position);
//这两个地方没有找到是哪里用到的？？？？？
var rB=Vector2.sub(contactPoint,bodyB.position);
var vrn=Vector2.sub(vA,vB).dot(normal);
//这里得到的是Va相对于vB的速度向量与两球的圆心的单位向量相乘。
///a*b=|a|*|b|*cos@.所以如果vrn大于零，则夹角小于90度。
if(isTouchingvrn0){
//这里是冲量公式的一个部分
var normalMass=1/(1/bodyA.mass+1/bodyB.mass);
var restitution=(bodyA.restitution+bodyB.restitution)/2;
var normalImpulse=-normalMass*vrn*(1+restitution);
bodyA.speed.x+=normalImpulse*normal.x/bodyA.mass;
//这里总之是一个大球一个小球，所以速度一个增大一个减小
bodyA.speed.y+=normalImpulse*normal.y/bodyA.mass;
bodyB.speed.x-=normalImpulse*normal.x/bodyB.mass;
bodyB.speed.y-=normalImpulse*normal.y/bodyB.mass;
}
}
moveAsync2().start();
/script
/body
/html
如何开发一个简单的HTML5 Canvas 小游戏
创建画布
// 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里写一个canvas元素目的是要说明代码创建也是很方便的。有了画布后就可以获得它的上下文来进行绘图了。然后我们还设置了画布大小，最后将其添加到页面上。
准备图片
// 背景图片
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 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 = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;
如果你不是完全理解上面的代码也没关系，我只是觉得拿出来解释一下总是极好的
为了循环地调用main函数，本游戏之前用的是setInterval。但现今已经有了更好的方法那就是requestAnimationFrame。使用新方法就不得不考虑浏览器兼容性。上面的垫片就是出于这样的考虑，它是Paul Irish 博客原版的一个简化版本。
启动游戏！
// 少年，开始游戏吧！
var then = Date.now();
reset();
main();
如何用html和javascript做一个文字游戏
这个有多种实现方式，页面少的话写在一个文件里，靠控制隐藏和显示就可以实现。
页面多的话可以每个场景一个页面，点击选项打开对应的页面。
如果是多页面的情况，你点击的时候转到另一页了，当然图片和文字会有变动。如果要动画效果，就需要jquery或者CSS3
总之，你要的这个东西很简单，但是很费时，建议找一个懂代码的人来写。
