前言：

     我们分析了flappy bird的代码思路（flappy bird游戏源代码揭秘和下载），也移植到了android平台（flappy bird游戏源代码揭秘和下载后续---移植到android真机上），现在我们要把代码移植到html5网页浏览器。听起来很棒吧，想不到也可以直接在网页上运行！从window/mac电脑系统, 到android/ios移动系统，再到html5网页浏览器，编写一次，到处运行，这正是cocos2dx editor的神奇之处。

ps: 注意以下事项：

1 笔者撰写本文的前提是：读者已经了解过移植到android平台的博文，如果没有，请跳转过去了解---移植到android平台；

2 请更新cocos2d-x editor到cocos2d-x editor 1.0Beta版本：（很重要）

博文地址：  http://blog.csdn.net/touchsnow/article/details/18451107

背景：

最近火爆全球的游戏flappy bird让笔者叹为观止，于是花了一天的时间山寨了一个一模一样的游戏，现在把游戏的思路和源码分享出来，代码是基于javascript语言，cocos2d-x游戏引擎，cocos2d-x editor手游开发工具完成的，请读者轻砸；

ps：运行demo需要配置好cocos2d-x editor，暂不支持其他工具。还有demo是跨平台的，可移植运行android，ios，html5网页等。

html5移植代码下载：

和JS代码唯一的区别是Published编译目录的代码不同，Sources一模一样

进入代码集中营下载(flappy源码--移植到html5)：  http://blog.makeapp.co/?p=306&preview=true

运行在谷歌chrome浏览器上的效果图

cocos2d-x跨平台游戏引擎
cocos2d-x是全球知名的游戏引擎 ，引擎在全球范围内拥有众多开发者，涵盖国内外各知名游戏开发商。目前Cocos2d-x引擎已经实现横跨ios、Android、Bada、MeeGo、BlackBerry、Marmalade、Windows、Linux等平台。编写一次，到处运行，分为两个版本 cocos2d-c++和cocos2d-html5 本文使用了后者；
cocos2d-x 官网： http://cocos2d-x.org/
cocos2d-x 资料下载   http://cocos2d-x.org/download

cocos2d-x editor 开发工具(2013-02-14 已更新到1.0Beta)：

cocos2dx editor，它是开发跨平台的手机游戏工具，运行window/mac系统上，javascript脚本语言，基于cocos2d-x跨平台游戏引擎, 集合代码编辑，场景设计，动画制作，字体设计，还有粒子，物理系统，地图等等的，而且调试方便，和实时模拟；

cocos2dx editor 下载，介绍和教程：http://blog.csdn.net/touchsnow/article/details/19070665；

cocos2dx editor 官方博客：http://blog.makeapp.co/?cat=8；

Published目录移植代码结构分析：

移植方法步骤：

移植方法很简单，没有android移植那么复杂，只需选择在配置里面html5，默认浏览器（ie浏览器存在兼容性问题，请选择其他浏览器作为默认浏览器），然后点击绿三角运行，在google chrome浏览器如文中效果；编译好的代码在Published目录里面，Published在左侧工程结构里面隐藏了，读者通过代码所在的源目录找寻到；

如何部署到服务器

1  找到Published目录下的boot-html5.js  把里面的cocos2d-html5.min.js  改成Cocos2d-html5.min.js 必须大小写统一；
2  然后打开index.html,修改在浏览器显示的宽高  <canvas id="gameCanvas" width="360" height="640"></canvas>

移植到html5注意事项：

如果黑屏或者位置偏差，在Main.js主函数里面 ，

1  定义好资源  var ccb_resources = [
    {src: "Resources/flappy_packer.plist"},
    {src: "Resources/flappy_frame.plist"} ,
    {src: "Resources/flappy_packer.png"},
    {src: "Resources/bg.png"},
    {src: "Resources/ground.png"}
    /*  {src: "Resources/fonts/big_score.fnt"} ,
     {src: "Resources/fonts/small_score.fnt"},*/
    /* {src: "Resources/fonts/number.png"} ,
     {src: "Resources/fonts/number1.png"}*/
 ];

2 修改网页浏览器里面的显示宽高，找到setDesignResolutionSize 第一个参数表示宽，第二个参数表示高

var glView = director.getOpenGLView();
glView.setDesignResolutionSize(720, 1280, cc.RESOLUTION_POLICY.SHOW_ALL);
cc.Loader.preload(ccb_resources, function () {
       cc.BuilderReader.runScene("", "MainLayer");
 }, this);

flappy博文系列：

flappy bird游戏源代码揭秘和下载

flappy bird游戏源代码揭秘和下载后续---移植到android真机上

flappy bird游戏源代码揭秘和下载后续---移植到html5网页浏览器

flappy bird游戏源代码揭秘和下载后续---日进5万美元的秘诀AdMob广告

flappy bird游戏源代码揭秘和下载后续---移植到苹果ios上 （未写）

笔者语：

想了解更多请进入官方博客，最新博客和代码在官方博客首发；请持续关注，还有更多cocos2dx editor游戏源码即将放出；

联系笔者：zuowen@makeapp.co（邮箱）qq群：232361142

后言：

为了鼓励更多手游爱好者加入cocos2d-x editor阵营，也为了读者坚定对该工具的信心，笔者基于以上的flappy bird代码和新的图片资源，往google play和中国应用市场发布了一个相似的游戏----腾飞的小鸟（fly bird）。该游戏还加入了广告模块，可以获得些许的广告费。也希望读者通过cocos2d-x editor可以在市场上发布更多的好游戏；

google play地址：https://play.google.com/store/apps/details?id=com.makeapp.game.flybird （小秘密：如果应用.apk后缀改为.rar，你会获得意想不到的东西）

豌豆荚市场地址：http://www.wandoujia.com/apps/com.makeapp.game.flybird

机锋市场地址：    http://apk.gfan.com/Product/App741996.html

html5在线演示：http://www.makeapp.co/flybird/ （微软ie浏览器存在兼容性问题，请选择其他浏览器；公司内网，小卡，见谅）

flappy bird游戏源代码揭秘和下载后续---移植到html5网页浏览器相关推荐

  1. flappy bird游戏源代码揭秘和下载后续---移植到android真机上

    前言:         上一篇博客 flappy bird游戏源代码揭秘和下载,源码是运行在window或者mac系统上的,现在我们需要把代码移植到android真机上,让小鸟在手机里飞起来! ps: ...

  2. flappy bird游戏源代码揭秘和下载

    背景: 最近火爆全球的游戏flappy bird让笔者叹为观止,于是花了一天的时间山寨了一个一模一样的游戏,现在把游戏的思路和源码分享出来,代码是基于javascript语言,cocos2d-x游戏引 ...

  3. HTML5版Flappy Bird游戏源码下载

    Flappy Bird相信大家都很熟悉了,2014年最热门的手机游戏之一.Flappy Bird这款游戏是一位来自越南河内的独立游戏开发者阮哈东开发,形式简易但难度极高的休闲游戏,很容易让人上瘾.今天 ...

  4. 飞翔的圆(Flappy Bird)游戏源码完整版

    2019独角兽企业重金招聘Python工程师标准>>> 这个源码是一个不错的休闲类的游戏源码,飞翔的圆(Flappy Bird)游戏源码V1.0,本项目是一个仿Flappy Bird ...

  5. cocos2dx-html5 实现网页版flappy bird游戏

    我也是第一次使用cocos2d_html5,对js和html5也不熟,看引擎自带的例子和引擎源码,边学边做,如果使用过cocos2d-x的话,完成这个游戏还是十分简单的.游戏体验地址: http:// ...

  6. 利用python开发的flappy bird 游戏

    python 中 pygame模块能让我们很方便的编写游戏,16年我用python 仿制了flappy bird 游戏,下面是游戏的完整代码以及素材,分享给大家. 第一个python文件,flappy ...

  7. Python详细了解强化学习算法并基于强化学习Q_learning让电脑玩flappy bird游戏

    完整代码:https://github.com/Connor666/flappy_bird-RL 首先,如果你是为了追求一个非常高的强化学习效果,也就是flappy bird的分数,那么建议出门右拐选 ...

  8. flappy bird游戏

    //flappy bird #include <stdio.h> #include <stdlib.h> #include <conio.h> #include & ...

  9. java实现Flappy Bird游戏（附免费素材+代码+详细注解）

    目录 前言 一.实现效果 二.实现代码 前言 该小游戏我设计成BackGroundView类(背景图).Bird类.Pipe类,Main类四部分 图片素材地址:https://download.csd ...

最新文章

  1. go 调用winapi_golang 调用windows API 中文的处理
  2. 浅谈并发与并行(一)
  3. C++中 int char 的相互转换
  4. GitHub 基本常用知识解答2
  5. 在 Ubuntu 14.04 中配置 PXE 服务器
  6. 操作系统之进程管理：14、读者-写者问题
  7. ubuntu14.04(server amd64)免密码sudo
  8. Element UI el-table 表格多选的使用
  9. esayExcel 获取值 null 去除excel中换行 回车 水平制表符
  10. 介绍几种 Windows10 自带的截图方式
  11. 花之语第七期：栀子花
  12. QGIS基本功|5 QGIS图层进阶（二）- 连接属性表
  13. 著名专家托马斯·拉姆什评孙宇晨出任格林纳达常驻WTO代表
  14. linux etc目录讲解
  15. PHP函数源码之SESSION实现机制
  16. 什么是java工具类_常用高效 Java 工具类总结
  17. 读书笔记（2014-06）
  18. 【matlab】:matlab中如何取整？
  19. 将uc/OS移植到stm32F103上
  20. 软件工程专业期末项目开发全流程模拟日志《用例说明文档》

热门文章

  1. 用Twig启动WordPress开发：入门
  2. CF715B complete the gragh
  3. python气泡图的地图_Python数据可视化：香港地图、房价可视化，绘制气泡图
  4. [数据库实战]sql创建一个view视图
  5. xxxxxxxxxxxxx
  6. 小旋风asp服务器安装了还是打不开asp文件,小旋风AspWebServer - 本地架设ASP网站
  7. layui中导航元素的简单使用
  8. 常见的树形结构（一）
  9. 深度理解矩阵的奇异值，特征值
  10. 【计算机网络】Socket详解