剪刀石头布是我们日常生活中最常见的一种决出胜负游戏，一个拳头，一个掌心，两个手指，拳头赢两个手指，两个手指赢一个掌心，一个掌心赢一个拳头，循环往复，别有韵味，那么，这篇文章就是对这个小游戏的简单实现。
源码已经上传到GitHub，地址是：https://github.com/ming723/CaiQuangame
看一下要具体实现的草图，及最终实现效果：
页面UI很简单，下面是要出的剪刀石头布，左边是输赢的统计，中间是出拳的显示，那么我们把草图来绘制一下吧，需要注意一点的是，我这里使用到了，一个开源框架lufylegend，具体的介绍，网上有很多，这里我粘一下：
lufylegend是一个HTML5开源引擎， 它实现了利用仿ActionScript3.0的语法进行HTML5的开发，包含了LSprite，LBitmapData，LBitmap，LLoader，LURLLoader，LTextField，LEvent等多个AS开发人员熟悉的类， 支持Google Chrome，Firefox，Opera，IE9，IOS，Android等多种热门环境。利用lufylegend可以轻松的使用面向对象编程，并且可以配合Box2dWeb制作物理游戏， 另外它还内置了LTweenLite缓动类等非常实用的功能。
好了，不多说了，开始绘制吧：
引入开源库：
<script src="lufylegend-1.7.6.min.js"></script>
body里设置用到的div,设置id
<div id="myDiv"> </div>
在script标签里书写代码，初始化，init里五个参数，第一个是设置游戏的速度，第二个是div的Id,第三个是控件的宽，第四个是控件的高，第五个是在哪个方法里书写。
init(200,"myDiv",600,300,main);
实现main方法，初始化我们需要的图片资源，
var imgData=new Array( {name:"shitou",path:"st.png"}, {name:"jiandao",path:"jd.png"}, {name:"bu",path:"b.png"} ); var imgList={}; var showList=new Array(); var bgLayer,leftlayer,rightlayer;//分为三层，左边的输赢显示，底部的出拳显示，和中间的玩家和电脑显示 function main() { }
设置背景层，lodingLayer是加载时的动画，通过LLoadManage.load进行加载图片资源，加载完成后，进行再展示：
function main() { //绘制背景层 bgLayer=new LSprite(); addChild(bgLayer); //绘制加载动画 var lodingLayer=new LoadingSample3(); bgLayer.addChild(lodingLayer); LLoadManage.load(imgData,function (progress) { lodingLayer.setProgress(progress); },function (result) { imgList=result; bgLayer.removeChild(lodingLayer); lodingLayer=null; create(); }); } function create() { /*四个参数，第一个是边框大小，第二个是边框颜色，第三个是数组，从xy分别为0，开始绘制一个长为600，宽为300的矩形，第四个是是否实心， 第五个是实心颜色 */ bgLayer.graphics.drawRect(1,"#000",[0,0,600,300],true,"#000"); }
来看下效果，黑漆漆的一片:
绘制，左边的属性展示框，和底部的出拳展示框：
//绘制左边的层 leftlayer=new LSprite(); leftlayer.graphics.drawRect(1,"#fff",[0,0,100,120],true,"#fff"); leftlayer.x=20; leftlayer.y=35; bgLayer.addChild(leftlayer); //绘制底部的层 rightlayer=new LSprite(); rightlayer.graphics.drawRect(1,"#fff",[0,0,300,100],true,"#fff"); rightlayer.x=bgLayer.getWidth()/2-rightlayer.getWidth()/3; rightlayer.y=bgLayer.getHeight()-rightlayer.getHeight()-20; bgLayer.addChild(rightlayer);
瞅一下效果：
绘制左边的赢输平文字描述：
//绘制左边的赢输平 textSuccess=new LTextField(); textSuccess.color="#000"; textSuccess.size=12; textSuccess.text="赢：0"; textSuccess.x=leftlayer.getWidth()/4; textSuccess.y=20; textFail=new LTextField(); textFail.color="#000"; textFail.size=12; textFail.text="输：0"; textFail.x=leftlayer.getWidth()/4; textFail.y=50; textPing=new LTextField(); textPing.color="#000"; textPing.size=12; textPing.text="平：0"; textPing.x=leftlayer.getWidth()/4; textPing.y=80; leftlayer.addChild(textSuccess); leftlayer.addChild(textFail); leftlayer.addChild(textPing);
看下效果：
绘制底部的剪刀石头布：
//绘制底部的石头剪刀布 showList.push(new LBitmapData(imgList["shitou"])); showList.push(new LBitmapData(imgList["jiandao"])); showList.push(new LBitmapData(imgList["bu"])); var shiLayer=new LSprite(); shiLayer.addChild(new LBitmap(showList[0])); shiLayer.scaleX=0.8; shiLayer.scaleY=0.8; shiLayer.x=10; shiLayer.y=15; var jianLayer=new LSprite(); jianLayer.addChild(new LBitmap(showList[1])); jianLayer.scaleX=0.8; jianLayer.scaleY=0.8; jianLayer.x=110; jianLayer.y=15; var buLayer=new LSprite(); buLayer.addChild(new LBitmap(showList[2])); buLayer.scaleX=0.8; buLayer.scaleY=0.8; buLayer.x=210; buLayer.y=15; rightlayer.addChild(shiLayer); rightlayer.addChild(jianLayer); rightlayer.addChild(buLayer);
看下效果：
绘制，中间的玩家和电脑的出拳显示吧：
//绘制中间的出拳： var selfLBit=new LBitmap(new LBitmapData(imgList["shitou"])); selfLBit.scaleY=0.8; selfLBit.scaleX=0.8; selfLBit.x=bgLayer.getWidth()/2-rightlayer.getWidth()/3; selfLBit.y=80; var computerLBit=new LBitmap(new LBitmapData(imgList["shitou"])); computerLBit.scaleY=0.8; computerLBit.scaleX=0.8; computerLBit.x=bgLayer.getWidth()-computerLBit.getWidth()*2-20; computerLBit.y=80; //绘制玩家和电脑 var selfText=new LTextField(); selfText.text="玩家"; selfText.color="#fff"; selfText.x=bgLayer.getWidth()/2-70; selfText.y=50; var computerText=new LTextField(); computerText.text="电脑"; computerText.color="#fff"; computerText.x=bgLayer.getWidth()-computerLBit.getWidth()*2+10; computerText.y=50; bgLayer.addChild(selfText); bgLayer.addChild(computerText); bgLayer.addChild(selfLBit); bgLayer.addChild(computerLBit);
看下效果吧：
绘制结束后，接下来就是点击底部的石头剪刀布，让玩家变换成点击的，那么就需要给石头剪刀布监听点击状态：
shiLayer.addEventListener(LMouseEvent.MOUSE_UP,shiClick,true); jianLayer.addEventListener(LMouseEvent.MOUSE_UP,jianClick,true); buLayer.addEventListener(LMouseEvent.MOUSE_UP,buClick,true);
这里我设置，当鼠标按下抬起的时候，我就认为是点击了，实现各个方法，点击拳头传0，剪刀传1，布传2：
function shiClick() { selfChange(0); } function jianClick() { selfChange(1); } function buClick() { selfChange(2); } function selfChange(type) {
bgLayer.removeChild(selfLBit); selfLBit=new LBitmap(showList[type]); selfLBit.scaleY=0.8; selfLBit.scaleX=0.8; selfLBit.x=bgLayer.getWidth()/2-rightlayer.getWidth()/3; selfLBit.y=80; bgLayer.addChild(selfLBit);}
其实当玩家点击出拳的时候，电脑也必须跟着随机出拳，那么在上述代码里加入电脑的出拳：
bgLayer.removeChild(computerLBit); var randomNum=Math.floor(Math.random()*3); computerLBit=new LBitmap(showList[randomNum]); computerLBit.scaleY=0.8; computerLBit.scaleX=0.8; computerLBit.x=bgLayer.getWidth()-computerLBit.getWidth()*2-20; computerLBit.y=80; bgLayer.addChild(computerLBit);
好了，看下效果吧：
玩家和电脑都可以出拳之后，那么就可以，判断彼此的输赢，写入到左侧的方框里：
switch (type){ case 0://石头 if(randomNum==0){//平局 pingNum++; }else if(randomNum==1){//赢 successNum++; }else if(randomNum==2){//输 failNum++; } break; case 1://剪刀 if(randomNum==0){//输 failNum++; }else if(randomNum==1){//平局 pingNum++; }else if(randomNum==2){//赢 successNum++; } break; case 2://布 if(randomNum==0){//赢 successNum++; }else if(randomNum==1){//输 failNum++; }else if(randomNum==2){//平局 pingNum++; } break; } leftlayer.removeChild(textSuccess); leftlayer.removeChild(textFail); leftlayer.removeChild(textPing); changeSuccessFail(successNum,failNum,pingNum);
实现changeSuccessFail方法：
function changeSuccessFail(a,b,c) { textSuccess=new LTextField(); textSuccess.color="#000"; textSuccess.size=12; textSuccess.text="赢："+a; textSuccess.x=leftlayer.getWidth()/4; textSuccess.y=20; textFail=new LTextField(); textFail.color="#000"; textFail.size=12; textFail.text="输："+b; textFail.x=leftlayer.getWidth()/4; textFail.y=50; textPing=new LTextField(); textPing.color="#000"; textPing.size=12; textPing.text="平："+c; textPing.x=leftlayer.getWidth()/4; textPing.y=80; leftlayer.addChild(textSuccess); leftlayer.addChild(textFail); leftlayer.addChild(textPing); }
至此，全部都已经实现完了，看下最终的效果吧：
