前言

随着 Web 前端开发由 PC 转向 Mobile,作为前端工程师,除了需要去学习掌握移动端的新特性外,还需要面对大量移动端特有的难题,其中之一就是——怎么调试移动端页面? 针对调试的问题,现在已经有一些很好的解决方案,比如:weinre、chrome remote、手 Q 浏览器 Inspector,不过这些方案的门槛都较高,需要满足一些额外的条件。目前,在日常的开发调试工作中,打日志依然是一种常见的调试手段,通过日志内容来判断当前页面运行的状态,而日志的输出形式又有很多种,有 img 请求、dialog 弹窗、alert 等等,但这些输出方式都不能很好的满足我们的需要,甚至存在一些问题,所以 Rosin 诞生了。

关于 Rosin

Rosin 是一个 Fiddler 插件,它能接收页面中的 console 的输出,将内容持久存储在本地,并展现在 Fiddler 面板。 如果你的项目是通过 Fiddler 代理来开发调试手机页面,那么 Rosin 将会是你的好帮手。
项目地址:  http://alloyteam.github.io/Rosin/

写在前面

大家阅读此文之前,可以先看一篇 MiloYip 的文章:用 JavaScript 玩转游戏物理 (一) 运动学模拟与粒子系统,看完之后再看此文,更加容易理解。

MiloYip 使用的粒子是 canvas 中绘制的圆,还有一些粒子效果是基于 像素级别的,如:火焰字 ,但是使用像素的计算成本太大,因为需要的粒子数量太多,甚至要配合一些 nosie 算法,如(perlin nosie),计算量太大。

所以一般会先设计好粒子的纹理(每个纹理假设是 32*32,一个粒子就包含了九百多个像素了),这样需要的粒子个数不多,计算量也不大,管理粒子的成本也不高(对粒子增删改查)。

canvas globalCompositeOperation

粒子系统在什么时候最漂亮?晚上!所以在绘制纹理的时候,需要设置 globalCompositeOperation 的值为 lighter。其作用是:在图形重叠的地方,颜色由两种颜色值的加值来决定。

globalCompositeOperation 还有非常多的属性可以设置,详情见:w3school。

前端突击队宣传banner
去年 CodeStar 第一季《前端特工》带来的热潮还没完全过去,3 月 21 号,短短几个月后 AlloyTeam 团队又强势推出了 CodeStar 第二季《前端突击队》,这次又将会给各位前端 er 带来什么视觉、体验和智力挑战上的盛宴?

AlloyDesigner 介绍

  AlloyDesigner 的创意来自于 “临摹” 的灵感,使用 AlloyDesigner 后,你可以把设计稿拖进你的 Web 页面铺在页面的最底层,然后就可以对着设计稿来构建 DOM 元素和 CSS 样式啦,这样子是不是直观了很多?通过 AlloyDesigner 直观地调整页面,迅速达到与视觉稿一致的目的。

AlloyDesigner 的官网:http://alloyteam.github.io/AlloyDesigner/

 

alloydesigner5

移动 Web 开发是一块新的领域,给 Web 带来更多机会的同时,也带来了更多的挑战。为了让开发者在移动 Web 的道路上走得更加顺畅,开发更加高效,Spirit(勇气号)由此而生。

Spirit 官网:http://alloyteam.github.io/Spirit/

 QQ20140210113520

什么是 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

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,发现再加新功能比较困难。最近终于下决心重构了下,并在重构的基础上增加了一些新特性。

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

一、坦克结构组成:

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

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