剪刀石头布是我们日常生活中最常见的一种决出胜负游戏,一个拳头,一个掌心,两个手指,拳头赢两个手指,两个手指赢一个掌心,一个掌心赢一个拳头,循环往复,别有韵味,那么,这篇文章就是对这个小游戏的简单实现。
源码已经上传到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); }
至此,全部都已经实现完了,看下最终的效果吧: