什么是 Qing?Qing 是一套基础开发模版,来源于我们在手机与 PC 端上的大量工程实践。Qing 所提供不是冷冰冰的文件,
而是一套 Web 前端解决方案,所以 Qing 不只是关注项目的初始状态,而是整体的工作流程,
这是 Qing 与现有开源的开发模版显著差异的一点。Qing 的体验必须是高效且愉悦的,拒绝繁琐与重复。
其足够的 Qing 量,只需 30 分钟内即可掌握最先进的 Web 开发技能。以下是 Qing 所基于的开发理念:

  1. 移动端优先,兼容 PC 端
  2. 向前看齐,基于 ES5 开发
  3. 模块化 Web 开发过程
  4. 自动构建与部署集成, 基于 Mod.js 工具

基于未来趋势的开发理念,Qing 旨在提供工程化方案。

平台与浏览器版本兼容:

  • iOS 4.0+
  • Android 2.2+
  • IE 6+
  • Chrome
  • Firefox
  • Safari

一 .《墙来了》简介

《墙来了》是一款基于 HTML5 的体感游戏,第三届腾讯创意马拉松的一等奖作品,由 腾讯 AlloyTeam 和 HTML5 梦工场联合出品。《墙来了》 采用 HTML5、Javascript、CSS3 等全新 Web 技术来构建一个在线的体感游戏,只要有一个浏览器和一个摄像头,就可以通过身体的摆动,体验穿墙的刺激与快感。

  • 运行平台:Chrome
  • 语言支持:中英文

CSS3 UI Lib 库是由腾讯 AlloyTeam 前端开发团队建立,主要收集国内外友好体验和创意的界面组件 Demo。它除了使用CSS3技术外,还使用了HTML5JSJXjQuery 等技术,来达到完美的外观表现以及交互体验。此项目自 201110月份成立以来,经过团队一年多的整理和收集,已经趋于成熟。

  • CSS3 UI Lib 库:Http://CSS3Lib.alloyteam.com

CSS3 绘制腾讯 QQ 的企鹅 Logo 效果

今天和大家分享一下使用 CSS3 绘制腾讯 QQ 的企鹅 Logo 的过程。

 

一、如何使用 CSS3 来绘制图形?

网络上经常能够看到一些用 CSS3 绘制的精致图形,它们通常由矩形,圆形,椭圆,三角形, 梯形等组合而成。要想绘制我们自己的图形,就要先了解下基本图形的绘制方法了。

号外号外,iSpriter 更新啦!

什么?你不知道 iSpriter 是什么?那你太 out 啦,必须先看看这个文章了。简单的一句话介绍:基于 NodeJs 的开源 CSS 精灵图合并工具,不用改变原有的 css 编写方式,就能自动帮你解决 css sprite 的合并问题。目前源码托管在 github(https://github.com/iazrael/ispriter),欢迎各位同学来一起完善。

由于最初写的时候不怎么注意代码自量,写得比较搓。在应用在几个项目之后,修复了一些 bug,发现再加新功能比较困难。最近终于下决心重构了下,并在重构的基础上增加了一些新特性。

【场景】:

由于 CodeTank 是一个 JS 的编程游戏,所以用户的代码都可以在 CodeTank 平台上执行,从而控制 tank 的个性化行为。

在 CodeTank 设计之初,主要需要实现的目标如下:

  1. 自定义的坦克可以调用公用的 API,例如 fire,ahead 等控制坦克行为的 API。
  2. 自定义的坦克可以实现自己的事件处理程序,在特定事件触发时提供自己的响应。
  3. 自定义坦克管理属于自己的状态队列。
TAT.Cson CodeTank 坦克机器人开发教程
In HTML5游戏,作品 on 2012年08月30日 by view: 75,588
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.岑安 Animations in Canvas
In HTML5,HTML5游戏 on 2012年08月21日 by view: 14,571
4

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

大致会有三种类型:

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