轩枫阁

首页 / Web前端 / HTML (第3页)

你2048了吗—开源HTML5游戏

前言

最近玩的根本停下不下来的游戏-2048,今天终于闯关成功~  就连2048的开发者都说自己还没达到2048的分数。

2048游戏源于IOS,现在安卓也有移植版本,该游戏借鉴了有名的手机游戏1024。

源码

https://github.com/gabrielecirulli/2048

试玩

http://xuanfengge.com/demo/201403/2048

玩法

游戏的玩法很简单,在4×4的棋盘上,用方向键选择数字移动的方向,遇到相同的数字就会合并,每次移动会增加一个数字。合并出2048就算通关。虽然简单,但是很有乐趣,被誉为“根本停不下来的游戏”。 查看全文

2014/03 29  周六

让IE支持HTML5标签及对CSS3 Media Query的兼容

前言

HTML5新增了很多语义化的标签,赋予网页更好的意义和结构。一个网站要做到一套代码多种终端设备都美观的展现,就需要使用CSS3多媒体查询Media Query做成响应式的。

HTML5标签兼容方案

使用HTML5标记的优势

HTML5提供了一些新的元素和属性,例如<nav>(网站导航块)和<footer>。这种标签将有利于搜索引擎的索引整理,同时更好的帮助小屏幕装置和视障人士使用。让你在拥有更简洁的代码的同时,也有利于SEO。

关于HTML5结构

文章一:http://imsole.net/html5/ele.html

文章二:http://www.xuanfengge.com/html5-structure.html

兼容解决

HTML5是在低版本的浏览器(IE8-)的兼容是有限的,类似很多结构性的标签<header>、<section>、<footer>等在IE8以下不会被识别。有什么方法能实现兼容呢?在高级浏览器能使用上这些标签,增强语义化;而在低级浏览器(包括IE6)上表现不会出错。那就需要引入html5.js这个文件。 查看全文

2014/03 18  周二

基于canvas实现的旋转时间圆点

时间是指宏观一切具有不停止的持续性和不可逆性的物质状态的各种变化过程,其有共同性质的连续事件的度量衡的总称。时是客观存在,而间是人们的思想所划分的

前言

如何表示时间在走呢?如何实现时间可视化呢?就如轩枫阁的轮播图,用高级浏览器就可以看到图片右下角有个会动的圆点,当圆点旋转一周(9s),图片即切换,将时间生动的刻画出来。

实现原理

  • canvas绘制蓝色圆形
  • canvas绘制白色扇形
  • 白色扇形的度数随着时间变大

弧度制单位

rad 角度制单位:度 → 180度 = PI弧度 → 1度 = PI弧度/180度 → 1弧度= 180度/PI弧度

弧度 = 角度*PI/180

角度 = 弧度*180/PI 查看全文

2014/01 19  周日

基于HTML5 Canvas实现的下雪动画

看到过许多的下雪动画,总感觉不够形象生动下面的这个下雪动画,是基于HTML5 Canvas实现的,理解起来也挺简单。

demo地址

先来一览是多生动的效果吧:http://www.xuanfengge.com/funny/html5/snowFall/

小tip:支持的浏览器有Chrome、IE9+、360极速

1

 需求点分析

  • 雪花形状:统一在canvas上绘制
  • 随机绘画出雪花形状:运用canvas的绘制圆形渐变
  • 雪花飘动画:利用requestAnimationFrame绘制动画帧
  • 雪花数量:控制在一定范围,如200片

查看全文

2014/01 11  周六

HTML5结构

1.主体结构

查看全文

2013/12 01  周日

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]

    点击开始录制,可以录制弹奏的曲子