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

    在调用Oracle函数时为了让PL/SQL 函数返回数据的多个行,必须通过返回一个 REF CURSOR 或一个数据集合来完成.REF CURSOR 的这种情况局限于可以从查询中选择的数据,而整个集合 ...

  2. C#调用C++ dll时,结构体引用传参的方法

    写了一个C++的LogLog Logit 四参数等算法的接口dll,给C#调用,但是发现传参有问题 如 extern "C" _declspec(dllexport)  bool ...

  3. C#综合揭秘——细说多线程

    一.线程的定义  1. 1 进程.应用程序域与线程的关系 进程(Process)是Windows系统中的一个基本概念,它包含着一个运行程序所需要的资源.进程之间是相对独立的,一个进程无法访问另一个进程 ...

  4. 《linux 内核全然剖析》 chapter 2 微型计算机组成结构

    微型计算机组成结构 系统的基本组成: 软件是一种控制硬件操作和动作的指令流. 2.1 微型计算机的组成原理 当中CPU通过地址线,数据线,和控制信号线组成的内部总线与系统其它部分进行数据通信.地址线用 ...

  5. 《转》Java中HashMap详解

    HashMap 和 HashSet 是 Java Collection Framework 的两个重要成员,其中 HashMap 是 Map 接口的常用实现类,HashSet 是 Set 接口的常用实 ...

  6. IPC——匿名管道

    Linux进程间通信——使用匿名管道 在前面,介绍了一种进程间的通信方式:使用信号,我们创建通知事件,并通过它引起响应,但传递的信息只是一个信号值.这里将介绍另一种进程间通信的方式——匿名管道,通过它 ...

  7. IDEA 升级14.1提示org/hibernate/build/gradle/publish/auth/maven/AuthenticationManager:Unsupported major.minor version 51.0

    在看到“Unsupported major.minor version 51.0”这样的错误描述时,就基本可以肯定是jdk版本不正确导致.但是提示的类非业务系统,而是来自IDEA.因此去其官网检索了下 ...

  8. 关于Spring IOC容器解释

    何谓控制反转(IoC = Inversion of Control),何谓依赖注入(DI = Dependency Injection)?之前看到过两个比喻,觉得比较形象,特在此写下: IoC,用白话 ...

  9. Golang学习 - path/filepath 包

    ------------------------------------------------------------ filepath 中的函数会根据不同平台做不同的处理,比如路径分隔符.卷名等. ...

  10. Spring SqlRowSet example--转载

    原文地址:http://www.roseindia.net/tutorial/spring/spring3/jdbc/sqlrowset.html The 'SqlRowSet' is used to ...