HTML5
2022-04-03
154
之前的教程《HTML5实践 -- css3图片样式》,我介绍了如何为图片添加background-image包装,借助box-shadow 和 border-radius为图片设置多种多样的样式,有兴趣的朋友可以回头阅读。但是最近我在设计 PhotoTouch 主题的时候遇到了问题,background-image大小不能调整,这对于响应式设计就不太理想了。今天我们将尝试解决问题。 问题 大多数浏览器对图片的border-radius 和内嵌 box-shadow效果渲染的并不是很完美。这也就意味着
2022-04-03
356
今天我将介绍如何使用css制作一个可伸缩的mobile的搜索框,他非常适合于mobile的响应式设计的需要。本教程没有使用JavaScript,只使用了原生css属性,所以这是一个非常简单而高效的实现。 目的 在移动设备上显示信息,要做到寸土寸金,珍惜每一寸的屏幕。例如搜索框的设计,在一般情况下处于收缩状态,激活的时候才将他扩展开来,这样做可以为屏幕上其他元素提供更多地显示区域。这就是本课程要完成的工作。我们先来看一个效果图: 在我的站点 Best Web Gallery 也有类似的设计,当查询按
2022-04-03
200
最近我在重新设计自己的博客站点,决定用一个日历样式的icon显示时间。以前的解决方案一般是用背景图片,感谢css3,现在我们用css3就能实现这样的功能。我将会用到一些linear-gradients, border radius 和 box shadow这些属性来代替以前的photoshop设计。 photoshop 概念图 很多设计者采用直接在浏览器上设计的方式,但是我还是更喜欢先做photoshop的概念图的方式。虽然现在很多效果可以直接用css实现,但是用photoshop设计效果的方式比不断
2022-04-03
174
以前,在web上要显示灰度图片的话,只有手工使用图片软件转换。但是现在借助于html5的canvas可以实现这个过程,而不需要再借助图片编辑软件了。我用html5和jquery做了一个demo,来展示如何实现这个功能。 目的这个demo将会向你展示用html5和jquery,如何实现鼠标在图片上移动移出时,灰度图像和原图之间的切换。在html5出现之前,要实现这个功能就需要准备两个图片,一个灰度图片,一个原图。但是现在借助于html5可以实现的更快更容易,因为灰度图片是直接在原图上生成的。我希望这段js代
2022-04-03
475
功能说明: 游戏中在躲避敌人攻击的同时,需要收集三种不同的钥匙,开启对应的门,最后到达目的地。 该游戏同样基于自己开发的HTML5游戏框架cnGameJS。 推荐用chrome浏览器查看。效果预览: 方向键控制移动,空格键射击,shift键打开门。 实现分析: 在上一篇文章《HTML5实现3D迷宫》中,通过放射线法模拟出3D场景的效果,而本文则在3D效果的基础上,添加更多的游戏元素,构建成一个较完整的第一人称射击游戏。 关于如何模拟出3D场景效果上文中已经有较详细的描述,本文则主要介绍如何
2022-04-03
114
功能描述: 左右方向键控制玩家的方向,上下方向键控制玩家的前进和后退。效果预览: 实现原理: 在上面的效果预览中,可以看到右边是2D的平面地图,而左边的则是第一人称的3D视图,这两幅图的关系是非常密切的,实质上,实现3D视觉的过程,就是依据2D地图把地图转换成第一人称视觉的过程。3D效果的实现只局限于平面(意思是从侧面看没有立体效果),在这种有局限性的3D效果中,我们以一个个物体为单位,通过不同物体平面之间的视觉差实现3D。而在这次的效果中,为了使物体从不同角度看都能具有立体效果,我们把单位从平面
2022-04-03
53
功能描述: 结合A*算法和HTML5完成的一个寻路demo。 鼠标点击地图任意位置,飞鸟会寻找最短路程到达该位置。效果预览: 代码分析: 具体说说里面提到过的“穿越拐角规则”的实现: 所谓的“穿越拐角规则”,就是如下图中所出现的情况:假设绿色是障碍物,当右边的红色格子想到达上面的黄色方格,并不允许直接由红色方格跳到黄色方格,而需要经过蓝色方格的情况: 我的实现方法是判断使用当前格子的x值和下一个格子的y值的格子或者使用当前格子y值和下一个格子x值的格子是障碍物,则在该
2022-04-03
64
功能描述: 该游戏实质上是坦克大战+推箱子。玩家控制坦克,在与敌人战斗的同时把物资顺利运送到目的地则可顺利过关,共三个关卡。游戏说明:上下左右方向键控制移动,空格键发射炮弹,推动所有物资箱子()到目的地(),则可过关。 代码分析: 由于该游戏分了几个关卡,所以这里首先来看看关卡管理器是如果管理各个关卡的:123456789101112131415161718192021222324252627/* 关卡管理器 */var LevelManager=(function(){ var o