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

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-04-03) 『此方法在ie7下,如果.box的高度为800等比较大的数值时,并不能起到垂直居中的作用.』 点评:关于图片垂 ...

  2. 数据对象ajax学习篇9

    题记:写这篇博客要主是加深自己对数据对象的认识和总结实现算法时的一些验经和训教,如果有错误请指出,万分感谢. 对ajax工作道理: 下面这段是来自一个网友的blog: Ajax的道理简单来说通过Xml ...

  3. C++ 名称空间

    在程序中,只使用 using namespace std; 而不使用其他的名称空间,如using namespace boost; 这样的好处有: 1.可以避免不同名称空间中的名称冲突: 2.可以很清 ...

  4. hdu 4499 Cannon dfs

    Cannon Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?pid=4499 D ...

  5. Mac OS系统

    Mac OS系统 目录 概述 Mac OS系统常用操作 概述 Mac OS系统常用操作 显示或隐藏文件 在终端输入:defaults write com.apple.finder AppleShowA ...

  6. Network Link Conditioner模拟不同网络环境

    在Xcode4.1中有一个工具叫Network Link Conditioner,可以让用户模拟不同的网络连接和带宽,可供Mac和iOS开发者测试自己的程序在不同网络环境下的表现. 在Xcode4.3 ...

  7. fcitx的安装_配置

    sudo apt-get purger ibus 安装Fcitx:sudo apt-get install im-switch fcitx #修改当前用户的默认输入法, 具体看man im-switc ...

  8. Linux中如何使用gThumb批量调整图片大小

    Linux中如何使用gThumb批量调整图片大小 导读 如果你的工作涉及到图片编辑和处理,就一定会有同时对多张图片进行批量大小调整的经历.虽然大多数图片编辑应用都能够非常容易地批量调整多张图片,但对于 ...

  9. Common Linux log files name and usage--reference

    reference:http://www.coolcoder.in/2013/12/common-linux-log-files-name-and-usage.html if you spend lo ...

  10. 浏览器显示本地照片 image

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...