Cocos2d-x-Lua 开发简单的小游戏（记数字踩白块）

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› LUA›LUA教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

Cocos2d-x-Lua 开发简单的小游戏（记数字踩白块）

本篇博客来给大家介绍如何使用Lua这门语言来开发一个简单的小游戏—记数字踩白块。

游戏的流程是这样的：在界面上生成5个数1~5字并显示在随机的位置上，点击第一个数字，其他数字会显示成白块数字消失，玩家可以通过记住数字的显示的位置点击按顺序消除白块，直到白块消除完，游戏成功。

效果图如下：

先说明一下笔者的开发环境：

Xcode 5.1(Mac系统下的苹果开发工具）
Cocos2d-x 3.1.1（Cocos2d-x游戏引擎）
LDT（Lua集成开发环境）

首先你得创建一个Cocos2d-x项目，里面会多个平台代码，具体创建方法麻烦读者参考笔者前面所写的文章，如有疑问可以直接留言交流。

来看看我们项目结构：

》》AppDelegate.cpp

#include "AppDelegate.h"#include "CCLuaEngine.h"#include "SimpleAudioEngine.h"#include "cocos2d.h"using namespace CocosDenshion;USING_NS_CC;using namespace std;AppDelegate::AppDelegate(){}AppDelegate::~AppDelegate(){    SimpleAudioEngine::end();}bool AppDelegate::applicationDidFinishLaunching(){    // initialize director    auto director = Director::getInstance(); auto glview = director->getOpenGLView(); if(!glview) {        // 创建可视区域，位置（0，0）宽：900，高：640  glview = GLView::createWithRect("记数字踩白块", Rect(0,0,900,640));  director->setOpenGLView(glview); }        // 设置设计分辨率    glview->setDesignResolutionSize(800, 480, ResolutionPolicy::SHOW_ALL);    // turn on display FPS    // 打开显示的FPS    director->setDisplayStats(true);    // set FPS. the default value is 1.0/60 if you don't call this    director->setAnimationInterval(1.0 / 60);    auto engine = LuaEngine::getInstance();    ScriptEngineManager::getInstance()->setScriptEngine(engine);    // 执行src目录下的main.lua脚本文件    if (engine->executeScriptFile("src/main.lua")) {        return false;    }    return true;}// This function will be called when the app is inactive. When comes a phone call,it's be invoked toovoid AppDelegate::applicationDidEnterBackground(){    Director::getInstance()->stopAnimation();    SimpleAudioEngine::getInstance()->pauseBackgroundMusic();}// this function will be called when the app is active againvoid AppDelegate::applicationWillEnterForeground(){    Director::getInstance()->startAnimation();    SimpleAudioEngine::getInstance()->resumeBackgroundMusic();}

我们主要在Lua文件中实现我们的逻辑，如何开始呢，首先我们要想象一个场景6*10的方格，一共60个方格，每个方格一个卡片，我们要做的是如何在这60个方格里放入我们的卡片，并且要随机放上去的。

我们先定义卡片类》》card.lua

--[[卡片card.lua]]--function card(num)  -- 创建一个精灵，代表一张卡片  local self = cc.Sprite:create()  local txt,bg -- 卡片文本和背景  --初始化方法  local function init()    self.num = num    --设置内容尺寸    self:setContentSize( cc.size( 80, 80 ) )    --设置锚点    self:setAnchorPoint(  cc.p( 0, 0 ) )    --设置显示数字的文本    txt = cc.Label:create()    txt:setString( num )    txt:setSystemFontSize( 50 )    txt:setSystemFontName( "Courier" )    --设置文本显示的位置，这里是中间    txt:setPosition( cc.p( self:getContentSize().width / 2,  self:getContentSize().height / 2 ) )    --添加到表    self:addChild(txt)    --创建一个精灵，代表背景    bg = cc.Sprite:create()    --颜色块    bg:setTextureRect( cc.rect( 0, 0, 80, 80 ) )    --默认为白色，这里设置为白色    bg:setColor( cc.c3b( 255, 255, 255 ) )    --bg:setPosition( cc.p(0, 0))    --设置锚点    bg:setAnchorPoint(  cc.p( 0, 0 ) )    self:addChild(bg)    --显示文本    self:showTxt()  end  --定义显示文本的方法  self.showTxt = function()    txt:setVisible(true)    bg:setVisible(false)  end  --定义显示背景的方法  self.showBg = function()    txt:setVisible(false)    bg:setVisible(true)  end  init()  return selfend

从卡片类我们可以知道，我们需要传入一个数字，然后对卡片类进行初始化，显示相应的数字，我们的卡片是一个Sprite（我们所说的精灵），我们要往Sprite添加数字（用Label来显示），还要添加我们的背景（同样也是一个Sprite）

。

卡片类定义好之后，我们就要实现我们想要的效果了，定义我们的入口

》》》main.lua

--[[记数字踩白块小游戏2014/6/22main.lua]]-- 引入card.lua文件require( "src/card" )--主方法function Main()  -- 创建一个场景  local self = cc.Scene:create()  -- 声明一个层  local layer  local allPoints -- 存储所有点  local allCards = {} -- 存储所有卡片  local currentNum -- 当前数字  -- 生成可用点  local function genPoints()    allPoints = {}    -- 6行*10列    for i = 0, 9 do      for j = 0, 5 do        -- 插入点到allPoints数组当中        table.insert( allPoints, 1, cc.p( i * 80, j * 80 ) )      end    end     end  -- 添加卡片  local function addCards()    -- 设置随机种子    math.randomseed( os.time() )    local c  -- 卡片    local randNum -- 随机数    local p -- 所在点    -- 添加5张卡片    for var = 1, 5 do      c = card( var ) -- 生成一张卡片      layer:addChild( c ) -- 添加到层当中      -- 根据数组最大值生成随机数      randNum = math.random( table.maxn(allPoints)  )      p = table.remove( allPoints, randNum )      c:setPosition( p )      c:setAnchorPoint(  cc.p( 0, 0 ) )      print("p.x:"..p.x..",p.y:"..p.y);            -- 插入到卡片数组      table.insert( allCards, 1, c )    end  end  -- 开始游戏  local function startGame()    -- 初始值为1    currentNum = 1    -- 先生成可用点    genPoints()    -- 然后添加卡片    addCards()  end  -- 显示所有卡片背景  local function showAllCardsBg()    for key, var in pairs(allCards) do      var:showBg()    end  end  -- 触摸事件，第一个参数为事件类型，第二个参数为x坐标，第二个为y坐标  local function onTouch( type, x, y )    -- 根据x,y生成一个点    local p = cc.p(x,y)    for key, var in pairs(allCards) do      print(var:getPosition())      -- 判断是否是点击范围      local pX,pY = var:getPosition()      if (p.x < (pX + 80)) and (p.y < (pY + 80) and (p.x > pX) and (p.y > pY)) then      --if var:getBoundingBox():containsPoint(p) then        if currentNum == var.num then          -- 如果是点击的数字，则移除卡片          table.remove(allCards, key)          layer:removeChild(var, true)          -- 点击了1之后，其他数字翻过背景          if currentNum == 1 then            showAllCardsBg()          end          -- 当所有卡片都被顺序点击了，提示成功          if table.maxn( allCards ) <= 0 then            print( "Success" )                      end          -- 每次增加1          currentNum = currentNum + 1        end      end    end  end  -- 初始化方法  local function init()    -- 创建一个层    layer = cc.Layer:create()    -- 将层添加到场景    self:addChild( layer )    -- 设置可点击    layer:setTouchEnabled( true )    -- 注册监听事件    layer:registerScriptTouchHandler( onTouch )    -- 开始游戏    startGame()    -- self:addChild(layer)    --    --测试代码    --    local s = cc.Sprite:create("res/mn.jpg")    --    s:setPosition(cc.p(0,0))    --    s:setAnchorPoint( cc.p( 0, 0 ) )    --    layer:addChild(s)    --    --    layer:setTouchEnabled(true)    --    layer:registerScriptTouchHandler( function (type,x,y)    --    --        if s:getBoundingBox():containsPoint(cc.p(x,y)) then    --          print("mn clicked")    --        end    --        print(type)    --        return true    --    end )    --    --    self:addChild(layer)  end  init()  return selfend--入口方法local function _main()  -- 获得导演类实例  local dir = cc.Director:getInstance()  -- 设置不显示帧  dir:setDisplayStats(false)  -- 运行场景  dir:runWithScene(Main())end-- 调用入口方法_main()

以上代码已经很详尽，笔者就不多做解释，主要在这里提一下，如果使用笔者的开发环境的话，需要注意以下几个问题：

1. XCode不能很好的支持Lua的编辑，所以我们使用LDT来进行编码，但会遇到XCode运行程序没有呈现最新效果，这时我们需要对XCode进行Clean，然后再编译。这个过程很麻烦，笔者正在在寻求其他更好的解决方案。

2. 因为Cocos2d-x版本的变化，使用Lua编写C++逻辑代码也发生了相应的变化，一些API被新版本抛弃，比如之前CCDirector会以cc.Director的形式呈现。笔者在网上也没有找到相应的说明，只能通过查看Cocos2d-x提供的示例程序查找相关API的使用。

给我老师的人工智能教程打call！http://blog.csdn.net/jiangjunshow

你好！这是你第一次使用 **Markdown编辑器** 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。

新的改变

我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：

全新的界面设计 ，将会带来全新的写作体验；
在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展示；
增加了 图片拖拽 功能，你可以将本地的图片直接拖拽到编辑区域直接展示；
全新的 KaTeX数学公式 语法；
增加了支持甘特图的mermaid语法¹ 功能；
增加了 多屏幕编辑 Markdown文章功能；
增加了 焦点写作模式、预览模式、简洁写作模式、左右区域同步滚轮设置 等功能，功能按钮位于编辑区域与预览区域中间；
增加了 检查列表 功能。

功能快捷键

撤销：Ctrl/Command + Z
重做：Ctrl/Command + Y
加粗：Ctrl/Command + B
斜体：Ctrl/Command + I
标题：Ctrl/Command + Shift + H
无序列表：Ctrl/Command + Shift + U
有序列表：Ctrl/Command + Shift + O
检查列表：Ctrl/Command + Shift + C
插入代码：Ctrl/Command + Shift + K
插入链接：Ctrl/Command + Shift + L
插入图片：Ctrl/Command + Shift + G

合理的创建标题，有助于目录的生成

直接输入1次#，并按下space后，将生成1级标题。
输入2次#，并按下space后，将生成2级标题。
以此类推，我们支持6级标题。有助于使用TOC语法后生成一个完美的目录。

如何改变文本的样式

强调文本 强调文本

加粗文本 加粗文本

标记文本

~~删除文本~~

引用文本

H₂O is是液体。

2¹⁰ 运算结果是 1024.

插入链接与图片

链接: link.

图片:

带尺寸的图片:

当然，我们为了让用户更加便捷，我们增加了图片拖拽功能。

如何插入一段漂亮的代码片

去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片.

// An highlighted block var foo = 'bar';

生成一个适合你的列表

项目
- 项目
  - 项目

项目1
项目2
项目3

计划任务
完成任务

创建一个表格

一个简单的表格是这么创建的：

项目	Value
电脑	$1600
手机	$12
导管	$1

设定内容居中、居左、居右

使用:---------:居中
使用:----------居左
使用----------:居右

第一列	第二列	第三列
第一列文本居中	第二列文本居右	第三列文本居左

SmartyPants

SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如：

TYPE	ASCII	HTML
Single backticks	`'Isn't this fun?'`	‘Isn’t this fun?’
Quotes	`"Isn't this fun?"`	“Isn’t this fun?”
Dashes	`-- is en-dash, --- is em-dash`	– is en-dash, — is em-dash

创建一个自定义列表

Markdown: Text-to-HTML conversion tool
Authors: John; Luke

如何创建一个注脚

一个具有注脚的文本。²

注释也是必不可少的

Markdown将文本转换为 HTML。

KaTeX数学公式

您可以使用渲染LaTeX数学表达式 KaTeX:

Gamma公式展示 $\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$ 是通过欧拉积分

$\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.$

你可以找到更多关于的信息 LaTeX 数学表达式here.

新的甘特图功能，丰富你的文章

gantt
        dateFormat  YYYY-MM-DD
        title Adding GANTT diagram functionality to mermaid
        section 现有任务
        已完成               :done,    des1, 2014-01-06,2014-01-08
        进行中               :active,  des2, 2014-01-09, 3d
        计划一               :         des3, after des2, 5d
        计划二               :         des4, after des3, 5d