HTML5游戏开发,剪刀石头布小游戏案例

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

时间： 2024-10-25 03:19:53

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

2、Cocos2dx 3.0游戏开发找小三之引擎简介

尊重开发者的劳动成果,转载的时候请务必注明出处:http://blog.csdn.net/haomengzhu/article/details/27094663 引擎简介 Cocos2d-x 的原型是 Cocos2d,一个最早来源于几位 Python 开发者在 PyWeek 竞赛中的作品, 目的是封装底层绘图代码,简 化 2D 游戏的开发过程,避免每次都"重新发明轮子". 有了 Cocos2d,开发者就可以把全部精力集中在游戏开发上,而不必关心绘图的细节. 这个 Python 版本的引

C# 开发2048小游戏

这应该是几个月前,闲的手痒,敲了一上午代码搞出来的,随之就把它丢弃了,当时让别人玩过,提过几条更改建议,但是时至今日,我也没有进行过优化和更改(本人只会作案,不会收场,嘎嘎),下面的建议要给代码爱好的童鞋完成了. 更改建议: a.当数字超过四位数时,显示的时候有部分被它的容器TextBox遮挡了,能不能把显示的数值变小点?答案是可以的.代码里有一段通过矩阵数据填充TextBox值的操作,可以在填充时,判断下数值长度,然后修改TextBox的文字大小. b.玩游戏的时候,使用方向键移动时,焦点可能

14、Cocos2dx 3.0游戏开发找小三之Scene and Layer：一场游戏一场梦

重开发者的劳动成果,转载的时候请务必注明出处:http://blog.csdn.net/haomengzhu/article/details/30474393 Scene :场景 了解了Director 之后,接下来介绍 Scene 这个与它紧密相关的游戏组件. 通过之前的学习,我们已经了解了场景以及它在流程控制中的地位. 在 Cocos2d-x 中,Scene 定义了一个场景.场景只是层的容器,包含了所有需要显示的游戏元素. 因此相对于其他游戏元素,Scene 并没有提供什么特别的功能,就是一

15、Cocos2dx 3.0游戏开发找小三之Sprite：每个精灵都是上辈子折翼的天使

重开发者的劳动成果,转载的时候请务必注明出处:http://blog.csdn.net/haomengzhu/article/details/30475395 Sprite Sprite 可以说是游戏中最重要的组成元素: 它描述了游戏中的精灵,是 Node 的一个最重要也最灵活的子类. Sprite 很重要,它代表了游戏中一个最小的可见单位, 同时Sprite 也很灵活,它装载了一个平面纹理,具有丰富的表现力,而且 可以通过多种方式加载. 如果说 Scene 和 Layer 代表了宏观的游戏元素

16、Cocos2dx 3.0游戏开发找小三之Node：父节点、子节点、傻傻分不清楚

重开发者的劳动成果,转载的时候请务必注明出处:http://blog.csdn.net/haomengzhu/article/details/30476133 Cocos2d-x 采用了场景.层.精灵的层次结构来组织游戏元素, 与此同时,这个层次结构还对应了游戏的渲染层次,因此游戏元素可以组织成树形结构,称作渲染树. Cocos2d-x 把渲染树上的每一个游戏元素抽象为一个节点,即 Node. 一切游戏元素都继承自 Node,因此它们 都具有 Node 所提供的特性. Node 定义了一个可绘制

17、Cocos2dx 3.0游戏开发找小三之内置的常用层：三剑客LayerColor、LayerGradient、Menu

重开发者的劳动成果,转载的时候请务必注明出处:http://blog.csdn.net/haomengzhu/article/details/30477587 为了方便游戏开发者,Cocos2d-x 内置了 3 种特殊的 Layer: 具体如下所示: LayerColor:一个单纯的实心色块. LayerGradient:一个色块,但可以设置两种颜色的渐变效果. Menu:十分常用的游戏菜单. LayerColor 与 与 LayerGradient 这两个层十分简单,都仅仅包含一个色块. 不同

18、Cocos2dx 3.0游戏开发找小三之cocos2d-x，请问你是怎么调度的咩

重开发者的劳动成果,转载的时候请务必注明出处:http://blog.csdn.net/haomengzhu/article/details/30478251 Cocos2d 的一大特色就是提供了事件驱动的游戏框架, 引擎会在合适的时候调用事件处理函数,我们只需要在函数中添加对各种游戏事件的处理, 就可以完成一个完整的游戏了. 例如,为了实现游戏的动态变化,Cocos2d 提供了两种定时器事件: 为了响应用户输入,Cocos2d 提供了触摸事件和传感器事件: 此外,Cocos2d 还提供了一系列

6、Cocos2dx 3.0游戏开发找小三之游戏的基本概念

重开发者的劳动成果,转载的时候请务必注明出处:http://blog.csdn.net/haomengzhu/article/details/27689713 郝萌主友情提示: 人是习惯的产物,当你习惯快乐时,记忆里的不愉快就消失了. 游戏开始之前 经过之前的学习,我们已经可以开发一个最基本的 Cocos2d-x 游戏了,这个游戏包括一张背景图片和一个退出游戏的按 钮,但是这距离完成一个完整.实用的游戏还很遥远.在这一章节中,我们将首先抛开 Cocos2d,介绍游戏开发的基本概念,然后结合 Co

10、Cocos2dx 3.0游戏开发找小三之容器篇：Vector、Map、Value

重开发者的劳动成果,转载的时候请务必注明出处:http://blog.csdn.net/haomengzhu/article/details/27705613 容器 3.0版本之前Cocos2d-x 引擎为我们提供了 CCArray. CCDictionary 等 Objective-C 风格的容器: 使用 Cocos2d-x 容器的一个重要原因在于 Cocos2d-x 的内存管理. 一般来说,被存入容器的对象在移除之前都应该保证是有效的, 但值得注意的是,在v3.0 beta版本中加入了数据结