html5js游戏,html5js

HTML5+js开发游戏如何实现关卡功能

首先你要学会canvas标签的基本用法，画线，画笔大小，画笔，截图保存等，

然后结合你的js功底在画布上要画出连续的平滑的线条，

然后别人就可以根据画的图，猜词语了，猜中了就给分。

然后排名什么的。这就是一个简单的html5游戏了

相关问答

Q1: html5是干什么用的？Html5小游戏用途又是什么？

html5是指网页第5版标准.

在这个标准下,网页构建不能依赖商业插件(防止垄断,如早期FLASH的垄断地位,一切需要看ADOBE的),不能有第3方插件(来防止木马和病毒打包成插件影响安全).代码编辑要可视化,代码更简单易懂(减少开发成本和加快开发进度).

所以在H5标准下,像使用ADOBE公司的FLASH插件或unity或广告推广插件等都是不符合标准的.

而符合标准的网页则是主要使用JS+H5编写,因为是通用语言,所以可以横跨平台,比如 电脑和手机等都可以使用一套文件,也因为抛弃第3方插件,所以不会有软件限制,象FLASH只能用ADOBE公司的软件打开,而JS不光软件,就算电脑带的记事本也可以制作和修改.减少开发成本.

至于H5小游戏,只是符合H5标准的游戏,现在用的多的地方是营销方面.另外,H5游戏只是符合标准,而制作方法有很多,有软件生成,引擎制作,手写等,是做的好还是做的差是看开发人员的本事.所以这个不是好坏判断的标准.

Q2: 如何使用Createjs来编写HTML5游戏EaselJS简介

createJs的由来，基础什么的就不说了，就直接说createJs的用法吧。

首先到createJs官网下载，createJs分成easelJs（图形动画）、preloadJs（文件加载）、soundJs（音频控制）以及tweenJs（补间动画）四部分，大家下载的时候，建议下载两个文件，一个是压缩版文件，用于项目中的引用，再下载个源码文件，用于查看用法、API、demo等。因为楼主目前只用了easelJs和preloadJs，所以暂时就只说这两个，其实就这两个已经非常够用了。

接下来开始分析代码：

首先引入js文件

script

src="easeljs-0.7.1.min.js"/script

script

src="preloadjs-0.4.1.min.js"/script

然后进行舞台初始化操作：

function

init(){

stage

=

new

createjs.Stage("cas");

C_W

=

stage.canvas.width;

C_H

=

stage.canvas.height;

var

manifest

=

[

{src:"image/man.png"

,

id:"man"},

{src:"image/ground.png"

,

id:"ground"},

{src:"image/bg.png"

,

id:"bg"},

{src:"image/high.jpg"

,

id:"high"},

{src:"image/coins.png"

,

id:"coin"}

]

loader

=

new

createjs.LoadQueue(false);

loader.addEventListener("complete"

,

handleComplete);

loader.loadManifest(manifest);

drawLoading();

}

上面就用到了preloadJs中的方法，实例化一个loader，把需要加载的图片文件放在manifest里面，进行加载，加载完成后调用回调handleCompelete函数：

function

handleComplete(){

//当图片素材load完后执行该方法

var

manImage

=

loader.getResult("man"),

lowground

=

loader.getResult("ground"),

highground

=

loader.getResult("high"),

bgImage

=

loader.getResult("bg"),

coins

=

loader.getResult("coin");

sky

=

new

createjs.Shape();

sky.graphics.bf(bgImage).drawRect(0,0,C_W,C_H);

sky.setTransform(0,

0,

1

,

C_H/bgImage.height);

stage.addChild(sky);

man

=

createMan(200,326,manImage);

//该框为判定角色的判定区域

kuang

=

new

createjs.Shape();

kuang.graphics.beginStroke("rgba(255,0,0,0.5)").drawRect(0

,

,

man.size().w

,

man.picsize().h*1.5);

//

stage.addChild(kuang);

mapHandle(lowground

,

highground

,

coins);

createjs.Ticker.timingMode

=

createjs.Ticker.RAF;//设置循环方法，可以是requestAnimationFrame或者是setTimeout

createjs.Ticker.setFPS(30);//舞台帧率控制

createjs.Ticker.addEventListener("tick",

tick);//绑定舞台每一帧的逻辑发生函数

window.addEventListener("keydown"

,

function(event){

event

=

event||window.event;

if(event.keyCode===32man.jumpNumman.jumpMax){

man.jump();

}

})

}

获得加载完成后端的图片数据就直接用loader.getResult就可以获取了，跑酷游戏需要一个背景，所以，我们实例化一个sky，然后进行位图绘制，bf方法是beginBitmapFill的缩写，该方法就是开始绘制位图，后面的drawRect是位图的绘制区域，区域当然是整个画布啦，所以就是drawRect(0,0,C_W,C_H)。实例化出来sky后就直接添加到舞台stage里面就行了。接下来是实例化一个角色，createMan方法后面有说，是自己封装的。

然后进行舞台循环设置，上面有注释了，就不说了。

Q3: 想尝试开发些HTML5小游戏，请大大们推荐款JS游戏引擎，轻量的，简单的有么？

最火的HTML5 js游戏引擎也是使用最多的：

1：Collie是一款基于HTML5的高性能JavaScript动画库，可用于创建高度优化的HTML5动画和游戏。

2：Traffic Cone 这个一般是做2D游戏用的要求比较高，所以不建议学。

3：Quintus是一款易于上手、轻量级、开源的HTML5 JavaScript游戏引擎，包含一个模块化的引擎可轻松开发游戏，并在同一个页面上运行多个实例，支持桌面及移动平台浏览器。（里面有一个自带的游戏示例，个人感觉用这个错，推荐使用）

4：gameQuery是一款非常易于上手和使用的开源JavaScript游戏引擎，通过添加一些简单的游戏类，使用jQuery插件来帮助开发者开发JavaScript游戏，即使是初学者也可以轻松编写一个功能丰富的2D游戏。

亲！！如果你是刚开始开发HTML5游戏话，，建议你用第三和第四个。。

感觉有用，，请采纳，谢谢！！

Q4: html5游戏实际上是js游戏，认同吗？为什么还要叫h5游戏？h4加js不能做h5游戏的效果吗？

H5是个标准,只要符合H5标准的都可以叫H5,用H4加JS做出来的H5标准可以运行,自然叫H5,问题是H4时代很多都做不了H5标准,所以才出一堆乱七八糟的浏览器插件.

JS是网络基础语言,不用JS用什么搞交互,用JS是为了能更好的运行网页,不使用H5,采用H4加JS也可以做游戏,问题是绕路会绕很多,比如,一个标签能解决的问题,使用H4加JS至少要百行代码,可能还需要插件才能运行. 代码多插件多,自然问题多出错多.性能也会下降.自然就被淘汰了.

canvas是个画布元素你可以看成是个容器,象上边说的,你也可以自定义元素,只是,是否会比canvas稳定就不一定了.

还有制作游戏和用什么其实没什么关系,游戏代码其实并不复杂,但是引擎开发就那么几家是因为稳定和责任.游戏主要是策划占大头.代码反而是弱项.

要真想做游戏引擎,先要学基础理论和设计,实际游戏代码是为了更多人使用,所以也要考虑人性化,没人玩的游戏就不能叫游戏了.代码要精简,符合理论.至于是用C还是JS或P语言其实都一样,因为语言你只要查帮助都可以查到API,基础语言都是开源的.有一定流程懂理论,知道游戏该注重哪些,并接受别人和玩家意见才成.

就现在来说,游戏开发,有直接用游戏工具的,不需要代码,只要会策划游戏就可以,连角色背景都是软件内置,还有采用引擎来开发, 代码都是引擎开发公司在做,策划和美术只要看帮助就可以使用.

不然游戏崩了,你作为项目负责人是需要负责的,出问题赔钱,出事故坐牢,很简单,这个也是为什么都不自己开发引擎的原因.