分享几个令人震撼的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

绚丽而又实用的jQuery和CSS3导航菜单

我们说导航菜单是网站的一扇门,然而精美便捷的导航更是能让用户方便地游走在网站的各个角落,更重要的是,能让用户牢牢地记住这扇大门,记住这个网 站。所以很多网站设计师对网站导航的设计非常重视。下面我就向大家分享几款个人觉得非常不错的jQuery和CSS3导航,每一款都挺实用的,而且都是开 源的,提供下载源码。一起来看看吧!

1、半透明效果的CSS3和jQuery导航菜单

这是一款基于jQuery和CSS3的导航菜单,该导航有一个特点,就是当你把鼠标移动到每一个菜单项时,旁边空白处就会出现半透明的菜单功能说明图标,这个图标是用CSS3绘制的,再加上漂亮的背景,整个导航显得非常大气,喜欢的朋友分享一下哦。

2、CSS3仿Windows 7的开始菜单

这是一款用纯CSS3实现的仿Win 7的开始菜单。如果我们分解这个Windows 7开始菜单,我们会得到1个div,2个ul列表,1组链接以及一些icon小图标,我们可以一起来看看具体的效果。

3、jQuery动画菜单jStackmenu

jStackmenu是一款基于jQuery的堆栈式动画菜单,当你用鼠标点击那个“爱心”按钮时,jStackmenu菜单就会以堆栈方式弹出或者收拢,并呈现出流畅的动画特效。

4、jQuery右键菜单插件jQuery ContextMenu

jQuery ContextMenu是一款功能强大的网页右键菜单插件,该插件将帮你非常方便地创建右键菜单。你可以指定右击的位置,同时菜单中还可以定单选框和多选框的复合控件,定制非常灵活。

5、银白色的CSS3导航菜单

这是一款纯CSS3制作的导航菜单,这个银白色的菜单在朦胧夜空的衬托下显得格外亮丽。当鼠标滑过导航时,每个菜单项又会呈现不同的效果,整体上,这款CSS3导航菜单非常简单而又具有立体感。

6、CSS3水平导航和垂直导航

这是一款灰色风格的导航,具有水平和垂直的形式,这个导航是由CSS3实现的,所以需要用支持CSS3的浏览器来查看。你可以通过自己修改CSS代码轻松实现漂亮的水平导航和垂直导航。

好了,今天就分享这些,其他的还在收集中,今后再献给大家,当然,我的分享非常希望得到你的支持微笑

Google 发布 Android 4.1 和平板 智能眼镜亮相

旧金山当地时间2012年6月27日上午,Google I/O 2012开发者大会在Moscone Center会议中心开幕。第一天的主题演讲历时2个小时15分钟,介绍了众多Google新产品动态,主要包括Android 4.1 Jelly Bean系统、Nexus 7平板电脑、新增的Google Play服务、云流媒体播放器Nexus Q还有Google的神秘眼镜项目手机演示。

今天第一个揭晓的产品是最新版的Android系统——代号为Jelly Bean的Android 4.1,在介绍Jelly Bean之前,Google产品经理Hugo Barra介绍称在2011年的I/O大会时,有1亿的Android设备,现在已经达到4亿台。同时,现在每天的Android设备激活量达100万 台,1年前为40万台。

Android 4.1 Jelly Bean的主要升级包括,1、在Project Butter项目推进下的明显运行速度提升。2、当手机触摸显示屏幕是,芯片性能能够最大化,加上三重缓冲,可以让视频更流畅。3、Widget插件可以 在移动到不同布局的主界面时自动调整大小。4、改进的语音输入,支持离线语音输入。5、增强的虚拟键盘文本输入,带预示提醒功能。6、增强拍照功能,拍照 之后可以快速分享。7、增强的通知中心,可在通知中心直接回电话。8、自然语义搜索功能,类似Siri。9、强化盲人功能。10、推出PDK开发者套件。

Android 4.1 Jelly Bean将在7月中旬升级,率先支持的迹象包括Galaxy Nexus和摩托罗拉Xoom以及Nexus S,SDK今天允许开发者下载测试。

据介绍,现在Google Play电子市场,软件总数达到50万、软件下载达200亿次。

Google Play电子商城也得到了升级,主要功能包括,1、发布App Encryption,需要Jelly Bean支持。2、智能软件升级,可以只下载增量应用的升级,而不必下载整个新版应用。3、Google Cloud Messages,所有开发者都可免费使用,而且没有任何容量限制 。4、新增杂志和电视节目购买,这是Google Play最大的升级,电视节目可以单集购买,也可以一次性购买整季内容,杂志可以免费试阅14天,并可在手机平板不同设备之间同步。

传言已久的Google平板电脑也最终在今年的Google I/O 2012开发者大会上亮相,大部分参数与之前传言一致。Google Nexus 7由华硕制造,华硕董事长施崇棠也作为嘉宾出席了这次Google I/O 2012开发者大会。

Google Nexus 7硬件主要指标包括:

·7英寸分辨率1280×800像素屏幕,226PPI

·Tegra 3四核处理器

·12核心图形处理器

·120万前置摄像头

·支持WiFi、蓝牙、NFC连接

·电池容量4325mAh9小时HD视频播放

·重量340克

Google Nexus 7是首款将移动版Chrome作为标配浏览器的设备,其8GB版售价为199美元、16GB版售价为249美元,将在7月中旬发布。

主题演讲现场演示包括阅读、游戏、视频等Nexus 7主要应用,发售的Nexus 7平板电脑将附送部分电子书内容,现场演示了3D效果绚丽的游戏画面,同时演示了采用VR-ish虚拟现实的Google地图技术,可以查看室内静物,并支持离线地图查看。

除了Nexus 7,Google这次还推出了另一款硬件产品——多媒体云播放器Nexus Q。Nexus Q是去年谷歌I/O大会上发布的Tungsten计划的最终成果,外观为一个圆形扬声器,但同时也是一款配备了处理器和Jelly Bean系统的Android设备。

Nexus Q配备了功率为25瓦的扬声器,带HDMI和数字音频输出。可通过触摸感应器进行操作,内置1GB RAM和16GB存储空间,采用德仪OMAP处理器。同时在支持WI-Fi、蓝牙、NFC,microUSB。

Nexus Q可以通过Android平板或手机进行控制,也可以自行播放云端内容,其售价为299美元,将从7月中旬开始出货。

Google+用户规模至2.5亿

Google高级副总裁维克·古多塔(Vic Gundotra)介绍Google+发展,用户量已达2.5亿、半数用户每天登录、月活跃用户达1.5亿、活跃用户每天在Google+花费12分钟、在谷歌网站花费60分钟以上。

主题演讲中,维克称很快会推出iPad版的Google+应用。

功能方面,Google+新增在线工具,用于管理邀请,邀请方面新增动画主题。同时,Google+和Google日历和地图整合。另外,推出了全新的时间模式,可以让所有访客分享自己的照片,事件应用则提供了用户在聚会中使用Google+的一种新方式。

Google神秘Glass眼镜项目首度演示

在Google I/O 2012开发者大会首日主题演讲的后半段,Google联合创始人谢尔盖·布林意外登台,佩戴衣服Google Glass。随后介绍了Google的神秘Glass项目。

据Google Glass的设计主管Isabelle介绍,Google Glass的初衷在于让科技使用起来更自然,该项目启动与2年半以前。现在成型的Google Glass具备各种传感器比大部分太阳镜还要轻,里面有内存,有强大的处理器,在一侧还可以触摸,有按键拍照、麦克风、摄像头、传感器、指南针和陀螺仪。

布林在介绍Google为什么要做Glass项目时称有三个原因,1、我们发现如此引人注目。2、这是我们能演示给你们,但是你不能体验的。3、我们有很多出色的小组尝试各种有趣的想法。

Google Glass向Google I/O 2012开发者开发预定,预售价格为1500美元,将于明年年初发货。

Google I/O 2012开发者大会内容丰富,涵盖了2款硬件和多款重要软件产品,整体来看,Android 4.1升级提升不大,这也是为什么其版本定义为Android 4.1而非5.0的原因。平板电脑、Glass、Nexus Q则体现了Google在多方面尝试的发展方向。

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

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

舌尖上的果冻豆,Android 4.1新特性全面解析

宣扬已久的谷歌I/O大会已经结束,Android的最新4.1版,代号Jelly Bean(果冻豆)的新系统已经正式问世,除了新架构、全新通知栏和搜索功能之外,实际上这个新系统还有许多新的特性,在发布会上不能完整的展示,现在cnITinfo.COM就对这些新特点逐一进行解析,看看4.1版系统会不会让我们值得期待。

1.更快、更流畅、更灵敏

在演讲中,大家除了听到果冻豆这个词之外,还有一个Project Butter,这是新版系统的中最重要的一个增强项目。

首先,新版系统使用了新的处理架构,对多核心处理器的支持终于来到,Android设备中出现的双核、四核处理器将会得到更好的优化,发挥出强劲的性能表现。

其次,在新版系统中,特效动画的帧速提高至60fps,4.1版系统还将会优化最佳性能和很低的触摸延迟,提供一个流畅、直观的用户界面。

为了确保帧速一致,4.1版本的Android框架所有的绘图和动画都将统一VSYNC计时,应用渲染、触摸事件、画面构图、显示刷新等操作都会锁定在16毫秒响应,所有的帧都没有提前或者落后。

Android 4.1还增加了三倍缓冲,让所的渲染感觉更顺畅。触摸延时不仅会遵循VSYNC计时,还会在触摸操作时做出预判提前渲染,此外在CPU闲置时会分配更多的处理能力来应对触摸事件,以确保触摸没有延迟。

SDK开发工具也将会提供一个新的工具systrace,可以让开发者从Linux内核中直接手机数据,来判断造成渲染中断的原因。

2.增强通知栏

通知栏一直是Android引以为傲的一项功能,开发者可以把重要的信息通过直观的界面展示到用户面前。

3.全新搜索

搜索是Google不可忽视的一个功能,在新版Android中,搜索将会带来全新的UI、智能语音搜索和Google Now三项新功能。

新UI不仅提供了好看的搜索框,在搜索结果展示上也抛弃了传统的条目结果,改用卡片展示。必须搜索某个内容,结果页面将会展示相关度最高的内容以及相关的信息,新的UI会让用户能够更快的得到自己想要的结果。

智能语音搜索功能将依靠Google强大的搜索库,提供很好的体验。但是现在不知道会不会卖萌。

Google Now则是更加智能化的信息助手,它会根据你平日的搜索习惯和当前使用环境来分析预判你想需要的信息,比如根据你喜欢的球队显示比分、赛程,根据上下班的地点、时间显示最佳路线、天气、汽车班次,并且会及时提醒你不出门就会迟到,基本就是“我猜我猜我猜猜猜”。

在Android 4.1中,通知栏框架有了翻天覆地的变化,总体来说就是更大、更丰富、直接操作。

开发者可以在新版系统中使用三种不同的通知样式,最高可以达到256dp,用户可以直接查看图片、信息、邮件、提醒等内容,可以进行一键回拨、一键分享、一键回复等操作。

4.桌面插件自动调整大小

新版系统中桌面插件将可以自动调整大小,如果桌面空间不足会自动弹开程序LOGO空出地方,如果还不够就会自动缩小插件空间以方便摆放。然后根据插件的面积,会向应用索取不同的内容展示。

此外在UI方面,果冻豆会提供简化统一的任务导航、简单流畅的动画效果、多种显示模式转换(操作栏、导航栏、系统栏可见的正常界面,状态栏、操作栏隐藏和导航栏变灰的夜间模式,以及状态栏、操作栏、导航栏全部隐藏的全屏模式)、预览并直接使用动态壁纸、更高分辨率的联系人照片(比如720X720)。

5.加强无障碍操作

在无障碍操作方面,果冻豆的API将会更加完整,让视力不佳用户能够更好的操作自己的手机。开发者可以根据新的API来实现更完善的辅助功能。

6.语言和输入法扩展

4.1版系统将更好的支持双向文字显示,以方便从右到左显示的语言用户使用,将增加多项语言支持,应用也将可以使用新的阿拉伯语、希伯来语等语言环境和相关字体,也将会支持Unicode 6.0字符。

新系统将会内置27种不同的键盘布局,并提供只能词典方便输入。还有,新的语音输入将支持离线模式,不再需要联网就可以完成语音的分析。

7.新的输入类型和功能

当通过蓝牙、USB或者其他任何连接类型接入新的输入设备时,系统会发出通知让用户选择是否进行切换,比如你连接了一个游戏手柄。新系统也可以让应用、游戏查询设备管理器并选择使用哪个设备进行输入,并在这些设备工作时提供震动触感。

8.新的连接类型

Android Beam是一项基于NFC技术的功能,可以让两款支持NFC的手机触碰在一起之后快速进行分享,在果冻豆中,Android Beam将可以更容易的共享图片、视频和其他文件,在出发一个传输操作之后,手机将会通过蓝牙进行传输。

Android 4.1还引入了基于DNS的网络服务发现功能,可以通过WiFi网络寻找包括引动设备、打印机、相机、播放器等服务,开发人员可以通过这项新功能实现跨平台多人联机游戏等功能,也可以让手机连接到摄像头、打印机或者是其他移动设备的对等连接。

其中对等连接也是WiFi直接服务发现功能(P2P),可以让手机开启自己的无线网卡,不需要移动网络、WiFi网络就可以直接找到其他移动WiFi设备,然后接通进行数据传输、共享资源。使用WiFi直接服务发现可以分享文件、联机游戏等。

新版中将会加入网络带宽管理功能,以更好的配合流量统计,节省自己的流量。

9.新的媒体功能

在果冻豆中,系统提供了更方便的硬件、软件解码器访问,支持USB音频输出,音频记录触发,多声道音视频输出(HDMI端口),AAC 5.1音频编解码支持,音频预处理将可以提供更高的音质,媒体管理器将可以让用户选择使用什么方式进行媒体输出。

10.浏览器增强

在4.1中,Android浏览器和WebViews将提供更好的HTML5视频支持,滚动和缩放性能得到加强,并减少了内存占用,HTML5/CSS3/Canvas动画性能、文本输入、JavaScript引擎(V8)性能都得到了加强。

11.Google服务

Google提供了新的全免费云消息服务,Google Play商店也将会提供加密措施,让应用与设备绑定,防止破解盗版。

智能应用更新不再需要下载完整的安装包,只需要针对改动部分进行下载,这样可以节省流量、续航、时间等。

还有即将推出的Google游戏服务。

此外还有更强的renderscript计算、相机程序等。预计新版系统将会在7月中旬推出,首批升级设备为三星的Galaxy Nexus和Xoom平板。