标签：
剪刀石头布,非常可爱的小游戏,相信大家都非常的怀念这款小游戏,小时候也玩过很多次,陪伴着我的童年的成长，现在是不是还会玩一下，剪刀石头布游戏的规则我们都知道是：剪刀剪布,石头砸剪刀,布包石头。
跟朋友、同学、兄弟姐妹有意见分歧？通过“剪刀石头布游戏”来一局吧,谁赢了听谁的。
躲猫猫的时候,通过“剪刀石头布游戏”来一局吧,谁输了谁找。
洗衣服、做饭、扫地等等什么的,通过“剪刀石头布游戏”来一局吧,谁输了谁做。
这是我的处女座游戏，学校的时候跟着培训老师一步一步写出来的,今天在这里将这款游戏分享给伙伴们,可以拿去练习学习——Tyna。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>HTML5游戏开发</title>
<script type="text/javascript" src="lufylegend-1.7.6.min.js"></script>
<script type="text/javascript">
var backLayer,resultLayer,controlLayer,loadingLayer,checkLayer,foeBitmap,selfBitmap;
var imgData = [
{name:"bu",path:"images/bu.png"},
{name:"jiandao",path:"images/jiandao.png"},
{name:"shitou",path:"images/shitou.png"},
{name:"title",path:"images/title.png"}
];
//游戏输赢
var shu_ying= [
[0,1,-1],
[-1,0,1],
[1,-1,0]
];
var dataList=[];//这个数组用来存储已经加载的数据资源
var showList=[];//这个数组原来存储剪刀、石头、布的对象实例
var textField_All,textField_vin,textField_fail,textField_draw,all = 0,win = 0,draw = 0,fail = 0;
init(200,"myGame",800,500,main);//初始化游戏引擎
//回调函数，在游戏引擎初始化完成后就会被调用
function main(){
backLayer=new LSprite();
backLayer.graphics.drawRect(10,"green",[0,0,800,500],true,"black");
addChild(backLayer);
initResultLayer();//初始化resultlayer显示界面
//创建加载文件的进度条，并添加到第一层
loadingLayer = new LoadingSample3();
backLayer.addChild(loadingLayer);
/**
*读取图片资源文件
*/
LLoadManage.load(
imgData,
function(press){
loadingLayer.setProgress(press);
},
function(result){
dataList=result;
backLayer.removeChild(loadingLayer);
loadingLayer=null;//清空进度条
initGame();
//初始化controlLayer显示界面
initControlLayer();
}
);
}
/**
*游戏资源初始化
*/
function initGame(){
showList[0] = new LBitmapData(dataList["shitou"]);
showList[1] = new LBitmapData(dataList["jiandao"]);
showList[2] = new LBitmapData(dataList["bu"]);
var titleBitmap = new LBitmap(new LBitmapData(dataList["title"]));
titleBitmap.x=(LGlobal.width-titleBitmap.getWidth())/2;
titleBitmap.y=20;
backLayer.addChild(titleBitmap);
//人物电脑对比层
initCheckLayer();
}
/**
* 人物电脑对比层显示功能模块
*/
function initCheckLayer(){
var width_3=400,height_3=200;
var x_3=(LGlobal.width-width_3)/2,y_3=(LGlobal.height-height_3)/2-20;
checkLayer=new LSprite();
checkLayer.x=x_3;
checkLayer.y=y_3;
backLayer.addChild(checkLayer);
//玩家
selfBitmap=new LBitmap(showList[1]);
selfBitmap.y =190-selfBitmap.getHeight();
selfBitmap.x=40;
checkLayer.addChild(selfBitmap);
var wanjia=initResultLayer_1("玩家","#fff",30,68,0);
checkLayer.addChild(wanjia);
//电脑
foeBitmap=new LBitmap(showList[0]);
foeBitmap.y =190-foeBitmap.getHeight();
foeBitmap.x=270;
checkLayer.addChild(foeBitmap);
var diannao=initResultLayer_1("电脑","#fff",30,302,0);
checkLayer.addChild(diannao);
}
/**
* resultLayer（结果）显示的功能模块
*/
function initResultLayer(){
var width_1=150,height_1=160;
var y_1= (LGlobal.height-height_1)/2;
resultLayer=new LSprite();
resultLayer.x=15;
resultLayer.y=y_1;
resultLayer.graphics.drawRect(5,"#AAFF00",[0,0,width_1,height_1],true,"#fff");
backLayer.addChild(resultLayer);
//总次数
textField_All=new initResultLayer_1("总次数：0","black",12,20,15);
resultLayer.addChild(textField_All);
//胜利次数
textField_vin=new initResultLayer_1("胜利次数：0","black",12,20,50);
resultLayer.addChild(textField_vin);
//失败次数
textField_fail=new initResultLayer_1("失败次数：0","black",12,20,85);
resultLayer.addChild(textField_fail);
//平局
textField_draw=new initResultLayer_1("平局：0","black",12,20,120);
resultLayer.addChild(textField_draw);
};
/**
*initCheckLayer，resultLayer文字缩减代码
*/
function initResultLayer_1(d,w,z,h,j){
var textField=new LTextField();
textField.text=d;
textField.color=w;
textField.font="微软雅黑";
textField.weight="bold";
textField.size=z;
textField.x=h;
textField.y=j;
return textField;
}
/**
* controlLayer（控制）显示的功能模板
*/
function initControlLayer(){
var width_2=480,height_2=130;
var x_2=(LGlobal.width-width_2)/2,y_2=LGlobal.height-(height_2+20);
controlLayer=new LSprite();
controlLayer.x=x_2;
controlLayer.y=y_2;
controlLayer.graphics.drawRect(5,"AAFF00",[0,0,width_2,height_2],true,"#fff");
backLayer.addChild(controlLayer);
//出拳标题
var TextField=new initResultLayer_1("请出拳：","#000",15,20,5);
controlLayer.addChild(TextField);
//石头
var shitouButton=initControlLayer_1(70,0);
controlLayer.addChild(shitouButton);
//剪刀
var jiandaoButton=initControlLayer_1(190,1);
controlLayer.addChild(jiandaoButton);
//布
var buButton=initControlLayer_1(320,2);
controlLayer.addChild(buButton);
};
//controlLayer代码快优化
function initControlLayer_1(z,h){
var upBitmap = new LBitmap(showList[h]);
upBitmap.scaleX=0.6;
upBitmap.scaleY=0.6;
var overBitMap = new LBitmap(showList[h]);
overBitMap.scaleX=0.6;
overBitMap.scaleY=0.6;
overBitMap.x+=2;
overBitMap.y+=2;
var button = new LButton(upBitmap,overBitMap);
button.x=z;
button.y =35;
button.addEventListener(LMouseEvent.MOUSE_DOWN,clickButton);
button.index =h;
return button;
}
function clickButton(event){
var name =event.clickTarget.index;//获取到被点击的button按钮的name属性的值
selfBitmap.bitmapData=showList[name];
//生成一个随机数0,1,2
var foeIndex = Math.floor(Math.random()*3);
foeBitmap.bitmapData=showList[foeIndex];
var dzh= shu_ying[name][foeIndex];
if(dzh==0){
draw+=1;
textField_draw.text="平局："+draw;
}else if(dzh == 1){
win+=1;
textField_vin.text="胜利次数："+win;
}else{
fail+=1;
textField_fail.text="失败次数："+fail;
}
all+=1;
textField_All.text="总次数："+all;
}
</script>
</head>
<body>
<div id="myGame">加载中.......</div>
</body>
</html>
有兴趣的小伙伴们可以在这基础上添加剪刀石头布游戏的等级也可以自己在这基础上更改图片、颜色、排版之类的__Tyna。
学习来源：http://www.j--d.com/html/453.html
标签：
原文地址：http://www.cnblogs.com/j--d/p/htm5-game.html
