HTML5游戏前端开发秘籍


QQ空间Android版4.2和4.5上线的玩吧游戏“空间疯狂套牛”是一款使用HTML5开发出的手机游戏，虽然还有很多不足，但其中使用的一些技术与技巧还是很有必要为大家分享出来，方便大家用秘籍打通各种关卡创造出更多更好的HTML5游戏。(本秘籍主要讲述使用HTML + CSS技术方面)

一、自适应

Android手机的屏幕碎片化非常严重，各种各样的分辨率非常之多，那么如何让游戏可以适配这些机型就显得尤为重要。这里也是前前后实验了多种方案。先想到用JS来动态的根据分辨率来设置相关元素的大小，但要么在某些机型中获取失败，要么用赋值缩放相关元素时造成游戏崩溃……
继续阅读“HTML5游戏前端开发秘籍”

My MAC APP

终于用上了MacBook Pro，为此专门还买了本《MacTalk·人生元编程》学习，几周下来，装了堆APP用着不错，记录一下：

硬件

  • 驰尚（Qisan）D10白色鼠标：29块，用本本的触摸板总是感觉手很累，腰也是弯的，还是用鼠标吧，我还想多活几年。
  • 锐明 LA270401 Mini DisplayPort 至VGA 转接器：一定要直接转VGA的，不然你就放不了投影。

软件

  • Adobe Fireworks CS6：我用这个用的非常好 :p
  • Adobe Photoshop CS6：打开PSD用
  • Alfred 2：快速打开APP
  • AliWangwang：和淘宝的小二聊天用
  • Android Studio：过段时间做Android APP用
  • Atom：打开有点慢，主要编辑文本用
  • Dash：查API用，基本上没用过
  • DoubanRadio：听歌用的豆瓣电台
  • Dropbox：同步文件，大大的有用
  • FutuNiuniu：炒股用
  • GitHub：管理代码用
  • GoAgentX：你懂的
  • Google Chrome：天天在用
  • Google Earth：没事看看地球
  • Hearthstone：炉石传说是个好游戏
  • IntelliJ IDEA 13：主力开发IDE
  • KeePassX：管理密码
  • Keynote：也许写PPT用
  • MAMP：PHP环境
  • MPlayerX：也许看片用
  • MacVim：学不会啊，先装上VIM
  • Magican：魔法罐头是个删除APP，清理垃圾的好软件
  • Microsoft OneNote：听说这个牛，不过同步速度太慢了
  • Moom：好神器啊，改变窗口大小就靠你了
  • Numbers：也许会用
  • OmniGraffle：以后设计程序UML图时用
  • PPS影音：看片的好神器啊，本本再也不发烫了
  • Pages：也许会用
  • QQ：公司出品的SNS神器
  • QQ音乐：听听歌
  • QQ输入法：用了这么多输入法，还是QQ的五笔我用着最好
  • RTX：一般我就不想开这个
  • Retinizer：有些APP不是高清的，用这个一弄就好了
  • Snip 2：空间和邮箱要用到做截图
  • SourceTree：代码管理
  • The Unarchiver：解压缩的神器
  • Thunder Store：再也不用担心APP的更新问题了
  • Thunder：下载神器
  • VNC Viewer：上VPS看看
  • VirtualBox：装了WINDOWS
  • VisualDiffer：比较代码之不同
  • WeChat：快速给老板发方案用，累不累啊
  • Xcode：以后开发iOS APP用
  • XtraFinder：大神器啊，一定要装上
  • iChm：看CHM文件用，编码问题解决的不好
  • iTerm 2：命令行神器啊
  • iTools：管理iPhone用
  • iTunes：基本没打开过

继续阅读“My MAC APP”

Flappy Bird 成绩生成器

还在为Flappy Bird打不了几关就死而发踌嘛？！！
还在为朋友们在晒Flappy Bird高分而嫉妒嘛？！！
马上使用 Flappy Bird 成绩生成器 吧！！！
使用之后图片分享到微信空间微博，然后就等着朋友们的羡慕嫉妒恨吧！！！

友情提示：拉仇恨不要太狠，1xx的分数就很逆天了~~~

GITHUB源码地址：http://github.com/s5s5/FlappyBirdScore

《我编程，我快乐：程序员职业规划之道》

这几天，我看完了美国人Chad Fowler写的《我编程，我快乐：程序员职业规划之道》（The Passionate Programmer (2nd edition): Creating a Remarkable Career in Software Development）。

Chad Fowler目前是一家Ruby咨询公司的CTO，但之前他是名萨克斯乐手，从乐手转到程序员并成为CTO他积累了很多的职业生涯的经验，他也乐于分享出来，所以就有了本书的出现。在书中，他在技术选择、团队选择、技术学习、提升等方面有很多经验介绍，特别适合程序员同学们阅读，特别是对自己职业生涯还比较迷茫时……

下面就是我整理的一些摘录。
继续阅读“《我编程，我快乐：程序员职业规划之道》”

年终总结2013

2013年是移动端技术大发展的一年，从老婆的小米1s和老爸使用红米的情况上可以看出，手机在改变他们的生活。而我，做为一个技术人员，则有必要满足和他们一样的人民群众的需要，而不只是死抱着PC端不放，拥抱变化，因为变化让生活更加的美好。

但目前看来手机性能的问题制约着我所掌握的技术，做个简单页面还OK，如果复杂些和原生的就差远了，所以有必要研究一些原生的东东了。所以2014年会学习些原生APP技术，期望可以借此提高收入，哈哈哈……

好吧，让2014来的更猛烈些吧！

手机中的页面

今年折腾手机里的页面折腾的不少，一开始要求是用响应式，结果发现做点不变更需求的不要求快速上线的需求还好，可这TMD世界上有不变更的不快速上线的需求吗？
答案是木有啊！！！

先说说响应式页面
一套页面就要适应所有终端有木有，这是一个无底洞啊同志们！！！你要测多少设备，切多少适应式图片，写多少兼容性代码，特别是设计师同志设计出来的没有mobile first，这一开始就注定了后面源源不断的微调啊！！！
当然，今年主要都是跟活动类的需求，比起平台类的来说，时间要求高，过了这个点这活动上线就没什么意义了。所以在我分析了不少响应式页面后……
终于发现，原来做成PC和手机两套页面就可以了。为什么呢？

  • 第一，从数据上来说，现在手机和PC是最大头的访问来源，别的设备，只要显示PC或手机中的页面就OK。
  • 第二，从开发效率上来说，只做手机和PC很有针对性，不像响应式什么都是目标，那什么可能都捞不着。
  • 第三，从性能上来说，因为有第二条有针对性，那么我们也可以针对两种设备做优化，响应式怎么个优化？

接下来就是手机中的页面要怎么弄
继续阅读“手机中的页面”

CSS动画

今年前些日子在 2013 WebRebuild 成都站 上做的了关于CSS动画的分享，所以把分享PPT放出来了，欢迎大家接着拍砖。呵呵，这几天有点小暴发，因为2013年快过去了，赶紧要把一年的心得分享出来，从而好迎接2014的挑战呢~

这个PPT，为了与以往大家的不一样，在表现形式上用了WEB方式实现，切换特效就是用的CSS，谁让咱讲的就是CSS动画呢，为了这，可花了一整天的时间呢。然后里面有不少的DEMO，基本上都是我写的啊，这一年真是一把鼻涕一把泪啊，另外DEMO太多为了性能所以DEMO默认是不显示的，按一下R键就显示当前DEMO，同时也会关闭别的DEMO。当然也是和公司说好，可以放出来的一些代码，虽然前端代码原本别人想看就能看……

好嘛，地址是：http://s5s5.github.io/CSS-Animations/
国际惯例也是放在Github上的：https://github.com/s5s5/CSS-Animations
继续阅读“CSS动画”