纯 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实现的效果甚至可以和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 小游戏】相关文章
6. Cufon, jQuery和CSS3实现的超强飞出菜单
本文来源:https://www.51html5.com/a3077.html
﹝纯 CSS3 实现的 Web 小游戏﹞相关内容
- 纯CSS3实现的顶部社会化分享按钮
- 教你用CSS3动画实现的超炫过渡特效
- 7款纯CSS3实现的炫酷动画应用
- 一款纯css3实现的颜色渐变按钮
- 30款css3实现的鼠标经过图片显示描述特效
- Cufon, jQuery和CSS3实现的超强飞出菜单
- 分享Jquery+CSS3实现的3D下拉菜单特效
- 一款jquery和css3实现的卡通人物动画特效
- 一款jquery和css3实现的卡通人物动画特效
- 一款基于css3和jquery实现的动画弹出层