holaJohnny's Tech Blog

androidhtml5微信漂流瓶天天酷跑捕鱼达人linux神经猫cocos2d-x神庙逃亡美女平涂打飞机

黄金矿工是一款在flash时代红极一时的游戏，变种非常多，今天介绍它的html5版本制作过程。这是一款结合了商业元素的游戏，在游戏的某些页面上有企业的品牌露出，这也是html5游戏盈利的一种方式，您可以根据需要替换成需要的品牌。首先show一下最终成果，PC玩家点这里 手机玩家扫描二维码： 如果您需要在本游戏的基础上加以改进点这里。在开始介绍游戏开发步骤前，先打个广告，对html5游戏开发，Ta

用TangIDE开发游戏的朋友，可能会用到网格控件UIGridView，它用来管理排列排列整齐的子控件非常方便。但是默认的布局下子控件会将网格填充的满满当当。如下图： 如果你希望子控件之间留有缝隙，显得美观一些，像这样： 那么，你只需要改写UIGridView的relayoutChildren方法就可以了，改动只需2处。var me = this;var win = this.getWindo

伐木工游戏大家都玩过，今天介绍它在TangIDE上的实现方式，大概70行左右代码。这个版本的伐木工，是为麦当劳定制的，放了一些麦当劳的一些产品。先show一下最终的成果，您可以点这里玩，或者手机扫描二维码： 当然如果您想在线编辑此游戏，点这里。在开始介绍游戏开发步骤前，先打个广告，对html5游戏开发，TangIDE 或者Cantk 感兴趣的朋友请扫描下方二维码，加入七巧板官方QQ交流群，一起

用TangIDE开发游戏的朋友都知道，你可以像编辑普通的窗口一样编辑资源加载窗口，加入各种丰富的控件和动画效果，但是进度条相对比较单调，现在进度条默认是两张小图，加载时按九宫格来绘制，如果你不想用九宫格，想用两张长途，那么你可以在资源加载窗口的onSystemInit事件下，重写进度条控件(UIProgressBar)的drawBgImageH方法（这里的H表示水平形状的进度条），改变图片的绘制方式

之前写过一篇打地鼠的博客70行的代码实现打地鼠游戏，仔细思考过后，发现70行代码都有点多余了，应用tangide的控件特性，可以将代码量缩减到20行左右。 先show一下最终成果，点击试玩：打地鼠，或者扫描二维码： 如果你想在这个游戏上改进，点击这里。 开始讲解之前，打个广告，欢迎html5游戏开发爱好者扫描下方二维码或者搜群号223466431，加入开发者QQ群，我们

消灭星星是一款经典的休闲游戏，因此花了一点时间在Hola Studio上实现它。本游戏包含完整的游戏元素，包括广告、音乐、音效、振动、关卡、分享等。游戏截图扫描二维码游戏链接：http://studio.holaverse.com/apprun.html?mode=preview&user_id=0f4a0994-b11d-494f-bfa0-a1a006a63d01&game_key=23eeac

首先学会F12的使用参考：http://jingyan.baidu.com/article/3f16e003b7723b2590c1034c.htmlHola Studio事件代码的调试基于你已经学会了如何使用F12，下面讲如何调试Hola Studio通过菜单“文件/在设备上预览”生成一个URL。打开这个URL。这个URL类似于：http://studio.holaverse.cn/appru

前言：Tangide已经全面迁移到新域名studio.holaverse.com，加入更多特性，性能更稳定，控件更丰富，点此了解。原域名已经不再维护，项目迁移方法参考如何将游戏从tangide导入至Hola Studio。在开始开始进行开发打地鼠前，先了解Cantk的几大特性。事件驱动的开发事件驱动的开发是Cantk最重要的特性之一，这些事件应该是真实世界中的事件（至少大部分是），是开发者脑海中最先

拼图游戏是每个人小时候都玩过的经典休闲游戏，依托Hola Studio强大的图片功能和事件回调体系，实现一个游戏性十足的拼图游戏并不难。本文就介绍整个游戏的制作过程，本游戏包含完整的游戏元素，包括广告、关卡、分享等元素，你可以自行添加其他游戏元素，也可以将素材替换成你需要的元素。游戏截图 扫描二维码 游戏链接 点击链接打开游戏导入为你的项目 点击链接导入项目游戏界面的编辑游戏主要有四个界面

熟悉box2d开发的朋友都知道，有一款编辑物理场景的神器RUBE，虽然Hola Studio本身已经具备相当强大的物理引擎编辑功能，但RUBE毕竟是专业做物理场景的，有必要将RUBE导出的资源集成进来。下面介绍Hola Studio导入一个RUBE配置的过程。新建一个空白的项目。在场景中，拖入一个UIAssets组件 . 选中UIAssets组件，在右侧特有属性栏中单击“管理资源“添加资源（RU

要实际精灵的翻转，非常简单，先看实际效果点这里。代码只有区区几行：var sp = this.getWindow().find("ui-status2-general");var ac1 = {scaleXEnd:0};var ac2 = {scaleXEnd:1};sp.animate(ac1, function() { var fx = sp.getFlipX(); sp.

对于没有接触过html的朋友，要实现一个最简单的html5打地鼠游戏，也是不知道从何下手的。就算是html高手，没有上千行代码，也完不成一个像样的打地鼠游戏。网上找到一个开源的打地鼠游戏(参见下载地址)，粗略看了一下代码，代码行数1000+。今天我要介绍的打地鼠游戏，主要逻辑代码，也就60多行，所有的代码加起来也就100多行，是为某客户定制的一款比较完整的商业游戏，大部分的功能也就只是一下午的时间就

在线预览：http://osgames.duapp.com/apprun.html?appid=osgames1-961421749977376 在线编辑：http://osgames.duapp.com/gamebuilder.php?appid=osgames1-961421749977376 微信扫描： 游戏截图： 别踩白块是一款非常流行的游戏，该游戏于2014年4月16日上线Ap

在线预览：http://osgames.duapp.com/apprun.html?appid=osgames1-951421981197090 在线编辑：http://osgames.duapp.com/gamebuilder.php?appid=osgames1-951421981197090 微信扫描： 微信打飞机实现起来并不难，需要用到的知识点有如下几点：碰撞检测：敌机与敌机之间不检

Cantk中的窗口(UIWindow/UIScene)与Android的Activity等组件一样有完整的生命周期，假设我的Web应用有两个窗口：FirstWindow，SecondWindow，整个应用的生命应该如下图所示：Created with Raphaël 2.1.2FirstWindowFirstWindowSecondWindowSecondWindow1、FirstWindow's

在线预览：http://osgames.duapp.com/apprun.html?appid=osgames1-551421721381542 在线编辑：http://osgames.duapp.com/gamebuilder.php?appid=osgames1-551421721381542 微信扫描： 运行截图： 套圆环是火舞上的一款非常火爆的游戏，它是FlappyBird的变种

在线预览：http://osgames.duapp.com/apprun.html?appid=osgames1-801422234293697 在线编辑：http://osgames.duapp.com/gamebuilder.php?appid=osgames1-801422234293697 微信扫描： 运行截图： 除了重力感应游戏，GameBuilder开发传统的游戏也毫不逊色，作为

在线演示：http://osgames.duapp.com/apprun.html?appid=osgames1-911422256817006 在线编辑：http://osgames.duapp.com/gamebuilder.php?appid=osgames1-911422256817006 微信扫描： 运行截图： FlappyBird是2014年爆红的一款游戏，属于经典的重力感应游戏

在线运行：http://osgames.duapp.com/apprun.html?appid=osgames1-871422195197258 在线编辑：http://osgames.duapp.com/gamebuilder.php?appid=osgames1-871422195197258 微信扫描： 运行截图： 这里实现微信漂流瓶不是真的完全实现，而是借机会介绍一下Cantk的

今天介绍一款游戏叫做《AA》，是在最近在IOS上刚刚流行起来的一款游戏，非常虐心但有非常好玩，现在我们讲它在tangide（GameBuilderV2.0）上的利用控件UICanvas实现它。在线运行：http://www.tangide.com/apprun.html?appid=preview721427350809280 在线编辑：http://www.tangide.com/gamebui

写了一个简单的image转dataurl的工具。工具链接：http://www.tangide.com/apprun.html?appid=previewqqArmily-291432805858708将image链接填到编辑框里，点击确定进行转换。实现代码：var img = new Image();var win = this.getWindow();img

预览效果：TangIDE贝塞尔曲线轨迹代码：var me = this;var win = this.getWindow();var sp = win.find("ui-sprite-general");var factor = 0.01;//贝塞尔的三个点{100, 100}, {20, 700}, {400, 20}function updatePosition() {

Hola Studio除了支持导入RUBE配置，参考上一篇blog：Hola Stduio导入RUBE配置的过程。本身编辑物理场景也是非常方便的，这里拿一个多边形的编辑举例。熟悉box2d的朋友知道，多边形分辨凸多边形和凹多边形，这两种多边形在Hola Studio里是可以任意转换的，换句话说，你直观拖拽出你想要的形状，Hola Studio实时计算这些点的关系，从而生成对应的多边形刚体。目前Hol