http://www.cocoachina.com/bbs/read.php?tid=458895&page=1&toread=1#tpc
New: 教程司令部已经更新了教程 往后不再使用链式的教程结构
写完这篇教程就回老家了 呵呵
我们将登录验证接上 把之前的代码拿出来改吧
先从前端开始吧 将之前的login2项目开起来
在资源管理器新建几个脚本 myLogin 负责连接服务器的逻辑 mySocketIO负责生成全局的io实例 然后socket.io就从外面扔进来吧 http://pan.baidu.com/s/1bnMts4Z,1
注：此篇教程将不再将SocketIO和mysql的基本内容 请参考之前两篇的教程 并请提前将数据库中t_user中的userName和password 都改为大写 我这里的为’LINHAIWEI123’ ‘ASD520’
http://www.cocoachina.com/bbs/read.php?tid-458031-fpage-2.html
http://www.cocoachina.com/bbs/read.php?tid-458173.html
脚本建完后 我们开始吧
首先打开mySocketIO 在IO生成全局io就完事了
这样就可以在其他脚本访问io实例了 方便其他脚本与服务器连接
然后将mySocketIO扔到canvas的属性检查器吧
然后继续吧负责连接数据库逻辑的脚本完成吧
打开myLogin
首先将各种引用添上 serverFeedback用来写服务器回传回来的消息 这里会写上下面的errorText或者emptyText 中间两个label我们可以用来获取用户名和密码
然后写上登录的逻辑吧 首先if判断用户名或密码是否为空 为空则显示提示信息 并返回 否则将用户名和密码发送到服务器
为空的判断一个就判断用户名或密码是不是空串 用户名还要额外判断是否为‘请’ 密码由于回显的*号和真正的密码是分开存储的 可以不需要判断‘请’
getUserName 和 getPassword 就是用户名和密码获取的一个封装 如果以后获取方式改变 修改这里就好了
然后在onload中添加服务器回传的消息吧 如果用户名或密码错误 就提示错误并返回 ， 否则清空错误 并切换到战斗场景
到这里myLogin就完成了 后面补一下之前的坑 打开 myPasswordInput 将self.passwordText.string 改为 self.passwordText 并且靠右箭头位置应将self.passwordInput改为self.passwordText
然后添加引用 将myLogin扔到层级管理器submit下
然后选中层级管理器中myLogin 将引用添上 其中在canvas下新建一个 label 重命名为serverFeedback 内容清空 放在submit按钮左边位置(大家可以自行修改位置 看得到就行) 颜色修改为红色
然后为submit按钮添加回调函数 选中submit 将属性检查器拉到下面 Click Events 点右侧上方三角形加一 将层级管理器中的myLogin拉到下面的Target Component选myLogin Handler选login
到这里前端的准备就完成了
下面写一下后台的代码
自行新建一个文件 在下面新建一下两个文件 一个sever.js 一个login文件夹
然后写server.js的代码 打开server.js
其中begin登录 end登录之外的代码属于一个简单的服务器框架 没有特殊需要我们就不需要去修改它
我们的登录代码监听前台传来的消息 然后调用logindao来处理 这里不再详细讲 参考 之前提到的教程
然后在login文件夹下新建loginDao.js
然后打开loginDao.js 敲入下面的代码 与之前教程相同的部分不再介绍 这里我们修改了返回的方式 如果没有这条用户数据 我们返回false代表登录失败 否则将改用户名和密码存为session 变量 并返回true代表登录成功 完成后 values要清空 否则第二次连接会出错
到这里后台已经完成了 我们继续回到前台部分 新建一个fightScene
然后选中fightScene 战斗场景的逻辑是下一部分的内容 这里先简单示意一下 我就只新建了一个label 内容改为 ‘战斗场景’
到这里已经可以看一下效果了
将服务器开起来
运行loginScene
用户名或密码为空
用户名或密码错误
登录成功 切换场景
源码 : http://pan.baidu.com/s/1skcLSJF,1
下一篇开始着手战斗场景部分介绍
http://www.cocoachina.com/bbs/read.php?tid=458895&page=1&toread=1#tpc
下一篇 CocosCreator + 战斗系统(3) 简易教程 coming soon…