html5简单小游戏代码（剪刀石头布小游戏案例）

这里还是要推荐下我自己建的前端学习群：527535103，如果你正在学习前端，小编欢迎你加入，大家都是前端党，不定期分享干货（只有web前端相关的），包括我自己整理的一份2017最新的前端资料和零基础入门教程，欢迎初学和进阶中的小伙伴。

剪刀石头布,非常可爱的小游戏,相信大家都非常的怀念这款小游戏,小时候也玩过很多次,陪伴着我的童年的成长，现在是不是还会玩一下，剪刀石头布游戏的规则我们都知道是：剪刀剪布,石头砸剪刀,布包石头。

跟朋友、同学、兄弟姐妹有意见分歧？通过“剪刀石头布游戏”来一局吧,谁赢了听谁的。

躲猫猫的时候,通过“剪刀石头布游戏”来一局吧,谁输了谁找。

洗衣服、做饭、扫地等等什么的,通过“剪刀石头布游戏”来一局吧,谁输了谁做。

这是我的处女座游戏，学校的时候跟着培训老师一步一步写出来的,今天在这里将这款游戏分享给伙伴们,可以拿去练习学习——Tyna。

html5简单小游戏代码（剪刀石头布小游戏案例）(1)

html5简单小游戏代码（剪刀石头布小游戏案例）(2)

全部代码和引用的文件图片等：

html5简单小游戏代码（剪刀石头布小游戏案例）(3)

html5简单小游戏代码（剪刀石头布小游戏案例）(4)

html5简单小游戏代码（剪刀石头布小游戏案例）(5)

html5简单小游戏代码（剪刀石头布小游戏案例）(6)

<!DOCTYPE HTML>

<html>

<head>

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>

</body>

</html>

有兴趣的小伙伴们可以在这基础上添加剪刀石头布游戏的等级也可以自己在这基础上更改图片、颜色、排版之类的。

分享结束还是要推荐一下我自己的前端学习群：527535103，欢迎各位小白大神们进群学习交流。

html5简单小游戏代码（剪刀石头布小游戏案例）

最新推荐

热门推荐