Chat Idea:扫雷网页版实战

最近最常玩的游戏是扫雷。年纪大了,干什么时候都先考虑成本,游戏也是如此。扫雷的成本最低,倒不是说购买成本,而是启动、游戏、退出之类的成本。

可惜的是,经典版扫雷已经从 Windows 10 里移除了,现在只能通过 Windows 应用商店装一个很复杂的扫雷游戏,花样多了很多,却并不好玩。所以我现在多半玩网页版。

玩着玩着,出于程序员的本能,我就开始考虑如何写这个游戏,逻辑不算复杂,功能点也不多,好像蛮适合做成“实战派”教程的,比如用 Grid 写界面,项目结构就用 Vue CLI 3 吧,然后部署的话前端纯静态就够了。

那么就愉快的决定了吧,把这个项目做出来,把中间需要的知识,用到的技能、工具,可能会遭遇的问题记下来分享出来,写成一篇文章,分享出去。读完整篇文章,你将学会:

  1. 使用 Vue CLI 3 搭建项目
  2. 使用 CSS Flex + Grid 完成页面布局
  3. 扫雷游戏的逻辑
  4. 使用 Vue 完成游戏逻辑
  5. 记录成绩
  6. 部署和分享

目标读者:

  1. 初级开发者,能看到一个项目的成型
  2. 希望了解现代化前端框架、工具链

Android Hybrid App四大坑

我们没有选择phoengap为技术基础,而是自行开发原生框架,主要目标平台是Android——嗯,就是那个从系统版本到模块组合都巨分散的Android,可以这么说,坎坷从立项的那一刻起就已经注定了……接下来,便请听我一一讲述,Android Hybrid App四大坑。

首先解释下题目,Hybrid App,混合应用,代表平台Phonegap,一般指使用原生包装Web页面开发的应用。与原生应用相比,主要用户界面和业务逻辑都是用Web技术也就是HTML+CSS+Javascript实现的;与Web应用相比,Web部分打包在应用内部,使用时不需要网络。

顺便说一句,很多解决方案其实不算Hybrid,比如Adobe AIRTitaniumMono,这些都是使用某一特定技术开发跨平台应用的工具,最终产品都是编译成原生来跑的。

我们没有选择phoengap为技术基础(我对此并不满意,我认为以phonegap为基础可以少走一些弯路,少花一些精力,还能产出很多有价值的副产品),而是自行开发原生框架,主要目标平台是Android——嗯,就是那个从系统版本到模块组合都巨分散的Android,可以这么说,坎坷从立项的那一刻起就已经注定了……接下来,便请听我一一讲述:Android Hybrid App四大坑。(此文主要针对Android 4.3-的webview,部分浏览器比如Chrome已经改善了具体实现,所以Web App其实环境不错。)

游戏泡泡v0.2首页截图
游戏泡泡v0.2首页截图

前端代码开源就好,https://github.com/Dianjoy/gamepop,要跑起来需要修改config.js,把if (debug) {}的内容删掉。

继续阅读“Android Hybrid App四大坑”

文章预告:移动开发四大坑

虽然明知道没什么人看,不过也先放个预告吧,其实是怕自己到时候忘记了。

虽然明知道没什么人看,不过也先放个预告吧,其实是怕自己到时候忘记了。

《移动开发四大坑》,分享这次移动泡泡开发过程中踩到的坑和解决方案:

  1. 缺少标准flexbox,没法自动换行,导致列表排版出问题
  2. tap和click之间的300ms引来的各种问题
  3. position:relative;也可能是罪魁祸首
  4. 很多API都不是默认开启的,得用原生实现