20个鼓舞人心的HTML5网页游戏设计欣赏

2016-02-16 20:02 28 1 收藏

想不想get新技能酷炫一下,今天图老师小编就跟大家分享个简单的20个鼓舞人心的HTML5网页游戏设计欣赏设计作品,一起来看看吧!超容易上手~

【 tulaoshi.com - 平面设计 】

Flash多媒体应用可以用来构建线上游戏,但是随着HTML5的到来,改变了线上游戏的构建方法。HTML5 游戏设计是近期设计师和开发者中最热门的话题。

小游戏终于可以尝试除了Flash以外的载体咯,迎接HTML5所带来的新世界,HTML5的好处是,可以无需插件。

本文收集了20个HTML5游戏,不妨试玩一下吧。

Grav Suit

来自深空的恐惧,面对深邃的未知,陷入种种神秘的遗迹残骸。到底身处何境?无重力下无处不在的危险。

你深吸了一口气,能保命的只有你的宇航服。你能存活下来吗?

20个鼓舞人心的HTML5网页游戏设计欣赏,PS教程,图老师教程网

A Grain of Truth

真理的果实,波兰的Rudowscy兄弟打造的游戏,非凡的冒险游戏,手绘图像异常美丽,可玩性极高。游戏中需要帮助一个年轻的旅途者寻找先贤一个和时间同样寿命漫长的智者,他知晓世界上的一切。jQuery打造,这个游戏告诉我们,好的游戏不需要技术上有多么复杂,可玩性好便可以了。

20个鼓舞人心的HTML5网页游戏设计欣赏,PS教程,图老师教程网

Fantastic Interactive Basketball

有趣的篮球游戏,35秒投篮时间限制。在不同的地点精确得分吧!

20个鼓舞人心的HTML5网页游戏设计欣赏,PS教程,图老师教程网

Angry Birds Chrome

用Google Chrome玩线上版的愤怒的小鸟。

20个鼓舞人心的HTML5网页游戏设计欣赏,PS教程,图老师教程网

Magician Rescue Fairy

解救气泡中的仙女。

20个鼓舞人心的HTML5网页游戏设计欣赏,PS教程,图老师教程网

Front Invaders

射杀这些IE恶魔吧,端好你的HTML5发射器。我怀疑作者对IE6有着深仇大恨

20个鼓舞人心的HTML5网页游戏设计欣赏,PS教程,图老师教程网

HexGl Beta

未来派风格的赛车游戏,使用了HTML5,JavaScript以及WebGL技术。

20个鼓舞人心的HTML5网页游戏设计欣赏,PS教程,图老师教程网

Agent 008 Ball

非常酷的HTML5台球游戏。

20个鼓舞人心的HTML5网页游戏设计欣赏,PS教程,图老师教程网

BioLab Disaster

2d横向风格游戏,使用了HTML5以及JS

20个鼓舞人心的HTML5网页游戏设计欣赏,PS教程,图老师教程网

Luxahoy

有趣的格斗游戏,目标是用加农炮射击对手,蓄力和角度要掌控好

20个鼓舞人心的HTML5网页游戏设计欣赏,PS教程,图老师教程网

Canvas Defence

保卫领土,狠狠打击侵犯者。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

20个鼓舞人心的HTML5网页游戏设计欣赏,PS教程,图老师教程网

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

Bejeweled

宝石连连看(不过至少3个)

20个鼓舞人心的HTML5网页游戏设计欣赏,PS教程,图老师教程网

HTML5 Helicopter

从左向右的横轴游戏,你的目标是驾驶好飞机,别撞墙!左键来触发推进器,保持直升飞机盘旋上升,松下左键,直升飞机就会降落。

20个鼓舞人心的HTML5网页游戏设计欣赏,PS教程,图老师教程网

ClickPong

简单而又上瘾的游戏,对自己的投球技术有自信吗,来试一下吧。

20个鼓舞人心的HTML5网页游戏设计欣赏,PS教程,图老师教程网

BananaBread

3D第一人称视角,采用了Cube 2:Sauerbraten的引擎(用C++以及OpenGL编写),采用了Emscripten将其汇编为JS以及WebGL,这样就能适合现在的网页浏览器了。

20个鼓舞人心的HTML5网页游戏设计欣赏,PS教程,图老师教程网

Pirates Love Daisies

塔防游戏,JS+HTML5

20个鼓舞人心的HTML5网页游戏设计欣赏,PS教程,图老师教程网

Sketchout

效果大赞,很酷的HTML5游戏,将星球从外星人的手底下拯救出来。游戏一共4个难度。

20个鼓舞人心的HTML5网页游戏设计欣赏,PS教程,图老师教程网

Infinite Marios in HTML5

HTML5版的超级玛丽奥游戏。赶紧救公主去吧。

20个鼓舞人心的HTML5网页游戏设计欣赏,PS教程,图老师教程网

Save the Day

简单的动作游戏,在限定的时间内,驾驶直升机营救生还者。使用了Turbulenz开源引擎基于HTML5,能够构建HTML5游戏。支持社交网络接口,WeblGL,以及实时物理效果。

20个鼓舞人心的HTML5网页游戏设计欣赏,PS教程,图老师教程网

Browser Quest

经典、多用户的RPG游戏,像素画风格,由Little Workshop以及Mozilla联合打造。游戏的内容是探索与冒险,获取最高的奖赏与荣誉。

20个鼓舞人心的HTML5网页游戏设计欣赏,PS教程,图老师教程网

来源:http://www.tulaoshi.com/n/20160216/1573236.html

延伸阅读
不知道大家发现没有,近来很多大公司宣传新产品和专题推广的时候,都趋向于使用单页啦。可别小看单页面,少即是多,在这个页面里体现美妙的视觉和精湛的技术,绝对是能够吸引很多访客的眼球滴。 单页网站不会使浏览者感到混乱,查阅关键信息时只需点击或者滑动鼠标,并且你可以将自己最棒的作品置顶居中。接下来将带你体验20个带有视差效果的H...
目前大部分浏览器已经更新换代,并支持新的网站技术,所以网页设计师们开始喜欢使用HTML5和CSS3代码来编写网页,而且越来越流行,就算是国内也有很多网站使用了这些新技术来编写。比如最近迅雷7的下载页就使用了CSS3动画,效果很不错。今天设计达人网分享排版优秀的并使用HTML5+CSS3网页设计作品,有很多地方都值得我们参考和学习哦! 如何获取...
最近半年一直在负责雷霆战机和天天酷跑的项目,以偏品牌建设和创意营销为主,在风格上尝试了手绘的表现形式,这次和大家分享下其中的设计经验。 雷霆战机TVC HTML5 页面 文艺、走心的手绘风格 项目背景 雷霆战机周年庆,项目组为雷霆进行了拍摄了一部品牌短片,围绕整个影片策划了一个HTML5页面对其进行传播。 视频主要内容讲述几个小...
标签: Web开发
HTML5之前,要实现网页元素的拖放操作,需要依靠mousedown、mousemove、mouseup等API,通过大量的JS代码来实现;HTML5中引入了直接支持拖放操作的API,大大简化了网页元素的拖放操作编程难度,并且这些API除了支持浏览器内部元素的拖放外,同时支持浏览器和其它应用程序之间的数据互相拖动。 本文通过一个简单示例,演示HTML5中拖放API的使用...

经验教程

690

收藏

57
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部