HTML5资讯

当前位置: HTML5技术网 > HTML5资讯 > 纯 CSS3 实现的 Web 小游戏

纯 CSS3 实现的 Web 小游戏

       CSS3是CSS的升级版本,加入了很多新的特性,如圆角、边框、文字阴影、盒阴影、媒体查询、多栏布局、RGBA和透明度等特性,因此可以实现很多非常漂亮的效果,这是CSS2比不了的。 
       有些基于CSS3实现的效果甚至可以和Flash相媲美。本文介绍的7款游戏,就是使用CSS3开发,甚至没有用到JavaScript。其中有些游戏使用了在线编辑器,你可以通过改变代码来直观地看到效果的变化。 
       1.  CSS3 Panic Game 


       这是一个简单但令人印象深刻的游戏,类似于打地鼠游戏,只使用HTML和CSS3,没有使用JavaScript。游戏,该游戏有6000行CSS3代码,其中前500行为CSS3代码,剩下的都是文本格式的图像编码。 
       代码/演示:http://cssdeck.com/labs/css-panic-game 

       2.  CSS Maze Puzzle Game 


       使用CSS3制作的迷宫游戏,使用鼠标从左边箭头处开始,穿越迷宫,到达右下角。 
       演示:http://www.cssplay.co.uk/menu/amazing.html(代码见此页面源文件) 

       3.  Ninja Jarimaru 


       玩家将扮演忍者Fred Jones角色,在游戏中冒险、打怪。使用鼠标进行控制,如前进、后退、跳跃等。 
       演示:http://murakya.net/game/yokoaction_beta/game/index.html 

       4.  Cow Click Shooting Game 


       这是一个射击游戏,通过鼠标点击来射击游戏中出现的牛,比较简单,但很有趣。 
       演示:http://ndruger.lolipop.jp/hatena/20110429/css_game/css_game.htm        源码:https://github.com/ndruger/css-game 

       5. Cops and Robbers CSS Puzzle 


       该游戏和上面的迷宫类似,通过鼠标来移动警察,防止囚犯从迷宫逃脱。 
       演示:http://www.cssplay.co.uk/menu/tilt.html 

       6.  CSS3 of the Dead 


       这是一个纯CSS3实现的射击游戏,通过鼠标点击进行射击。 
       代码/演示:http://cssdeck.com/labs/css3-of-the-dead 

       7.  Noughts and Crosses Game 


       经典的圈圈叉叉游戏,一人用叉,一人用圈,其中一方连成3个即可获胜,跟五子棋类似。该游戏中,使用CSS绘制的笑脸来代替圈叉。 
       代码/演示:http://cssdeck.com/labs/css-noughts-and-crosses 


英文原文:http://www.webdeveloperjuice.com/2013/01/12/top-7-css3-games-ruling-the-world-of-web-games/

【纯 CSS3 实现的 Web 小游戏】相关文章

1. 纯 CSS3 实现的 Web 小游戏

2. 3366第二届小游戏开发大赛,开发小游戏共赢大未来

3. HTML5小游戏:极度有趣的机械组合游戏

4. HTML5小游戏:超酷魔幻射击游戏

5. HTML5游戏处于从小游戏到大产业爆发前夜

6. Cufon, jQuery和CSS3实现的超强飞出菜单

7. CSS3实现的图片加载动画效果

8. 效果非常酷!纯CSS3实现的图片滑块程序

9. CSS3实现的超棒3D Grid效果

10. 超可爱 纯CSS3实现的小猪、小老鼠、小牛

本文来源:https://www.51html5.com/a3077.html

点击展开全部

﹝纯 CSS3 实现的 Web 小游戏﹞相关内容

「纯 CSS3 实现的 Web 小游戏」相关专题

其它栏目

也许您还喜欢