（四）使用HTML5实现的俄罗斯方块
实现介绍 从java版俄罗斯方块之后，总想着使用html5的canvas也来实现一下，除了一些运算之外就剩下一些表格的绘制了，所以觉得html5写一个出来是可行的，这不最近终于开始写了。 首先分析一下本次实现的功能点： 1、游戏布局面板格子绘制； 2、 7种方块的绘制； 3、方块的上、下、左、右 （字母WASD键）控制，上为旋转，左右下分别为移动，空格键为快速下落（下落到最底部）； 4、方块最终的可下落位置预览提示； 5、方块的消行操作（本次消除N行）； 以上这些功能为核心功能，与之前java版的功能实现相比，少了下列几个功能： 1）消行计分，等级提升，背景切换； 2）方块自动下落，按照级别方块下落速度的提升； 3）游戏开始的手动执行，结束提示提示，游戏暂停，继续等； 4）下一个方块的提前预览； 。。。。。。突然发现以前的这个功能实现还是稍微有点完善的。 参考效果图 源码参考(最新的代码已...
文章分类：前端技术 HTML5
俄罗斯方块时钟（二）Html5的canvas实践
文章接上文，其实时钟的原理就是小时和分钟围成一个圆圈，3个指针来按照当前时间点来显示不同的角度，在纯网页实现之后，总感觉网上能找到很多的时钟PSD，来编写一个图片的实现版本，于是就有了这个示例，于是就有了这篇文章，于是我在写你在看，呵呵。 不废话，网上还真就能找到一些关于时钟的PSD，于是乎简单的切了几个图，加上修修改改的就完成了，详细看下运行示例： 跟前篇文章相比，仔细观察发现它的秒针指向的位置并不是十分准确，回过头去看前篇的文章可以发现那个十分准确，其实是由于这些个图片的问题，再裁切的过程中宽高并不是等比的，所以再找它的圆心中心点的位置时，不会十分精确，故程序里面的时分秒的指针的位置并不是像前文那样（其实我还有一种感觉，就是这个时钟的背景图有点歪，并不是十分垂直的）。 同样在线访问地址为：“/demo/html/canvas/clock/index.html”，如果需要示例代码及素材可...
文章分类：前端技术 HTML5
Html5的Canvas实现太极图
了解太极还是从传智的贺老师PS视频里面开始的，会使用PS画一个太极的图形还算不上是入门级的水平，借助PS软件来分析一下我画的太极的实现（可能高手们的办法更好），且听我慢慢道来。 第一步：画出两个半圆组成一个整圆，分为左侧和右侧（这里分为左右，当然上下两个也可以），如下图所示： 第二步：在图中的圆心至顶部和底部分别画俩圆，其中上方的圆为填充为绿色，下方的圆填充为蓝色，如下图所示： 第三步：分别以两个小圆的圆心为中心点，来画两个小圆圈，并填充相对的颜色，绿色背景填充蓝色，蓝色背景中填充绿色，如下图所示： 至此，渣渣版的太极图形已经像那么回事了，回顾一下总共是画了两个半圆，两个中型整圆（半径为半圆半径的二分之一），两个小型整圆。那么现在换成使用html5的canvas来实现，这里需要说明的是canvas的画圆函数arc，是以3点钟开始的位置为起始角度的，如下图所示： 代码实现一：实现一个300p...
文章分类：前端技术 HTML5
时钟（一）Html5的canvas实践
背景介绍 还记得刚工作没多久的时候，无意中翻找JDK的目录发现了大类的例子，都以swing的居多，印象深刻的包括一个嵌入网页中的applet小程序，运行起来是个时钟（clock），虽然简陋，但我觉得略高端，因为一直不知道它的原理是怎么实现的，后来一个项目上看到有同事弄了个基于flash的实现版本，让我感觉眼前一亮，呵呵。不过现在想想，还真少见JS的实现版本。最近在观看兄弟连的html5视频的时候发现讲到canvas介绍，里面还有具体实现的过程，细细观看几遍下来，感觉眼前更亮了，经过两个例子的实践，发现彻底亮了。 实现介绍 根据实现的效果图来简单分析一下它的具体组成部分： 1） 表盘 表盘就是一个圆，设置圆的边框、背景色 2） 小时、分钟的刻度 小时刻度一共是12个，分散围绕一圈360°，平均下来每两个小时直接相差30°； 分钟刻度一共60个，同样一周下来，每相邻的度数则为6°，需要注意的是...
文章分类：前端技术 HTML5
浅浅的实现一下html5的＜video＞
记得前段时间要实现一个视频播放的功能，要支持视频列表轮播的功能，基于浏览器的<object>标签和jquery.flash插件相关的实现，我在网上看了下，我是基本无法实现这个功能（准确的说是无法获取到视频播放完成后的一些事件），不过也可能是我这块了解的少了，有别的实现但是我不知道吧，废话少说。 这几天看了下html5的video相关的资料，发现对于前几天的那个功能来说，问题不大，今天特地实践了一下，如下则是相关的总结。 关于<video />标签我们关心属性的多一点的是：是否自动播放、是否重复播放、宽度、高度、控制栏（包括播放、暂停、播放进度、时间、声音等）、 视频加载或者播放前显示的图片、视频的地址等，当然还有别的属性，就不在多说了，基本的应用中用到的也就是这些了。剩下的关注的多点的就是它的事件了。 本例子中实现的视频轮播效果实现较简单，详细描述来说就是：页面加载完成之后，默认按先后顺序...
文章分类：前端技术 HTML5
基于html5的websocket构建实时程序
示例说明： 程序后台开启一个websocket服务，两个客户端分别接入，两个客户端相互发送消息，最后由服务器向各个客户端发送一句话。一句话概括为：客户端对客户端，服务器对客户端。 先来两个程序示例吧，好让不感兴趣的人早点绕道。 示例截图一： 示例截图二： 还记得是2010年前吧，找过html5的资料看过，当时还很年轻，找找资料后发现对此没什么感觉，就看了下与html4新增的一些东西，在那时感觉至少还得个几年或者是很长的时间的发展才能普及使用到html5吧，这不这两天老听到有人在说这个，就准备再看下这个东西吧，这里主要说说websocket。（现在使用的浏览器也都是最新的版本，能够支持html5，就网上找找资料，学习学习。） 先说说以前做类似即时程序的实现思路吧。 1、页面定时刷新 这种程序实现起来最简单，但弊端也同样是最明显的。专业的说法是叫前台轮询，定时去发送请求调用后台，盲目请求后台，...
文章分类：前端技术 HTML5
websockethtml5智能表单计算两个日期的间隔
基本介绍 使用HTML5的input type="date" 实现的两个日期计算间隔天数，不限制两个日期的先后，计算结果后取绝对值。 运行效果 参考代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>两个日期的间距</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style type="text/css">body{ font-family: "microsoft yahei"; font-size: 12px; } fieldset{ width: 300px; border-radius: 10px; margin: 20px auto; height: 200px; } #box{ width: 10...
文章分类：前端技术 HTML5
运营时间： 天
用户数量： 人
文章数量： 篇
评论数量： 条
点赞个数： 个
最后更新：