专栏首页IT大咖说直接上源码教你做经典HTML5小游戏

直接上源码教你做经典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),作者:web前端开发

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 主流深度学习框架-MXNet、Caffe、TensorFlow、Torch、Theano

    深度学习是机器学习中的一个研究方向,它基于一种特殊的学习机制。其特点是建立一个多层学习模型,深层级将浅层级的输出作为输入,将数据层层转化,使之越来越抽象。这种分...

    IT大咖说
  • 记好这 24 个 ES6 方法,用来解决实际开发的 JS 问题

    页面DOM里的每个节点上都有一个classList对象,程序员可以使用里面的方法新增、删除、修改节点上的CSS类。使用classList,程序员还可以用它来判断...

    IT大咖说
  • 老牌大型门户网站多年经验——搜狐服务架构优化

    内容来源:2017 年 08 月 10 日,搜狐研发中心架构师陈伟在“第二届APMCon中国应用性能管理大会”进行《搜狐服务架构优化实践》演讲分享。IT 大咖说...

    IT大咖说
  • 1分钟读懂HTML5技术

    HTML5学堂:如何来理解HTML5技术是什么呢?我们从几个角度进行阐述,分别是狭义上的HTML5(就技术来讨论技术)、广义上的HTML5(平时技术会议、聊天时...

    HTML5学堂
  • 基于HTML5技术的电力3D监控应用(二)

    上篇介绍了我们电力项目的基本情况,我们选用HTML5技术还是顶着很大压力,毕竟HTML5技术性能行不行,浏览器兼容性会不会有问题,这些在项目选型阶段还是充满疑惑...

    HT for Web
  • Web前端:看完这些终于知道为什么HTML5开启了一个时代

    各大公司的支持 ? ? HTML5的优势 1、HTML5移动优先 随着高端手机(Andriod、Iphone、Ipod、winphone)的盛行,移动互联应用开...

    企鹅号小编
  • HTML5发展历程

    HTML5发展历程 HTML5学堂:HTML5应该说是一个新名词了,由最初的网页设计与制作,发展到WEB前端开发工程师,又演变出HTML5的“新名词”。那么H...

    HTML5学堂
  • 利用本地存储,记录滚动条的位置

    在一定时间范围内,用手机微信打开之前浏览过的订阅号的文章,文章显示出来的是你上次阅读到的位置,而不是从头开始显示。手机微信是怎么知道你文章阅读的位置?前端工程师...

    HTML5学堂
  • 原 荐 基于HTML5技术的电力3D监控应用

    HT_hightopo
  • 【专业技术】使用html5的十大原因

    你难道还没有考虑使用HTML5? 当然我猜想你可能有自己的原因;它现在还没有被广泛的支持,在IE中不好使,或者你就是喜欢写比较严格的XHTML代码。HT...

    程序员互动联盟

扫码关注云+社区

领取腾讯云代金券