分享几个令人震撼的JS和HTML5游戏

或许你对网页游戏仅仅停留在Flash的时代,认为只有Flash才能做出非常绚丽的游戏特效。那么今天就打破大家的这个观念,一起来看看用Javascript和HTML5实现的网页游戏,这些游戏个人认为做得已经非常棒了,感谢这些游戏的作者。

1、Javascript坦克大战游戏

坦克大战是一款非常经典的休闲小游戏,相信很多朋友都玩过,但是Javascript重写的坦克大战你可能没有见过哦。下面大家就一起来体验一下Javascript版的坦克大战游戏。

image

2、HTML5超级玛丽游戏

超级玛丽也是一款非常经典的游戏,今天,它也将以HTML5重新展现你的面前。HTML5的力量让超级玛丽给人以不一样的感觉,但却又让人重新回到了童年的欢乐之中。下面提供HTML5版超级玛丽游戏的在线试玩和源码下载。

请用以下支持HTML5的浏览器:Firefox、Chrome(效果最佳,最流畅,推荐)、IE9

方向键:移动   S键:跳跃/进入   A键:快跑/射击

image

3、HTML5太空战机游戏

这是一款基于HTML5技术的太空战机游戏,这个HTML5游戏场景逼真,而且还有不错的游戏配音。下面提供这个游戏的在线试玩和源码下载。

游戏比较庞大,加载需要一段时间,当然请用支持HTML5的浏览器来玩(IE9,firefox,chrome,safari)

上下左右方向键控制方向,z发射,p暂停游戏

image

4、HTML5斯诺克桌球游戏

这是一个用HTML5实现的斯诺克桌球游戏,该游戏采用了较为简单的斯诺克规则,游戏画面颇为真实,让玩家似乎真正进入了一场斯诺克桌球比赛之中,一起来体验一下吧。

image

5、HTML5俄罗斯方块游戏

俄罗斯方块游戏相信大家都玩过,的确是堪称一款古老却又经典的游戏了。今天要介绍的这款正是用HTML5技术重写的俄罗斯方块游戏,HTML5真的非常强大,下面一起来看看这款游戏吧,有源码学习哦。

上方向键或者鼠标左击为翻滚方块,其他左右下均为方向控制

image

6、Google吃豆人游戏(pacman)

这是之前Google在首页Logo上展示的一款吃豆人(pacman)游戏,现在将游戏代码整理了一下分享给大家,提供在线试玩和源代码下载。

image

7、Javascript网页破坏游戏

这是一个神奇的游戏,它以三角战斗机为核心武器,以破坏网页为目的,手段极其卑劣,杀伤力极其威猛,所到之处,一毛不拔。而且指挥这场战斗的司令员十分轻松,只要将以下一段JS代码放在浏览器中执行便可激活这场战斗。

打开一张需要破坏的网页,将以下代码拷贝到浏览器地址栏中,回车,即会出现三角战机,控制方向键移动战机,空格发射。

javascript:var s = document.createElement(‘script’); s.type=’text/javascript’; document.body.appendChild(s);s.src=’http://erkie.github.com/asteroids.min.js‘; App.followOne(‘1473612611’,this); void(0);

image

分享6个非常酷的图片特效(HTML5和jQuery)

在网页世界里,图片毋庸置疑扮演着非常重要的角色。然而我们平时看到的一些图片都只是静态的,或者是一些gif动画图片,今天我向大家分享6个超级震撼的网页图片特效,其中有基于jQuery的,也有基于HTML5的,效果非常的棒。

1、CSS3人物行走动画

这是一个完全用CSS3配合图片实现的人物行走动画,没有用一行JS代码,一起来看看吧,这个行走动画是不是很犀利呢?注意:请用版本比较高的Firefox和Chrome浏览器观看此动画。

2、CSS3机器猫

这是一个用纯CSS3画出来的机器猫,没有加一张图片。值得大家注意的是,这只CSS3机器猫的眼睛还是会动的哦。

3、jQuery乌鸦飞行动画

这是一个完全由jQuery控制的乌鸦飞行动画,通过对飞行参数的控制,乌鸦以不同的方式展翅飞翔,非常有爱。

4、HTML5像素图片动画特效

这是一个基于HTML5技术的图片动画特效,该动画将一张100*100像素的gif图片切合成一个个像素然后随着鼠标的点击,这一个个像素便会分散和聚合,很让人震撼。

5、HTML5绘制人脸特效

这是利用HTML5实现的人脸绘制程序,该人脸绘制程序使用方向键选择人脸的具体信息(上下键选择面部位置,左右键切换某个面部),由于是在Canvas画布上绘制,效果令人十分惊讶。

6、jQuery结合CSS实现的右上角翻页效果

曾经在QQ空间看到过一种广告的展现形式,那就是在页面右上角悬浮一个页角,等你鼠标移上去就像翻书一样把页面展开来,达到显示广告的目的,这种方式对用户来说比较友好,不用强制性去看广告。那么,这种翻页效果是如何实现的呢?今天我就要给大家分享如何实现这种翻页效果。

以上这些图片特效希望大家能喜欢。

腾讯发布Web版“海纳”应用搜索,通过自然语言搜索App

内部人士透露,腾讯已经上线了Web版海纳应用搜索(但是还没有对外宣布),允许用户在网页端通过自然语言搜索App,目前Web版海纳已经可以访问。

腾讯官方对海纳的介绍是专门为用户提供移动应用搜索服务的智能搜索引擎,专注于App搜索以及根据搜索行为的应用推荐,主要满足用户自然语言的搜索需求,目前已经与数十家移动应用商店达成合作。以前搜索应用你可能需要知道这个应用的名字,但是现在你只需要告诉搜索引擎你想要什么样的功能就可以,比如你可以搜“听歌”、“编辑照片”、“看电影”等很自然的关键词,然后你就得到了相应的App的名字和介绍。

从海纳首页可以看出,它同时也支持和其他移动应用商店一样的排行榜、分类目录、装机必备等栏目。现在可以说,腾讯终于进入群雄混战的移动应用商店市场了,以类似去哪儿进入订酒店市场一样的方式。

在网页搜索时代腾讯没有办法与百度竞争,但是未来到底是网页的天下,还是App的天下,现在还没办法定论。可以确定的是,百度在移动应用搜索方面刚刚起步,相比腾讯基本也没什么优势。所以腾讯还是非常有机会在这个App搜索领域成为第一的。

目前海纳还只支持搜索Android应用,但是内部人士透露8、9月份他们就将支持iOS应用搜索。

据说腾讯之前还买下了haina.com和haina.net域名。

为 Web 设计师准备的 32 个有用的 CSS3 教程

很有用的 CSS3 教程来提升你的 Web 设计技能。

 

1. Circle Navigation Effect With CSS3to Build An Awesome

circle navigation effect with css3to build an awesome

2. CSS3 Signup Form

css3 signup form

3. Create An Animated 3d Bar Chart Using CSS3

create an animated 3d bar chart using css3

4. Beautiful Photo Stack Gallery With JQuery and CSS3

beautiful photo stack gallery with jquery and css3

5. Thumbnail Proximity Effect With JQuery and CSS3

thumbnail proximity effect with jquery and css3

6. How To Make An Awesome Cufonized Fly-Out Menu With JQuery and CSS3

how to make an awesome cufonized fly-out menu with jquery and css3

7. Stylish CSS3 Progress Bars

stylish css3 progress bars

8. Create a Unique Contact Form With CSS3 Transitions

create a unique contact form with css3 transitions

9. Direction-Aware Hover Effect With CSS3 and JQuery

direction-aware hover effect with css3 and jquery

10. Create An Audio Player in HTML5 &Amp; CSS3

create an audio player in html5 & css3

11. Pure CSS3 LavaLamp Menu

pure css3 lavalamp menu

12. Rotating Words With CSS Animations

rotating words with css animations

13. Accordion With CSS3

accordion with css3

14. Slideshow With a Parallax Effect Using CSS3

slideshow with a parallax effect using css3

15. CSS3 Hover Effects

css3 hover effects

16. Filter Functionality With CSS3

filter functionality with css3

17. Apple-Like Login Form With CSS 3D Transforms

apple-like login form with css 3d transforms

18. CSS3 Breadcrumbs

css3 breadcrumbs

19. CSS3 Ordered List Styles

css3 ordered list styles

20. Quickly Build a Swish Teaser Page With CSS3

quickly build a swish teaser page with css3

21. Creating a Marble Style CSS3 Navigation Menu

creating a marble style css3 navigation menu

22. Create Your Portfolio Using HTML5 Canvas and CSS3 Transitions

create your portfolio using html5 canvas and css3 transitions

23. Pure CSS3 Cycling Slideshow

pure css3 cycling slideshow

24. Original Hover Effects With CSS3

original hover effects with css3

25. Page Transitions With CSS3

page transitions with css3

26. Orman Clark’S Vertical Navigation Menu: the CSS3 Version

Orman Clark'S Vertical Navigation Menu: the CSS3 Version

27. Responsive Content Navigator With CSS3

responsive content navigator with css3

28. Animated Buttons With CSS3

animated buttons with css3

29. How To Create Some Cool CSS3 Buttons

how to create some cool css3 buttons

30. Animated Content Tabs With CSS3

animated content tabs with css3

31. CSS3 Pricing Table

css3 pricing table

32. How To Create a CSS3 Dropdown Menu

how to create a css3 dropdown menu

兄弟割席:HTML5标准制定组织分裂

最新消息:HTML5标准制定组织WHATWG与W3C因为理念上的差异分裂。这意味着以后将会有两个版本的 HTML5:即”标准版”和”living”版(活标准)。随着新技术的加入,WHATWG宣布为HTML制作新的“living”标准。WHATWG认 为W3C做法过于缓慢,W3C的这种缓慢的制定方式将会耗费更多的时间。实际上W3C或多或少的放弃了HTML,04年时便把HTML交给WHATWG, 把更多的注意力放在XML尤其是XHTML上。但更多的用户还是想继续使用HTML,只不过希望有所改进罢了。

WHATWG工作人员在公告中写道:

近来,WHATWG和W3C在HTML5标准上的分歧越来越大。WHATWG专注于发展标准的HTML5格式及相关技术, 并不断的修正标准中的错误。而W3C则想根据自己的开发进程制作出“标准版”HTML5标准,颁布之后不容许更改,错误也无法修正,所以我们决定各自研 发。

WHATWG和W3C自2004年便开始合作,07年时W3C还采用WHATWG的HTML5规范。但多年来这两个组织都有技术争议,现在是彻底分 道扬镳了。W3C正计划制定一个简单而清晰的标准,这个标准被WHATWG当成是“living”标准的“快照版”。由于摆脱了W3C的程序步 骤,WHATWG的“living”标准制定很可能会提速。

htmllivingbanner

前HTML5标准的编写人员Ian Hickson说:“living版可以根据使用者的反馈不断改进,所以我们建议浏览器开发者来使用。而W3C版本一旦制定之后出现了错误也没法修正。但是并不是说标准版不好,WHATWG灵活的更新可以让用户获得更好体验,W3C的标准版在专利授权、合同条款等不允许随意变更的地方更有优势。”

总的来说对于HTML5的发展开发者并不一定是个坏消息,虽然HTML5标准的概念变得复杂了些,但HTML5的标准也没有颁布过。笔者猜测 Chrome和Firefox会更愿意尝试WHATWG的新标准,而微软会具体观察哪一个标准更符合他们的产品开发利益再做出选择。早在今年4 月,HTML5的标准就开始发生变化,Apple公司的工程师说正在为W3C编制标准,而微软的工程师则寻找新的编制人员。

事已至此,从现在开始,你要考虑哪一个规范的HTML5更适合你了。