新浪微博 登陆  注册   设为首页 加入收藏

学PHP >> HTML5专题 >> 纯 CSS3 实现的 Web 小游戏

纯 CSS3 实现的 Web 小游戏

查看次数45511 发表时间2013-01-23 14:39:16

       CSS3是CSS的升级版本,加入了很多新的特性,如圆角、边框、文字阴影、盒阴影、媒体查询、多栏布局、RGBA和透明度等特性,因此可以实现很多非常漂亮的效果,这是CSS2比不了的。 &nbs...
       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/


(转发请注明转自:学PHP)    


  相关推荐



1楼 学phper说: 2016-04-01 13:29:43
-1'
2楼 学phper说: 2016-04-01 13:29:43
1
3楼 -1'说: 2016-04-01 13:29:44
1
4楼 Sukey说: 2016-12-11 12:40:49
Cool! That's a clever way of lonkiog at it!

  发表评论
昵称:
(不超过20个字符或10个汉字)
内容: