Webtop——html5 桌面 app 开发引擎。基于 webtop,你可以使用 html5 和 css3 等新技术构建桌面 app,即开发直接运行于 windows 上的软件,使用透明渲染模式能将网页直接渲染在桌面上,轻松实现透明阴影等特效。而且,提供了大量的本地 api,使你的 app 能达到跟本地 app 一样的体验。基于它,你可以开发诸如浏览器,QQ,PS,桌面 widget 等桌面 app。这种开发软件的方式,相比传统桌面软件开发方式的开发效率,个人认为至少是其的 10 倍。

腾讯 Web 前端 JX 框架入门教程 (一)
In Web开发 on 2012年09月05日 by view: 11,780
5

什么是 JX 框架

JX 框架 (Javascript eXtension tools) 是模块化的非侵入式 Web 前端框架,适用于 Web Page 和 Web App 项目的开发,特别适合构建和组织大规模、工业级的 Web App,腾讯 WebQQ、腾讯 Q+等产品都是采用 JX 框架开发,兼容目前所有主流浏览器。
JX 框架具有以下特点:

  • 微内核设计,内核可完全分离出来
  • 原生对象零污染,随着 Web App 越来越复杂,对原生对象的零污染也体现的越来越重要了
  • 模块封包,采用命名空间、闭包等方式建立了模块封包的体系,模块自身做了良好的架构分离,各个模块之间可以自由拼装组合
  • 原子级封装,最大限度保留了代码的执行效率,接近原生的接口,降低了学习门槛
  • 无缝集成各种 js 框架:jQuery, YUI, Mootools, Prototype.js,Mini,Sizzle,cssQuery,xpath,JSON 等等

第一个程序

没错,正如你所想的,我们要写的第一个程序是 “hello world”,通过这个程序,你可以对使用 JX 框架有个概括的了解。
TAT.svenzeng 谈谈 Javascript Array
In Web开发 on 2012年09月03日 by view: 44,597
22

Javascript 里的数组对象构建自 Array 构造器. 比如:
var ary = new Array(1, 2, 3 ) 或者 var ary = [ 1, 2, 3 ]

在 java 里, 数组会按照索引连续分配有序个元素.
而在 javascript 里, 数组的存取方式跟普通对象一模一样.

TAT.Cson CodeTank 坦克机器人开发教程
In HTML5游戏,作品 on 2012年08月30日 by view: 78,043
62

一、坦克结构组成:

坦克由三个基本部件组成:主体,炮管和雷达

  1. 主体:可进行移动或旋转动作。
  2. 炮管:可进行旋转和开火动作,开火可控制子弹的能量范围。
  3. 雷达:可进行旋转和探测敌人的动作。当坦克停止移动时,雷达会被关闭,玩家可以通过手动调用 scan方法开启雷达。

欢迎来到 CodeTank 的世界,将会带你进入一个神奇充满挑战的代码机器人的世界!

CodeTank(代码坦克)是全世界首个 Javascript 程序员的在线编程对战游戏,是由 腾讯 AlloyTeam 和 HTML5 梦工场联合出品的在线坦克仿真游戏平台,CodeTank 采用 HTML5、Javascript、CSS3、NodeJS、MongoDB 等全新 Web 技术来构建一个基于互联网的在线智能坦克机器人战斗仿真引擎(所以需要支持 HTML5 的浏览器来运行)。

欢迎来到 CodeTank 的世界,将会带你进入一个神奇充满挑战的代码机器人的世界!

相信每一个男人的心中,都有一份对坦克 (Tank) 特殊的情结,那就访问:

CodeTank 官方网站:http://CodeTank.AlloyTeam.com/

 

TAT.svenzeng 一种简单通用的单例实现
In Web开发 on 2012年08月22日 by view: 5,147
4

在 javascript 中, 一个原生的 json 对象实际上就是一个单例. 我们现在讨论另外一种.

假设现在在写一个小功能, 点击按钮的时候需要弹出一个遮罩层.

但是这个遮罩层是全局唯一的, 不可能同时在页面出现 2 个. 这样写的话每次都会创建一个新的 div. 显然是浪费资源

TAT.岑安 context2D 上的 texture mapping
In HTML5,Web开发 on 2012年08月22日 by view: 16,206
4

我们在做一些图像变换或者 3D 建模时,骨架或者网格的 “蒙皮” 是少不了的。

在 webGL 中,也就是 “experimental-webgl” 的 context 中,webGL 跟 openGL 一样,提供了一个非常方便的

接口,可以很容易的对某一个指定的面或者网格蒙上指定的素材。并且,被蒙皮的区域做矢量变换,3d rotate 之类的,texture 会自动随着变换。不用额外的做处理。所以在 webGL 中,textureMapping 是十分容易和方便的。

这里有个简单的 demo,支持 webGL 的浏览器可以尝试围观下。

当然,从文章的标题可以看出,我们今天要讨论的内容并不是 webGL 下的 bindTexture。而是在 2D 的 context 下怎么对素材进行 TextureMapping?

TAT.岑安 Animations in Canvas
In HTML5,HTML5游戏 on 2012年08月21日 by view: 15,190
4

关于 Canvas 中动画的处理和实现

大致会有三种类型:

  • 矢量动画【No Textures】
  • 关键帧动画
  • 骨骼动画

2个信使的情况

此方案已有新版本, 请查看 《iframe 跨域通信的通用解决方案-第二弹!(终极解决方案)》。本文章可做技术学习供继续交流。

一、背景

在这个 Web 页面越来越丰富的时代,页面通过 iframe 嵌入其他的页面也越来越常见。但由于浏览器同源策略的限制,不同域之间属性和操作是无法直接交互的,所以在这个时候,开发者多多少少需要一些方案来突破这些限制。跨域问题涉及的地方也很多,如文档之间的消息通信、ajax 请求、Cookie 等,本文讨论的是 iframe 和父页面的消息通信。