资讯频道 → Web前端
阅读更多

1顶
1踩

Web前端

原创新闻 纯 CSS3 实现的 Web 小游戏

2013-01-17 16:34 by 副主编 wangguo 评论(5) 有15232人浏览
css css3 游戏 html5

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

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

Via webdeveloperjuice
  • 大小: 55.8 KB
  • 大小: 34.6 KB
  • 大小: 48.4 KB
  • 大小: 40.5 KB
  • 大小: 44.2 KB
  • 大小: 31.1 KB
  • 大小: 24 KB
1
顶
1
踩
评论 共 5 条 请登录后发表评论
5 楼 wangguo 2013-01-18 11:00
dsjt 写道
什么啊？
迷宫是个坑

用鼠标从左边箭头进入，有些墙会打开的
大家多关注一下实现的代码
有些使用了在线编辑器，可以查看、修改代码
4 楼 dsjt 2013-01-18 10:50
什么啊？
迷宫是个坑
3 楼 hareamao 2013-01-17 22:14
迷宫可以玩
2 楼 baeqiuzhu 2013-01-17 19:04
迷宫不能玩
1 楼 hand515 2013-01-17 17:12
迷宫那个是坑吧。。。

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 基于HTML5 + CSS3实现的Web单页面.zip

    html5开发

  • Web前端--HTML+CSS+JS实现3D立体魔方小游戏

    你想要解决的问题，在这里常见网页设计作业题材有 个人、 美食、 公司、体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 ...

  • Web2048:2048小游戏，使用HTML+CSS+JavaScript实现

    Web20482048小游戏，使用HTML+CSS+JavaScript实现效果预览

  • Web前端--HTML+CSS+JS实现仿切水果小游戏

    目录 代码目录： ...CSS样式： * { margin: 0; padding: 0; list-style-type: none; touch-action: none; user-select: none; } .bg { position: absolute; z-index: 0; width: 100vw; ...

  • js实现飞机大战小游戏，web优秀大作业，小白必看！

    js实现飞机大战小游戏，web优秀大作业，小白必看！ js实现飞机大战小游戏，web优秀大作业，小白必看！ js实现飞机大战小游戏，web优秀大作业，小白必看！ js实现飞机大战小游戏，web优秀大作业，小白必看！ js实现...

  • html+css+js实现的3D魔方小游戏源代码

    采用html+css+js，双击网页开始游戏，双击后3D魔方进行随机打乱，通过鼠标来操作3D魔方，并能对魔方复位时间进行记录，来挑战自己吧，看看你要多长时间

  • Web前端---HTML+CSS+JS实现记忆纸牌游戏

    js实现扑克牌翻牌记忆小游戏代码、连续点击翻开两张扑克牌，相同去重，不同则合上重新翻，考验你的记忆力。 ????文末获取源码联系???? B站视频演示：挑战记忆力-Web前端实现记忆纸牌游戏.mp4 主要源码展示...

  • 用DOM模型和css制作web小游戏

    现在通常的web游戏都是基于html5中canvas2d或者WebGl来制作，但是css3规范能提供更加便捷的图形变换和动画定义方式，仅仅用作web文档布局有些大材小用，采用dom模型加css3来完成一些web小游戏制作需求也是一种不错的...

  • 200个WEB前端小游戏！

    里面有二百个用h5+css+js开发的小游戏，PC端和手机端都有，有源码。定价比较便宜，欢迎大家以任何方式来下载

  • Web前端期末大作业---HTML+CSS+JS实现实现捉虫小游戏

    项目源码结构：图片和js以及css等基础文件代码实现#%E9%A1%B9%E7%9B%AE%E6%BA%90%E7%A0%81%E7%BB%93%E6%9E%84%EF%BC%9A 主要源码展示： 获取完整源码： 网页截图展示：文末获取源码 首页展示： 选择昆虫： ...

  • HTML5 + css3 + js 网页设计作业 网页小游戏

    用HTML5 + css3 + js 自己做的一个翻图片的网页小游戏，挺有意思的吧！ 因为上网页课要交一个个人的网页设计作业，时间挺紧的，记得以前玩游戏偶尔看到一个翻转图片的小游戏，就想模仿着自己做一个！ 目录用...

  • Web前端---HTML+CSS+JS实现的贪吃蛇游戏

    用程序化来表达就是，整条贪吃蛇可以是一个类似这样[[1,2],[1,3]]的带位置信息的数组，每移动一步，往数组推入一个新的坐标点，并移除第一个坐标点。 2.获取下一个点的坐标。我们的蛇理论上可以往上下左右四个方向...

  • 2048web小游戏.zip

    简单的2048小游戏，由原生的js实现，包含html，css代码，适用于学习js课程的小项目！大家快拿来练手吧！

  • Web前端---HTML+CSS+JS实现的圣诞抓礼物小游戏

    目录 ...CSS样式： body { background: rgb(8, 8, 58); margin: 0; } #wrapper { width: 500px; margin-left: auto; margin-right: auto; margin-top: 20px; } JavaScript代码 : <!.

  • 前端技术搭建飞机大战小游戏（内含源码）

    在前面的文章当中我们也提及到我们在本系列的专栏是循序渐进从简单到复杂的过程，后续会带领大家用前端实现翻卡片、扫雷、贪吃蛇等有趣的小游戏，纯前端语言实现，都会陆续带给大家。欢迎大家订阅我们这份前端小...

  • 纯css 下拉选择,纯css实现select下拉框并排显示

    Document mushroomsgreen peppers 项目需求：让option选项并排显示，同时隐去select那丑陋的默认选择小三角 总结：网上纯css改默认样式的方法看了一些，基本都是一个套路，而且相互抄袭，这倒没什么，关键是试了一下...

  • 前端技术搭建贪吃蛇小游戏（内含源码）

    利用前端基础HTML、CSS、JS来搭建简易版本贪吃蛇小游戏，内附源码，直接拷贝即可运行，没有前端基础的小伙伴也可以通过文章中的讲解搭建出来！

  • html+css+js实现小游戏flybird(完整版)

    从未做过前端的游戏，哪怕不是用引擎实现的小游戏也没做过，这次试了一下，参考了一些资料，资料也不是很完整，于是就自己补齐写了一个。仅仅娱乐，接下来先看下效果图。   好了，废话不多说直接上代码。 首先先...

  • Web前端--HTML+CSS+JS实现圣诞抓礼物小游戏

    你想要解决的问题，在这里常见网页设计作业题材有 个人、 美食、 公司、体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 ...

  • 前端技术搭建扫雷小游戏（内含源码）

    六一儿童节了，为你的小朋友来实现一个扫雷游戏吧！通过扫雷游戏也能让你更进一步的感受前端基础三件套的作用及搭配

Global site tag (gtag.js) - Google Analytics