八斤哥都弱爆了，不服来战，小游戏源码分享
最近网络上很火的一个视频让我的手突然有点儿痒痒，好长时间没有用的cocos2d，刚吃完晚饭闲来无事就用cocos2d做了一个拼酒的小游戏和大家交流和学习。
游戏逻辑：
在规定的时间内以最快的速度去喝酒，当然在喝的过程中人会喝醉，这儿时候需要喝一杯茶水解酒才能够继续饮酒，不然就直接喝挂了，游戏也就Over了，喝完酒后弹出提示信息页面。
实现效果：
实现代码：
实现代码主要包含一个HTML页面、一个JS文件和资源文件
对于HTML文件代码主要提供一个canvas、游戏over是提示信息展现、声音播放标签，index.html源码如下：
<!DOCTYPE html>
<html style="width: 100%;height: 100%">
<head>
<meta charset="utf-8">
<title id = "myTitle">哈哈，挑战八斤哥，不服来拼</title>
<link rel="icon" type="image/GIF" href="res/favicon.ico"/>
<link href="style.css" rel="stylesheet" type="text/css"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="full-screen" content="yes"/>
<meta name="screen-orientation" content="portrait"/>
<meta name="viewport" content="target-densitydpi=high-dpi,width=device-width"/>
<meta name="x5-fullscreen" content="true"/>
<meta http-equiv="Access-Control-Allow-Origin" content="*"/>
<meta name="360-fullscreen" content="true"/>
<style>
body{
width: 100%;
margin: 0px;
padding: 0px;
height: 100%;
}
body, canvas, div {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-khtml-user-select: none;
/*-webkit-tap-highlight-color: rgba(0, 0, 0, 0);*/
}
</style>
<!-- google 统计 <script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-58090484-1', 'auto');
ga('send', 'pageview');
</script>
-->
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "//hm.baidu.com/hm.js?f4f4b6154b77c1f86ca514981039116c";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</head>
<body style="padding:0; margin: 0;">
<canvas id="gameCanvas" width="640" height="831"></canvas>
<div id="regPage" class="regPage tc hide">
<div class="regBg regBorder">
<div class="tc">
<img class="logo" src="res/sharelogo.png"/>
</div>
<ul class="tc regList">
<li>
<div>
<span class="tName" id = "showInfo"></span>
</div>
</li>
</ul>
<div class="tTips_area">
<div class="tTips">
<p>《豆点餐吧》温馨提示：
</br>1、酗酒有害健康，拼酒需谨慎；
</br>2、为了您和他人的安全，酒后切勿驾车；
</br>3、酒小喝怡情、大喝伤身。</p></br>
<p>关爱他就赶快点击<a style = "color:red;">右上角</a>分享给您的朋友吧</br>是“爷们”就来线上一战</p></br>
<p class="tTips_second">
微信：pangzhihuihui
</p>
</div>
</div>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
<div class="tc btnArea">
<input type="button" onclick="onSubmitClick()" class="submitBtn" value=""/>
</div>
</div>
</div>
<div class="hide">
<audio id="myAudio" loop="true"></audio>
</div>
<div class="hide">
<audio id="myDrinkAudio"></audio>
</div>
<div class="hide">
<audio id="myGameOverAudio"></audio>
</div>
<div class="hide">
<audio id="myTeaWarningAudio"></audio>
</div>
<div class="hide">
<audio id="successAudio"></audio>
</div>
<script src="frameworks/cocos2d-html5/CCBoot.js"></script>
<script src="main.js"></script>
</body>
</html>
上述代码中有一个地方需要留意的就是audio标签，当标签中有loop属性那么声音文件会一直循环播放，如果想让某一个声音文件就播放一次，那么就把loop属性去掉。
CCBoot.js文件是cocos2d的根文件，在创建游戏的时候引入即可，无须改动。
main.js是程序入口，代码如下：
cc.game.onStart = function () {
cc.view.adjustViewPort(true);
// cc.view.setTargetDensityDPI(cc.DENSITYDPI_HIGH);
cc.view.enableAutoFullScreen(false);
var mode = cc.sys.isMobile && window.navigator.userAgent.indexOf("MicroMessenger") != -1 ? cc.ResolutionPolicy.FIXED_HEIGHT : cc.sys.isMobile ? cc.ResolutionPolicy.FIXED_WIDTH : cc.ResolutionPolicy.SHOW_ALL;
cc.view.setDesignResolutionSize(640, 831, mode);
//load resources
cc.LoaderScene.preload(g_resources, function () {
cc.director.runScene(new MainScene());
}, this);
};
cc.game.run();
在cocos2d做小游戏的时候需要将资源进行预加载，所以需要在这个资源js中一一罗列出来，以便于预加载，具体代码如下：
var res = {
background_png: "res/bg.png",
firstPage_png: "res/firstPage.png",
firstPage_plist: "res/firstPage.plist",
body_png: "res/body.png",
desk_png: "res/desk.png",
deskLeg_png: "res/deskLeg.png",
glass_png: "res/glass.png",
tea_png: "res/tea.png",
doudian_png:"res/doudian.png",
teaSelect_png: "res/teaSelect.png",
bottle_png: "res/bottle.png",
emptyGlass_png: "res/emptyGlass.png",
face_png: "res/face.png",
backArm_png: "res/backArm.png",
cigarette_png: "res/cigarette.png",
cigarette2_png: "res/cigarette2.png",
head_png: "res/head.png",
mouth1_png: "res/mouth1.png",
mouth2_png: "res/mouth2.png",
leftArm_png: "res/leftArm.png",
rightArm_png: "res/rightArm.png",
};
var g_resources = [];
for (var i in res) {
g_resources.push(res[i]);
}
最后也就是成功消息的核心代码了，也是我们自己实现逻辑的代码，完整代码如下：
var MainScene = cc.Scene.extend({
listener: null,
accelListener: null,
currentIndex: 0,
sceneList: [],
ctor: function () {
this._super();
cc.spriteFrameCache.addSpriteFrames(res.firstPage_plist);
},
onEnter: function () {
this._super();
this.initUI();
this.initHideEvent();
curScene = this;
initMusic();
playMusic(true);
},
initUI: function () {
var bg = new cc.Sprite(res.background_png);
bg.anchorX = 0;
bg.anchorY = 0;
bg.scaleX = cc.winSize.width / bg.width;
bg.scaleY = cc.winSize.height / bg.height;
this.addChild(bg, 0);
this.arrow = new cc.Sprite("#arrow.png");
this.arrow.setPosition(cc.pAdd(cc.visibleRect.bottom, cc.p(0, 50)));
var posY = this.arrow.y;
var arrowAction = cc.repeatForever(cc.sequence(cc.spawn(cc.moveTo(0.8, cc.p(this.arrow.x, posY + 30)).easing(cc.easeIn(0.5)), cc.fadeOut(1)), cc.delayTime(0.8), cc.callFunc(function () {
this.arrow.y = this.arrow.y - 30;
this.arrow.opacity = 255;
}, this)));
this.arrow.runAction(arrowAction);
this.addChild(this.arrow, 1);
this.menuItemToggle = new cc.MenuItemToggle(new cc.MenuItemImage("#music.png"), new cc.MenuItemImage("#music_sel.png"), this.toggleMusicCallback, this);
this.menuItemToggle.setPosition(cc.pAdd(cc.visibleRect.right, cc.p(-this.menuItemToggle.width / 2 - 30, 140)));
var togglemenu = new cc.Menu(this.menuItemToggle);
togglemenu.anchorX = 0;
togglemenu.anchorY = 0;
togglemenu.x = 0;
togglemenu.y = 0;
this.addChild(togglemenu, 1);
this.animLayer = new cc.Layer();
this.addChild(this.animLayer);
this.sceneList.push(new Layer1());
for (var i = 0; i < this.sceneList.length; i++) {
var scene = this.sceneList[i];
scene.anchorX = 0;
scene.anchorY = 0;
scene.x = 0;
scene.y = 0;
if (this.currentIndex != i) {
scene.setVisible(false);
}
this.animLayer.addChild(scene, this.sceneList.length - i);
}
},
initHideEvent: function () {
cc.eventManager.addCustomListener(cc.game.EVENT_SHOW, function () {
playMusic(true);
});
cc.eventManager.addCustomListener(cc.game.EVENT_HIDE, function () {
playMusic(false);
});
},
toggleMusicCallback: function (sender) {
if (sender.getSelectedIndex() == 0) {
playMusic(true);
} else {
playMusic(false);
}
},
togleArrow: function (status) {
if (status) {
this.arrow.visible = true;
}
else {
this.arrow.visible = false;
}
}
});
var Layer1 = cc.Layer.extend({
drinking:false,
achole:0,
tea:10,
teaWarning:5,
initTime:150,
timing:150,
gameFire:false,
gameOver:true,
ctor: function () {
this._super();
this.initUI();
},
onEnter: function () {
this._super();
this.appear();
this.gameListener();
this.cigaretteListener();
},
initUI: function () {
this.accLayer = new cc.Layer();
this.accLayer.anchorX = 0;
this.accLayer.anchorY = 0;
this.accLayer.x = 0;
this.accLayer.y = 0;
this.addChild(this.accLayer);
this.timeLabel = cc.LabelTTF.create("Ready", "Arial", 40);
this.timeLabel.setPosition(this.timeLabel.width, cc.winSize.height - this.timeLabel.height);
this.addChild(this.timeLabel);
this.acholeLabel = cc.LabelTTF.create("酒量：0", "Arial", 40);
this.acholeLabel.setPosition(cc.winSize.width - this.acholeLabel.width, cc.winSize.height - this.timeLabel.height);
this.addChild(this.acholeLabel);
this.tipLabel = cc.LabelTTF.create("豆点餐吧，让生活更便捷", "Arial", 30);
this.tipLabel.setColor(cc.color(204, 255, 0, 255));
this.tipLabel.setPosition(cc.winSize.width - this.tipLabel.width, cc.winSize.height - this.tipLabel.height*5);
this.addChild(this.tipLabel);
this.deskLeg = new cc.Sprite(res.deskLeg_png);
this.deskLeg.setPosition(cc.pAdd(cc.p(this.deskLeg.width / 2, 0), cc.p(0, this.deskLeg.height / 2)));
this.addChild(this.deskLeg);
this.desk = new cc.Sprite(res.desk_png);
this.desk.setPosition(cc.pAdd(cc.p(this.desk.width / 2, 0), cc.p(0, (this.desk.height / 2)+(this.deskLeg.height))));
this.addChild(this.desk);
this.glassBtn = new cc.MenuItemImage(res.glass_png, res.emptyGlass_png, this.glassClick, this);
this.glassBtn.setPosition(cc.pAdd(cc.p(0, 0), cc.p(-this.glassBtn.width, this.desk.y+this.glassBtn.height/2-10)));
var menu = new cc.Menu(this.glassBtn);
menu.x = 0;
menu.y = 0;
this.addChild(menu);
this.bottle = new cc.Sprite(res.bottle_png);
this.bottle.setPosition(cc.pAdd(cc.p(0, 0), cc.p(-this.bottle.width, this.desk.y+this.desk.height/4)));
this.addChild(this.bottle);
this.teaBtn = new cc.MenuItemImage(res.tea_png, res.teaSelect_png, this.teaClick, this);
this.teaBtn.setPosition(cc.pAdd(cc.p(0, 0), cc.p(cc.winSize.width+this.teaBtn.width, this.desk.y+this.teaBtn.height/2-10)));
var menuTea = new cc.Menu(this.teaBtn);
menuTea.x = 0;
menuTea.y = 0;
this.addChild(menuTea);
this.body = new cc.Sprite(res.body_png);
this.body.setPosition(cc.pAdd(cc.p(cc.winSize.width/2, 0), cc.p(0, (this.desk.height)+(this.deskLeg.height)+this.body.height/2)));
this.addChild(this.body);
this.backArm = new cc.Sprite(res.backArm_png);
// this.backArm.scale = 0;
this.backArm.setPosition(cc.pAdd(cc.p(cc.winSize.width/2, 0), cc.p(0, this.body.y+20)));
this.addChild(this.backArm);
this.head = new cc.Sprite(res.head_png);
this.head.setPosition(cc.pAdd(cc.p(cc.winSize.width/2, 0), cc.p(0, this.body.y+this.head.height/2-12)));
this.addChild(this.head);
this.face = new cc.Sprite(res.face_png);
this.face.setPosition(cc.pAdd(cc.p(cc.winSize.width/2, 0), cc.p(0, this.body.y+this.head.height/2-12)));
this.addChild(this.face);
this.mouth1 = new cc.Sprite(res.mouth1_png);
//this.mouth1.scale=0;
this.mouth1.setPosition(cc.pAdd(cc.p(cc.winSize.width/2, 0), cc.p(0, this.face.y - this.face.height/2-8)));
this.addChild(this.mouth1);
this.cigarette = new cc.Sprite(res.cigarette_png);
this.cigarette.setPosition(cc.pAdd(cc.p(cc.winSize.width/2-15, 0), cc.p(0, this.face.y - this.face.height/2-15)));
this.addChild(this.cigarette);
this.cigarette2 = new cc.Sprite(res.cigarette2_png);
this.cigarette2.scale = 0;
this.cigarette2.setPosition(cc.pAdd(cc.p(cc.winSize.width/2-15, 0), cc.p(0, this.face.y - this.face.height/2-15)));
this.addChild(this.cigarette2);
this.mouth2 = new cc.Sprite(res.mouth2_png);
this.mouth2.scale = 0;
this.mouth2.setPosition(cc.pAdd(cc.p(cc.winSize.width/2, 0), cc.p(0, this.face.y - this.face.height/2-8)));
this.addChild(this.mouth2);
this.leftArm = new cc.Sprite(res.leftArm_png);
this.leftArm.scale = 0;
this.leftArm.setPosition(cc.pAdd(cc.p(this.body.x, 0), cc.p(-this.body.width/2, this.body.y-this.body.height/2+35)));
this.addChild(this.leftArm);
this.rightArm = new cc.Sprite(res.rightArm_png);
this.rightArm.scale = 0;
this.rightArm.setPosition(cc.pAdd(cc.p(cc.winSize.width/2+this.head.width/2, 0), cc.p(5, this.body.y+10)));
this.addChild(this.rightArm);
},
refresh:function(){
this.drinking=false;
this.achole=0;
this.tea=10;
this.teaWarning=5;
this.initTime=150;
this.timing=150;
this.gameFire=false;
this.successPlayed=false;
this.gameOver=true;
this.appear();
this.gameListener();
var item = getById("regPage");
addClass(item, "hide");
addClass(item, "animOut");
removeClass(item, "anim");
},
destroy:function(){
this.disappear();
},
cigaretteListener:function(){
var self = this;
var c = 1;
setInterval(function(){
if(!self.drinking){
if(c==1){
self.cigarette.cAction = cc.scaleTo(0, 0);
self.cigarette.runAction(self.cigarette.cAction);
self.cigarette2.c2Action = cc.scaleTo(0, 1);
self.cigarette2.runAction(self.cigarette2.c2Action);
c=2;
}else{
self.cigarette.cAction = cc.scaleTo(0, 1);
self.cigarette.runAction(self.cigarette.cAction);
self.cigarette2.c2Action = cc.scaleTo(0, 0);
self.cigarette2.runAction(self.cigarette2.c2Action);
c=1;
}
}
}, 500);
},
gameListener:function(){
var self = this;
var gl = setInterval(function(){
if(!self.gameOver && self.timing>0 && self.tea>0){
self.timing--;
self.timeLabel.setString("时间："+self.timing);
if(self.tea<=self.teaWarning){
playWarningMusic(true);
self.tipLabel.tipAction = cc.scaleTo(0.2, 1);
self.tipLabel.runAction(self.tipLabel.tipAction);
self.tipLabel.setString("快喝高了，点击红色茶杯解酒");
self.tipLabel.setPosition(cc.winSize.width - self.tipLabel.width*2/3, cc.winSize.height - self.tipLabel.height*5);
}else{
playWarningMusic(false);
self.tipLabel.tipAction = cc.scaleTo(0.2, 0);
self.tipLabel.runAction(self.tipLabel.tipAction);
}
}else{
playDrinkMusic(false);
playWarningMusic(false);
self.gameOver=true;
if(self.gameFire && !self.successPlayed){
self.destroy();
self.showShare(self.achole, self.timing, self.tea>0);
playMusic(false);
playSuccessMusic(true);
self.successPlayed = true;
}
if(self.tea<=0){
playSuccessMusic(false);
playGameOverMusic(true);
playMusic(false);
clearInterval(gl);
}
self.stopDrink();
}
},200);
var startTag = 3;
var readyTimeInterval = setInterval(function(){
self.tipLabel.setString("点击玻璃杯拼酒；点击红色茶杯解酒。");
self.tipLabel.setPosition(cc.winSize.width - self.tipLabel.width/2, cc.winSize.height - self.tipLabel.height*5);
self.tipLabel.scale=1;
if(startTag>0){
self.timeLabel.setString(startTag);
}else{
self.gameOver = false;
self.gameFire = true;
clearInterval(readyTimeInterval);
}
startTag--;
},1000);
},
showShare:function(achole, timing, isSuccess){
var item = getById("regPage");
removeClass(item, "hide");
removeClass(item, "animOut");
addClass(item, "anim");
var title = getById("myTitle");
var tipInfo = getById("showInfo");
var useTime = (this.initTime - timing)/5;
if(isSuccess){
tipInfo.innerHTML="我用"+useTime+"秒干了"+achole+"杯酒</br>现在精神抖擞，快来围观呀！";
title.innerHTML="哈哈，挑战八斤哥，不服来拼！我用"+useTime+"秒干了"+achole+"杯酒</br>现在精神抖擞，快来围观呀！";
}else{
tipInfo.innerHTML="我用"+useTime+"秒，干了"+achole+"杯酒</br>但是喝高了，求快速醒酒药！";
title.innerHTML="哈哈，挑战八斤哥，不服来拼！我用"+useTime+"秒，干了"+achole+"杯酒</br>但是喝高了，求快速醒酒药！";
}
},
glassClick: function () {
if(!this.drinking && !this.gameOver){
this.tea--;
if(this.tea<=0){
this.gameOver = true;
return true;
}else{
this.startDrink();
this.achole++;
this.drinking = true;
this.acholeLabel.setString("酒量："+this.achole);
playDrinkMusic(true);
}
var self = this;
setTimeout(function(){
self.stopDrink();
},500);
}
},
teaClick: function () {
this.tea++;
},
startDrink:function(){
this.backArm.scale = 0;
this.mouth1.scale = 0;
this.mouth2.scale = 1;
this.rightArm.scale = 1;
this.leftArm.scale = 1;
this.face.setPosition(cc.pAdd(cc.p(cc.winSize.width/2, 0), cc.p(0, this.body.y+this.head.height/2 -8)));
this.cigarette.scale = 0;
this.cigarette2.scale = 0;
},
stopDrink:function(){
this.backArm.scale = 1;
this.mouth1.scale = 1;
this.mouth2.scale = 0;
this.rightArm.scale = 0;
this.leftArm.scale = 0;
this.face.setPosition(cc.pAdd(cc.p(cc.winSize.width/2, 0), cc.p(0, this.body.y+this.head.height/2-12)));
this.drinking = false;
playDrinkMusic(false);
this.cigarette.scale = 1;
this.cigarette2.scale = 0;
},
accelEvent: function (acc, event) {
if (this.visible) {
movArea(acc, this.accLayer);
}
},
appear: function () {
//var bodyAction = cc.sequence(cc.scaleTo(0, 1), cc.callFunc(function () {
this.glassBtn.rightAction = cc.moveTo(0.5, cc.p(cc.winSize.width/2, this.desk.y+this.glassBtn.height/2));
this.glassBtn.runAction(this.glassBtn.rightAction);
this.bottle.rightAlittleAction = cc.moveTo(0.5, cc.p(this.bottle.width, this.desk.y+this.desk.height/4));
this.bottle.runAction(this.bottle.rightAlittleAction);
this.teaBtn.leftAlittleAction = cc.moveTo(0.5, cc.p(cc.winSize.width/2 + 3*this.teaBtn.width, this.desk.y+this.desk.height/4));
this.teaBtn.runAction(this.teaBtn.leftAlittleAction);
this.head.headAction = cc.scaleTo(0, 1);
this.head.runAction(this.head.headAction);
//}, this), cc.delayTime(1.3), cc.callFunc(function () {
// canChangePage = true;
//}, this));
//this.body.runAction(bodyAction);
},
disappear: function () {
this.glassBtn.runAction(this.glassBtn.rightAction.reverse());
this.bottle.runAction(this.bottle.rightAlittleAction.reverse());
this.teaBtn.runAction(this.teaBtn.leftAlittleAction.reverse());
//this.head.runAction(this.head.headAction.reverse());
}
});
window["onSubmitClick"] = function () {
window.location.reload();
}
var movArea = function (acc, node) {
var curx = node.x + 20 * acc.x;
var cury = node.y + 20 * acc.y;
node.x = Math.abs(curx) < 7 ? curx : node.x;
node.y = Math.abs(cury) < 7 ? cury : node.y;
}
/************************************************************************************************************************************/
var reclick = true;
var isSuccess = false;
var musicPlayStatus = true;
var getById = function (id) {
return document.getElementById(id);
}
var moveIn = function () {
var obj = getById();
}
var initMusic = function () {
var audio = getById("myAudio");
audio.src = "res/bg.mp3";
var drinkAudio = getById("myDrinkAudio");
drinkAudio.src = "res/drink.mp3";
var gameOverAudio = getById("myGameOverAudio");
gameOverAudio.src = "res/gameOver.mp3";
var teaWarningAudio = getById("myTeaWarningAudio");
teaWarningAudio.src = "res/warning.mp3";
var successAudio = getById("successAudio");
successAudio.src = "res/success.mp3";
}
var playMusic = function (status) {
var audio = getById("myAudio");
if (status) {
if (audio.paused) {
audio.play();
musicPlayStatus = true;
}
} else {
if (!audio.paused) {
audio.pause();
musicPlayStatus = false;
}
}
}
var playDrinkMusic = function (status) {
var audio = getById("myDrinkAudio");
if (status) {
if (audio.paused) {
audio.play();
}
} else {
if (!audio.paused) {
audio.pause();
}
}
}
var playGameOverMusic = function (status) {
var audio = getById("myGameOverAudio");
if (status) {
if (audio.paused) {
audio.play();
}
} else {
if (!audio.paused) {
audio.pause();
}
}
}
var playWarningMusic = function (status) {
var audio = getById("myTeaWarningAudio");
if (status) {
if (audio.paused) {
audio.play();
}
} else {
if (!audio.paused) {
audio.pause();
}
}
}
var playSuccessMusic = function (status) {
var audio = getById("successAudio");
if (status) {
if (audio.paused) {
audio.play();
}
} else {
if (!audio.paused) {
audio.pause();
}
}
}
function removeClass(ele, cls) {
if (hasClass(ele, cls)) {
var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
ele.className = ele.className.replace(reg, ' ');
}
}
function hasClass(ele, cls) {
var result = ele && ele.className && (ele.className.search(new RegExp('(\\s|^)' + cls + '(\\s|$)')) != -1);
return !!result;
}
function addClass(ele, cls) {
if (!hasClass(ele, cls) && ele)
ele.className += " " + cls;
}
基于文章开头介绍的游戏规则，我们在进行设计的时候，就需要一下几个控制变量：
drinking//游戏里的角色人物是否正在喝酒
achole//已经喝的酒精量
tea//茶水的初始量
teaWarning//茶水报警阀值
initTime//初始化事件值
timing//游戏事件
gameFire//游戏是否已经开始
gameOver //游戏是否已经结束
游戏中有一个监听器需要监听游戏状态、更新时间、人物动画，整个实现逻辑就比较简单了可以参考源码实现，由于此demo是在一个大工程里面随手写的，所以暂没有将原工程上传到网上，所以暂时没有提供下载地址，如果有需要源码私工程的私信我或加我个人微信:pangzhihuihui都可以。实现方面如果哪位大拿有需要指点的欢迎拍砖，我们共同学习共同进步哈。
本文乃原创demo，转载请注明出处：http://blog.csdn.net/qingfeilee/article/details/42406289，使用代码请保留作者署名，谢谢！