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

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,每触碰一个障碍,字母就会少一个。一起来玩玩吧。

4、吃豆人游戏

HTML5吃豆人游戏,画面上有一个吃豆人和一群怪物,你需要控制吃豆人移动吃掉路上的小豆子,一旦吃豆人遇到怪物被吃掉的时候,你就GAME OVER了。

这款HTML5游戏还有一点没完善,就是吃豆人碰到怪物的时候不能被怪物吃掉,有兴趣的同学可以继续把它完善。HTML5游戏开发不仅需要技术,也需要创意。

5、太空战机游戏

这又是一款制作精良的HTML5游戏,该HTML5游戏的主角是一架英勇威武的太空战机,进入游戏后按”Z”键发射子弹,消灭敌机。

该HTML5战机游戏的特点是:

1、游戏画面非常华丽逼真,并且加入声音元素,让游戏更加迷人;2、游戏元素很多,敌机类型和发射子弹类型也很多,让玩家不会枯燥。

6、超级玛丽游戏重体验

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

HTML5真的很强大,HTML5游戏方面更是犀利。

7、城市消消乐

很不错的HTML5消除游戏,同样颜色的建筑相邻,可以将它们进行合成,建筑随之升级。

必要的时候可以点击没有与之相邻的建筑物进行拆除。游戏结束后会有当前分数和历史最高分数,有预留的分享功能待开发,有需要的下手吧!

8、捕鱼达人

非常逼真的捕鱼达人网页游戏源码下载,基于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浏览器即可。

原文发布于微信公众号 - IT大咖说(itdakashuo)

原文发表时间:2018-10-03

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏JadePeng的技术博客

新型前端开发工程师的三个境界 后端开发工程师如何快速转前端

初入软件开发这一行时,当时还没有前后端分离这个概念,所有的开发工程师既能写html,也能写后台服务,随着技术的发展,前后端分离成为趋势,目前团队不少人能熟悉的写...

5066
来自专栏守候书阁

个人分享--web前端学习资源分享

6月份开始出没社区,现在差不多9月了,按照工作的说法,就是差不多过了三个月的试用期,准备转正了!一般来说,差不多到了转正的时候,会进行总结或者分享会议!那么今天...

4502
来自专栏互联网杂技

一个后端程序员的前端之路

在我还在上大学的时候用 servlet 写 java web 的程序,那个时候想要在网页判断用户的输入提交,发现需要一种叫 JavaScript 的语言,一开始...

3445
来自专栏静晴轩

Vue Webpack 组件化开发实践

两千年余前,子贡问为仁,子曰:“工欲善其事,必先利其器。居是邦也。事其大夫之贤者,友其士之仁者”——语出《论语·卫灵公》。时隔这许久,欲问从业者,何以堪高效之为...

3655
来自专栏司想君

2017年前端开发手册一-2016前端技术回顾

2017年前端开发手册公布了,从今天开始陆续为大家送上翻译文章。每日一篇,今天是第一篇,是作者对2016年前端圈的一次技术回顾。 PS:附上一首目前金曲榜第...

3335
来自专栏数据小魔方

图表不仅要看外表,而且要看气质

今天要跟大家聊聊另一款创意图表的新玩儿法——创意百分比图表 ▽ 在这个看脸的社会里 评价一个人不仅要看气质 而且还要看外表 人类尚且如此 图表也应如此 今天的...

2895
来自专栏知晓程序

朋友圈秀操作时间到!有了这个小程序,还怕别人不给点赞?

1144
来自专栏腾讯大讲堂的专栏

如何快速提升设计感

导语 | 好的设计原则是能被所有人掌握并运用的。本文列出了一些目前应用广泛又比较基础的设计实战窍门,掌握它们之后或许你能让你的设计朋友刮目相看呢! 如果你不相...

3716
来自专栏Fundebug

ReactJS vs Angular 5 vs Vue.js - 哪个框架更好?

译者按: 在全球大范围看,React和Angular依然遥遥领先,Vue.js这位后起之秀还需努力做到全球化!

1956
来自专栏无原型不设计

iPhone X的UI设计技巧

以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具。 果粉们翘首以待的iPhone X终于开始预售了!同样满怀...

2904

扫码关注云+社区

领取腾讯云代金券