本文目录
一、js编写的小游戏有哪些
有是有,但并不是很多,而且都是贪吃蛇之类的,非常小的游戏,即便是页游也一样。
能运行在浏览器端的语言,确实只有JS,但在开发阶段,却并不一定要使用JS写。而是用其他语言写,直接使用JS写游戏,实在太自虐了。
JS本身的缺点非常严重,如果只是写DOM的话,其实并没什么感觉,因为代码量太少。
但如果写类似游戏这种复杂逻辑,代码量一变大,瞬间就令人崩溃了。弱类型,回调地狱问题,即便将来版本更新到ES10,也不可能完全解决。
如果你看过一个游戏项目的JS源码,你会发现一个非常恐怖的现象。在代码的最底部,有几百个,甚至几千个大括号。。。。所有大型程序的JS源码,拉到最底部,大概都是长这个样子的:
}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}.Listen(127.0.0.1)}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}
大括号的数量还必须绝对精准,少一个,或者多一个,都无法正常运行。。。这就是平时所说的回调地狱。由于JS项目总是函数里面套函数,层层相套,这叫做回调函数。层数一多,就算你是N年的老手,也照样懵比。。。。
所有的游戏项目,都比网页特效的代码量要多的多。。。比如写一个斗地主,就需要4,5万行的JS代码。。。。。最底部的大括号数量,轻松上千。。。。
弱类型的缺陷更严重,但由于解释起来篇幅会很长,所以这里就不提了。
所以为了避开JS本身太多的语法缺陷,一般游戏项目,都是使用其他语言编写,最后再通过一些手段,编译成JS。。。就如同你用一般编程语言编写,最终运行的时候,只有1和0的道理一样。。。在制作页游的时候,一般都是用强类型语言编写,最后开发完成之后,把那些强类型语言编写的代码,通过一些手段“转换”成JS代码。
“转换”成JS代码的方法有很多,其中在游戏行业比较主流的,一共有三种:
1,ActionScript语言,简称AS语言。也就是当年FLASH使用的那个语言。。。当年也曾辉煌过,后来随着FLASH的没落而逐渐没落。。。但有很多H5游戏引擎,也同样使用AS语言。比如LayaAir引擎等。
2,TypeScript语言,简称TS语言。由微软出品,微软和谷歌共同维护的一门完全符合ECMA标准的语言,可以视作JS的超集。超集这个概念怎么理解呢?就是“所有的JS语言,同时也是TS语言,而TS比今天的JS,更像未来的JS”。就比如目前的JS版本只出到了ES6或ES7。那么ES10是啥样?现在并没人见过,连ECMA组织也不知道。。。但有一点可以确定的是,它和TypeScript长的很像。而TS是包含JS的。换言之,JS本身也可以视作是TS的一部分。只是TS里的内容要远比JS多的多。这语言主要有两种用法,一是像AS语言一样结合游戏引擎,比如cocos creator,白鹭等引擎都支持。还有一种用法就是。。。结合Three.JS之类的库,完全按照JS本身的用法去使用。
3,C#语言。虽然JS得名字里面带个Java。但和它长的最像的语言,却并不是JAVA,而是C#。简单说就是:“JS的名字和JAVA有多像,语法就和C#有多像”。所以C#也比较容易转换成JS。但这并不是重点,重点是有一个超级牛的游戏引擎,是使用C#作为开发语言的。就是大名鼎鼎的Unity3D。Unity3D可以直接把C#编写的游戏项目,虚拟现实项目等,编译发布到WebGL。
二、我想找一些小游戏
一.体育类游戏下载地址:
1.NBA LIVE2005:
2.FIFA2005:
www.fujianese.cn/game/Article_Show.asp?ArticleID=1326
3.FIFA2003:
4.NBA2004:
5.NBA2006
6.实况NBA2003
7.欧洲冠军杯2004-2005
8.沙滩足球2003
二.格斗类游戏下载地址:
1.战国美少女2-春风之章:
2.侍魂零:
3.侍魂2:
4.七龙珠Z天下第一武道大会3
5.拳皇2002
6.拳皇KOF2003
7.猫和老鼠3D格斗2005
8.拳皇 2005
9.拳皇KOF98
.广告.org/rom/neogeo/KOF98.ZIP
10.真侍魂霸王丸地狱变
三.战略类游戏下载地址:
1.近距离作战2:
3.红色警戒95版:
4.帝国时代2之征服者:
5.红色警戒2尤里的复仇:
6.红色警戒2共和国之辉:
7.英雄无敌3死亡阴影:
8.魔法门之英雄无敌4:
9.地球帝国:
10.三国志9:
11.魔兽争霸1:
12.魔兽争霸2:
13.魔兽争霸3:
14.幻世录2魔神战争:
15.傲视三国:
16.皇帝:
游戏娱乐&subclass=即时策略&code=0801
17.命令与征服:
18.沙丘魔堡2000:
19.家园:
20.模拟城市2000:
21.突袭:
22.盟军敢死队
23.盟军敢死队使命召唤:
24.盟军敢死队深入敌后:
25.盟军敢死队2勇往直前:
26.盟军敢死队3目标柏林:
27.加勒比海盗
28.三国霸业2
29.战争时代
30.红色警戒2000激光时代
31.地球时代
32.国家崛起
33.帝国时代II征服者
34.红警2之中国崛起
35.星际争霸1.08完全正式版
... www.game.jss.cn.exe
36.库玛战争
37.神话3苍狼时代
... ultiplayer_demo.zip
38.猎杀潜航II简体中文版
39.潜艇大战 2.33
40.三国志10完全正式日文版
41.三国群英传2完美硬盘版
42.星际争霸1.10硬盘版
43.幻世录Ⅱ魔神战争
44.横扫千军
45.铁甲风暴
46.绝地风暴
47.绝地风暴2
48.红警3
49.文明3
四.角色扮演类游戏下载地址:
1.天龙八部:
2.新神雕侠侣:
3.剑侠情缘2:
4.剑侠情缘2仙侣奇缘:
5.仙剑奇侠传Dos版
6.暗黑破坏神21.09:
7.轩辕剑3外传天之痕:
8.地下城守护者1:
9.地下城守护者2:
游戏娱乐&subclass=
游戏娱乐&subclass=即时策略&code=0801
10.魔法门6:
魔法门-6.exe
11.暗黑破坏神2毁灭之王:
12.仙剑奇侠传2:
13.阿猫阿狗:
14.游戏王5双重恶魔:
15.游戏王地牢方块妖怪:
www.1dgame.com/soft/2724.htm
16.游戏王混乱之力海马复仇:
www.1dgame.com/soft/2877.htm
17.屠龙战记
... BJ%5D%5B2CD%5DA.rar
... BJ%5D%5B2CD%5DA.rar
18.恶魔城X月下夜想曲中文版
... 7X%D2%B9%5BC%5D.rar
19.暗黑破坏神1.10中文完美硬盘版
20.暗黑破坏神
21.龙狼传完整版
22.神偷3-致命黯影
23.天龙八部之六脉神剑
24.浣花洗剑录
25.明星餐厅
26.仙剑3外传
27.幻想三国志2
28.新绝代双骄3
五.射击类游戏下载地址:
1.自由力量VS第三帝国:
2.抢滩登陆2002:
3.三角洲特种部队3:
4.荣誉勋章:
5.荣誉勋章诺曼第大空降:
6.英雄萨姆:
7.半条命:
8.CS1.3:
9.CS1.4:
10.CS1.5:
11.Podbot2.5:
12.抢滩登陆战2000:
13.抢滩登陆战2002:
14.雷神之锤2:
15.雷神之锤3:
16.重返德军总部:
17.Duke 3d:
18.三角洲部队:
19.冷战冲突
20.CS1.6
21.三角洲部队2
22.抢滩登陆战2004
23.雷电III
24.CS 2.0
... t/CSCN_CSSource.exe
25.血战上海滩
... nghaiDragonDemo.zip
26.杀手:代号 47
27.终极刺客2:沉默杀手
28.杀手3契约完美破解版
六.动作类游戏下载地址:
1.分裂细胞混沌法则:
2.恐龙危机2:
3.3D魂斗罗威力扫荡:
4.GTA3:
5.三国群英传2:
6.合金弹头5:
7.龙吼:
8.红楼梦之十二金钗:
9.炎龙骑士团:
10.英雄本色:
11.合金弹头4:
12.VR特警2:
13.古墓丽影1:
14.古墓丽影2:
15.古墓丽影3:
16.古墓丽影4:
17.古墓丽影5:
18.侠客岛:
19.超时空英雄传说:
20.上帝也疯狂3:
21.卡曼奇4:
22.三国群英传3:
23.吸血迷情
24.烈火雄心
25.交通英雄
26.阿尔法特战队
27.混沌都市(Urban Chaos)
28.隐藏与危险
29.特勤机甲队4
30.X-Plane V8.04 RC2
31.侠盗车手:罪恶都市
32.X-COM战警
33.波斯王子:武者之心
34.特洛伊战争
35.三国群英传3
36.美国陆军
37.LHX武装直升机
38.生化危机之枪下游魂中文版
39.生化危机3中文版
40.恐惧杀手:杀出地狱单人版
... killer_sp_demo3.zip
41.夺还机构
42.龙珠Z-悟空的遗产2
43.索尼克英雄PC版
44.敌后敢死队
45.恐龙危机3
46.生化危机2
47.三国群英传4
48.波斯王子2
www.05sun.com/Software/Catalog247/18192.html
www.05sun.com/Software/Catalog247/18056.html
www.piaodown.com/down/soft/22473.htm
www.fixdown.com/soft/21789.htm
49.波斯王子
www.05sun.com/Software/Catalog247/18191.html
www.piaodown.com/down/soft/20855.htm
七.赛车类游戏下载地址:
1.3暴力摩托改装版2004:
2.极品飞车地下狂飙2:
3.极品飞车7地下狂飚:
4.极品飞车6热力追踪2
5.摩托车手
6.极品飞车5
7.汽车赛 V2.11
8.极品飞车7午夜狂飙
9.暴力摩托2002简体中文版
10.山脊赛车4
11.极品飞车9:最高通缉
八.休闲类游戏下载地址:
1.MM大富翁:
2.百战天虫:
3.找别扭:
4.DDR跳舞机
5.抗日地雷战
6.空当接龙
7.终极坦克大对决
8.3D撞球游戏
... dpool_installer.exe
9.炸弹人传说
10.坦克大决战 2.0
11.小游戏
www.4399.com
www.hao123.com
12.恋爱盒子
九.网络类游戏下载地址:
1.欢乐潜水艇:
2.石器时代5.0:
3.传奇:
? id=6984
4.天堂:
5.魔力宝贝3.0-龙之传说:
6.精灵1.754:
7.童话:
8.传奇3:
9.拳皇online:
10.百战天虫online:
11.马场大亨online:
12.劲歌团劲舞团
13.流星蝴蝶剑
www.MBS.com.cn|
十.游戏下载网站:
1.七日联盟下载中心
www.55267.com
2.三湘时空下载中心
3.傻猫娱乐网
4.八杯酒娱乐网
www.babeijiu.com
5.易通游戏网
6.福建人-游戏网
7.飞游下载网
8.红薯网络
9.搜游
10.掌机之王
11.游戏下载站
12.VeryCD
http:\\www.verycd.com
13.精英游戏网
14.兔游城FC游戏
15.游戏吧
16.西部游戏网
17.悠虎游戏网
18.游戏第一下载
19.黄金FPS联盟
20.舞天游戏
21.214游戏
22.电玩巴士-GBA
23.真心模拟
24.掌机地带
25.中国掌机基地
26.PS2模拟器
27.ZONE
28.凯伟模拟器
29.ROM的传人
30.模拟天下
31.模拟游戏365
32.EMUSUN
网址:
33.EMUCHINA
网址:?
34.WRG GBA News
网址:
35.RomNation
网址:
36.可可枫模拟小屋
网址:
37.街机驿站
网址:
38.CoolROM
网址:
39.EmuAsylum
网址:
40.华夏娱乐网
网址:
41.PlayAgain
网址:
42.原点工作室
网址:
43.电玩中间站
网址:
44.飞云模拟网
网址:
45.中华模拟器联盟
网址:
46.格斗中国
网址:
47.轻风模拟站
网址:
48.专业射击游戏联盟
网址:
49.OkGet软件园
网址:
50.我爱游戏
网址:
51.EMU MAX
网址:
52.龙腾网络
网址:
53.唱吧
网址:
54.丁奕信息港
网址:
三、如何开发一个简单的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!