一、js都市小游戏

JS都市小游戏是一个新兴的休闲游戏品类，它以独特的玩法和个性化的游戏场景，吸引了众多玩家的关注。这些游戏往往具有简单易懂的规则和操作，玩家可以随时随地进行游戏，并且无需花费大量的时间和精力。下面，我们就来了解一下JS都市小游戏的特点和玩法。

首先，JS都市小游戏的特点在于其独特的场景和主题。这些游戏的场景往往以都市生活为背景，包括了市区公园、街道巷口、商场超市等等。这些场景与玩家的日常生活息息相关，因此能够更好地引起玩家的兴趣和共鸣。同时，这些游戏的主题也非常多样化，有的是以消除类为主，有的则是以冒险探索为主。玩家可以根据自己的喜好来选择不同的主题和场景进行游戏。

其次，JS都市小游戏的玩法十分简单易懂。这些游戏往往以点击、拖拽等基本操作为主，玩家只需要用鼠标或手指轻轻一点就能够完成操作。同时，这些游戏的规则也非常简单明了，通常只需要完成特定的任务或达到一定的得分即可获得胜利。由于这些游戏的玩法简单，因此适合各个年龄段的玩家进行游戏。

最后，JS都市小游戏的优势在于其随时随地的玩法。这些游戏可以在任何时间、任何地点进行游戏，只需打开手机或电脑，就能够迅速进入游戏界面。而且，这些游戏通常不需要太长的游戏时间，玩家可以在短暂的休息时间内进行游戏，放松身心，缓解压力。

综上所述，JS都市小游戏是一个非常有趣的休闲游戏品类，它具有独特的场景和主题、简单易懂的玩法和随时随地的优势。如果你还没有尝试过这些游戏，那么赶紧来试试吧！相信你一定会喜欢上这些好玩的小游戏。

二、如何使用createjs来编写html5游戏

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

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

接下来开始分析代码：

首先引入js文件

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

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, 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===32&&man.jumpNum

man.jump();

}

})

}

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

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

三、js获取游戏控件怎么找

js获取游戏控件方法如下：

//获取坐标位置

functiongetpos(e){

vart=e.offsetTop;

varl=e.offsetLeft;

varheight=e.offsetHeight;

while(e=e.offsetParent){

t+=e.offsetTop;

l+=e.offsetLeft;

假设 obj为某个 HTML控件。

obj.offsetTop指 obj距离上方或上层控件的位置，整型，单位像素。

obj.offsetLeft指 obj距离左方或上层控件的位置，整型，单位像素。

obj.offsetWidth指 obj控件自身的宽度，整型，单位像素。

obj.offsetHeight指 obj控件自身的高度，整型，单位像素。

我们对前面提到的“上方或上层”与“左方或上层”控件作个说明。

“提交”按钮的 offsetTop指“提交”按钮距“tool”层上边框的距离，因为距其上边最近的是“tool”层的上边框。

“重置”按钮的 offsetTop指“重置”按钮距“tool”层上边框的距离，因为距其上边最近的是“tool”层的上边框。

“提交”按钮的 offsetLeft指“提交”按钮距“tool”层左边框的距离，因为距其左边最近的是“tool”层的左边框。

“重置”按钮的 offsetLeft指“重置”按钮距“提交”按钮右边框的距离，因为距其左边最近的是“提交”按钮的右边框。

offsetTop可以获得 HTML元素距离上方或外层元素的位置，style.top也是可以的，二者的区别是：

一、offsetTop返回的是数字，而 style.top返回的是字符串，除了数字外还带有单位：px。

二、offsetTop只读，而 style.top可读写。

三、如果没有给 HTML元素指定过 top样式，则 style.top返回的是空字符串。

offsetLeft与 style.left、offsetWidth与 style.width、offsetHeight与 style.height也是同样道理。

scrollHeight:获取对象的滚动高度。

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

scrollWidth:获取对象的滚动宽度

offsetHeight:获取对象相对于版面或由父坐标 offsetParent属性指定的父坐标的高度

offsetLeft:获取对象相对于版面或由 offsetParent属性指定的父坐标的计算左侧位置

offsetTop:获取对象相对于版面或由 offsetTop属性指定的父坐标的计算顶端位置

event.clientX相对文档的水平座标

event.clientY相对文档的垂直座标

event.offsetX相对容器的水平坐标

event.offsetY相对容器的垂直坐标

document.documentElement.scrollTop垂直方向滚动的值

event.clientX+document.documentElement.scrollTop相对文档的水平座标+垂直方向滚动的量

以上主要指IE之中，FireFox差异如下：

IE6.0、FF1.06+：

clientWidth= width+ padding

clientHeight= height+ padding

offsetWidth= width+ padding+ border

offsetHeight= height+ padding+ border

IE5.0/5.5：

clientWidth= width- border

clientHeight= height- border

offsetWidth= width

offsetHeight= height