剪刀石头布,非常可爱的小游戏,相信大家都非常的怀念这款小游戏,小时候也玩过很多次,陪伴着我的童年的成长，现在是不是还会玩一下，剪刀石头布游戏的规则我们都知道是：剪刀剪布,石头砸剪刀,布包石头。
跟朋友、同学、兄弟姐妹有意见分歧？通过“剪刀石头布游戏”来一局吧,谁赢了听谁的。
躲猫猫的时候,通过“剪刀石头布游戏”来一局吧,谁输了谁找。
洗衣服、做饭、扫地等等什么的,通过“剪刀石头布游戏”来一局吧,谁输了谁做。
这是我的处女座游戏，学校的时候跟着培训老师一步一步写出来的,今天在这里将这款游戏分享给伙伴们,可以拿去练习学习——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

HTML5游戏开发,剪刀石头布小游戏案例的更多相关文章

  1. 基于HTML5实现五彩连珠小游戏

    今天给大家分享一款基于HTML5实现五彩连珠小游戏.这款游戏的规则:点击彩球移动到期望的位置,每移动一次,画面将随机出现3个新的彩球:当同一颜色的彩球连成5个一行或一列或一斜线时,这5个彩球同时消失, ...

  2. 【转】利用 three.js 开发微信小游戏的尝试

    前言 这是一次利用 three.js 开发微信小游戏的尝试,并不能算作是教程,只能算是一篇笔记吧. 微信 WeChat 6.6.1 开始引入了微信小游戏,初期上线了一批质量相当不错的小游戏.我在查阅各 ...

  3. 使用Laya引擎开发微信小游戏（上）

    本文由云+社区发表 使用一个简单的游戏开发示例,由浅入深,介绍了如何用Laya引擎开发微信小游戏. 作者:马晓东,腾讯前端高级工程师. 微信小游戏的推出也快一年时间了,在IEG的游戏运营活动中,也出现 ...

  4. 使用Laya引擎开发微信小游戏

    在支持微信小游戏的游戏引擎中,Cocos,Egret,Laya都对小游戏的开发提供了很多强大的支持.前段时间正好抽空研究了一下这块的内容,现做一个总结,针对如何使用Laya引擎开发微信小游戏给大家做一 ...

  5. Python开发转盘小游戏

    Python开发转盘小游戏 Python  一 原理分析 Python开发一个图形界面 有12个选项和2个功能键 确定每个按钮的位置 每个按钮的间隔相同 点击开始时转动,当前选项的背景颜色为红色,其他 ...

  6. Egret白鹭开发微信小游戏程序跳转功能（由一个小游戏跳转到另一个小游戏）

    假设我们要实现的功能是从小游戏A跳转到小游戏B 对于小游戏A: (1)在platform.ts中添加代码如下: /** * 平台数据接口. * 由于每款游戏通常需要发布到多个平台上,所以提取出一个统一 ...

  7. 【读书笔记《Android游戏编程之从零开始》】19.游戏开发基础（游戏音乐与音效）

    在一款游戏中,除了华丽的界面 UI 直接吸引玩家外,另外重要的就是游戏的背景音乐与音效:合适的背景音乐以及精彩的音效搭配会令整个游戏上升一个档次. 在 Android 中.常用于播放游戏背景音乐的类是 ...

  8. Unity 4.2.0 官方最新破解版（Unity3D 最新破解版，3D游戏开发工具和游戏引擎套件）

    Unity是一款跨平台的游戏开发工具,从一开始就被设计成易于使用的产品.作为一个完全集成的专业级应用,Unity还包含了价值数百万美元的功能强大的游戏引擎.Unity作为一个游戏开发工具,它的设计主旨 ...

  9. Unity 2D游戏开发教程之游戏精灵的开火状态

    Unity 2D游戏开发教程之游戏精灵的开火状态 精灵的开火状态 “开火”就是发射子弹的意思,在战争类型的电影或者电视剧中,主角们就爱这么说!本节打算为精灵添加发射子弹的能力.因为本游戏在后面会引入敌 ...

随机推荐

  1. VNC 抓取远程桌面

    VNC (Virtual Network Computing)是虚拟网络计算机的缩写.VNC 是一款优秀的远程控制工具软件,由著名的 AT&T 的欧洲研究实验室开发的.VNC 是在基于 UNI ...

  2. Android ndk下用AssetManager读取assets的资源

    转自:http://www.cppblog.com/johndragon/archive/2012/12/28/196754.html 在使用 cocos2dx 在 Android 上进行游戏开发时, ...

  3. C++学习笔记之继承

    一.基类和派生类 很多时候,一个类的对象也“是”另一个类的对象,如矩形是四边形,在C++中,矩形类Rectangle可以由四边形类Quad继承而来,于是,四边形类Quad是基类,矩形类Rectangl ...

  4. linux下登入mysql和加压zip文件

    1.类似于window中cmd登入一样 : mysql -u root -p   ---->  回车 ---> 输入密码  就可以了 2. unzip abc.zip  直接进行解压    ...

  5. poj 1941 The Sierpinski Fractal 递归

    //poj 1941 //sep9 #include <iostream> using namespace std; const int maxW=2048; const int maxH ...

  6. 兼容，原来在这里就已经開始--------Day34

    看了两天,算是将w3cschool的javascript部分浏览了一遍.在脑海中大约有了一点概念,也才真切体会到:一入江湖深似海.欲穷此路难上难啊,至少如今看起来是遥遥无期.太多不懂, 太多茫然,只是 ...

  7. 【JavaScript】一些注意点

    1.var与没有var的区别 没 2.全局变量和局部变量的速度 3.函数内部的var和外部的var的区别 4.var m =new Array();与var m = [];区别

  8. 现有一些开源ESB总线的比較

    现有的开源ESB总线中,自从2003年第一个开源总线Mule出现后,如今已经是百花争鸣的景象了.如今我就对现有的各种开源ESB总线根据性能.可扩展性.资料文档完整程度以及整合难易程度等方面展开. 一． ...

  9. IOS文件存储小结

    转自:http://tyragain.lofter.com/post/84706_c1503 首选项设置存储 NSUserDefaults 以及通过它控制的SettingBundle  NSUserD ...

  10. 高级Swing——列表

    1. 列表 1.1 JList构件 JList可以将多个选项放置在单个框中.为了构建列表框,首先需要创建一个字符串数组,然后将这个数组传递给JList构造器. String[] words= { &q ...