阅读(4997) (1)

直接上源码教你做经典HTML5小游戏

2016-11-07 14:08:51 更新

HTML5因其跨平台性的特质已逐渐成为网络游戏开发的热门新技术。过去,flash多媒体应用可以用来构建线上游戏,也是小游戏的主流形态,但是随着HTML5的到来,改变了线上游戏的构建方法,用HTML5制作游戏相比flash更加灵活方便。你还记得水果忍者吗?尤其在iphone流畅的ios系统下运行起来非常能缓解压力,几乎每个上班族和手机控都装过这个游戏,现在已经将其改版成HTML5,并将其开源,下面就为大家奉上切水果和其他精选HTML5小游戏源码,enjoy!


1、切水果

自从iOS和Android兴起以来,水果忍者游戏一直是这两个平台上面相当热门的游戏,很多玩家都会在工作学习之余切切水果,打发时间。今天,HTML5网页版水果忍者游戏同样给大家带来了不同的感觉,赶紧来试试这款好玩的HTML5网页版水果忍者游戏吧。


切水果


2、中国象棋

棋类游戏在桌面游戏中已经非常成熟,中国象棋的版本也非常多。今天这款基于HTML5技术的中国象棋游戏非常有特色,我们不仅可以选择中国象棋的游戏难度,而且可以切换棋盘的样式。程序写累了,喝上一杯咖啡,和电脑对弈几把吧,相信这HTML5中国象棋游戏的实现算法你比较清楚,可以打开源码来研究一下这款HTML5中国象棋游戏。

中国象棋


3、奇葩版Flappy Bird,HTML5 Flappy Text游戏

前段时间Flappy Bird游戏那是相当的火,有无数年轻人为之疯狂,这里我们要分享一款奇葩版的Flappy Bird——HTML5 Flappy Text游戏,用若干个字母来代替bird,每触碰一个障碍,字母就会少一个。一起来玩玩吧。

Flappy Bird

4、吃豆人游戏

HTML5吃豆人游戏,画面上有一个吃豆人和一群怪物,你需要控制吃豆人移动吃掉路上的小豆子,一旦吃豆人遇到怪物被吃掉的时候,你就GAME OVER了。这款HTML5游戏还有一点没完善,就是吃豆人碰到怪物的时候不能被怪物吃掉,有兴趣的同学可以继续把它完善。HTML5游戏开发不仅需要技术,也需要创意。

吃豆人

5、太空战机游戏

这又是一款制作精良的HTML5游戏,该HTML5游戏的主角是一架英勇威武的太空战机,进入游戏后按”Z”键发射子弹,消灭敌机。该HTML5战机游戏的特点是:1、游戏画面非常华丽逼真,并且加入声音元素,让游戏更加迷人;2、游戏元素很多,敌机类型和发射子弹类型也很多,让玩家不会枯燥。

太空战机

6、超级玛丽游戏重体验

还记得小时候一起玩过的超级玛丽冒险游戏吗?是的,那是我们小时候很火的一款游戏,今天老外利用HTML5技术让超级玛丽可以在网页上跑了,HTML5版的超级玛丽虽然没有原版的功能强大,但是如果你有兴趣,完全可以把它写完善了。HTML5真的很强大,HTML5游戏方面更是犀利。

超级玛丽


7、城市消消乐

很不错的HTML5消除游戏,同样颜色的建筑相邻,可以将它们进行合成,建筑随之升级。必要的时候可以点击没有与之相邻的建筑物进行拆除。游戏结束后会有当前分数和历史最高分数,有预留的分享功能待开发,有需要的下手吧!

城市消消乐


8、打地鼠

游戏功能: 
1.帮助界面 
2.游戏预备开始 
3.5种不同地鼠的随机出现 
4.关卡设置,当然有计时条显示 
5.失败和通过关卡设置 
6.音效设置 该游戏兼容Chrome和FF(效果最不错),但IE有问题(声音也播不出)。。。

打地鼠


9、捕鱼达人

非常逼真的捕鱼达人网页游戏源码下载,基于HTML5和JS特效实现,游戏动画非常的炫,不卡顿,大家有时间的完全可以学习学习,HTML5做游戏跟客户端其实是各有各的优势,做到平衡就好。

捕鱼达人



怎么运行HTML 5游戏的源代码

HTML5游戏是通过html+javascript+css技术开发的游戏,属于网页游戏,可以运行在HTML5的网页浏览器中。

运行HTML5游戏,需要一个支持HTML5的网页浏览器,比如IE10或11,google的chrome浏览器,火狐firefox,百度浏览器,或者UC,QQ浏览器,猎豹浏览器。早期的IE9以前的版本是不行的。浏览器可以到百度搜索下载,然后安装。使用方法就是普通的上网。

下载的HTML5游戏文件解压后,文件夹中会有一个后缀为html的文件,应该是在根目录下。其他文件可能有js后缀,css后缀,或者图片,请保持相对位置不能动。

然后下面你就需要运行那个html文件了:

方法1:
你可以打开浏览器,将html文件拖拽到浏览器中。

方法2:
也可以在文件夹中选中html文件,点右键,在菜单选择“打开方式”,然后选择火狐或Chrome浏览器即可。

源代码