HTML5 game development, scissors stone cloth mini-game case

Scissors stone cloth, very cute little game, I believe we all very much miss this little game, as a child also played many times, accompany my childhood growth, now is not also play, scissors stone cloth game rules We all know is: scissors cut cloth, stone hit scissors, cloth bag stone.
Have a disagreement with friends, classmates, brothers and sisters? Through the "scissors and stone cloth game" to a innings, who won the listen to WHO.
Hide and seek, through the "scissors and stone cloth game" to a innings, who lost who find.
Washing clothes, cooking, sweeping and so on, through the "scissors and stone cloth game" to a innings, who lost who do.
This is my Virgo game, when the school with the training teacher step by step write out, today here to share this game to the partners, you can take to practice learning--tyna.

All code and referenced file pictures, etc.:

<! DOCTYPE html>
<meta charset= "UTF-8"/>
<TITLE>HTML5 Game Development </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"}
];
Game win or lose
var shu_ying= [
[0,1,-1],
[ -1,0,1],
[1,-1,0]
];

var datalist=[];//this array is used to store data resources that have already been loaded
var showlist=[];//this array originally stores object instances of scissors, stone, and cloth
var textfield_all,textfield_vin,textfield_fail,textfield_draw,all = 0,win = 0,draw = 0,fail = 0;
Init ("Mygame", 800,500,main);//Initialize the game engine
callback function, which is called after the game engine initialization is complete.
function Main () {
Backlayer=new Lsprite ();
BackLayer.graphics.drawRect (Ten, "green", [0,0,800,500],true, "Black");
AddChild (Backlayer);
Initresultlayer ();//Initialize Resultlayer display interface
Create a progress bar to load the file and add it to the first layer
Loadinglayer = new LoadingSample3 ();
Backlayer.addchild (Loadinglayer);
/**
* Read Picture resource file
*/
Lloadmanage.load (
Imgdata,
function (Press) {
Loadinglayer.setprogress (press);
},
function (Result) {
Datalist=result;
Backlayer.removechild (Loadinglayer);
loadinglayer=null;//Empty progress bar
Initgame ();
Initializing the Controllayer display interface
Initcontrollayer ();
}
);
}
/**
* Game Resource Initialization
*/
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);
Character Computer contrast layer
Initchecklayer ();
}
/**
* Character computer contrast layer display function module
*/
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);
Players
Selfbitmap=new Lbitmap (showlist[1]);
Selfbitmap.y =190-selfbitmap.getheight ();
selfbitmap.x=40;
Checklayer.addchild (SELFBITMAP);
var wanjia=initresultlayer_1 ("Player", "#fff", 30,68,0);
Checklayer.addchild (Wanjia);
Computer
Foebitmap=new Lbitmap (showlist[0]);
Foebitmap.y =190-foebitmap.getheight ();
foebitmap.x=270;
Checklayer.addchild (FOEBITMAP);
var diannao=initresultlayer_1 ("Computer", "#fff", 30,302,0);
Checklayer.addchild (Diannao);

}
/**
* Resultlayer (results) Display function module
*/
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);
Total number of times
Textfield_all=new initresultlayer_1 ("total: 0", "Black", 12,20,15);
Resultlayer.addchild (Textfield_all);
Number of victories
Textfield_vin=new initresultlayer_1 ("Number of victories: 0", "Black", 12,20,50);
Resultlayer.addchild (Textfield_vin);
Number of failures
Textfield_fail=new initresultlayer_1 ("Number of failures: 0", "Black", 12,20,85);
Resultlayer.addchild (Textfield_fail);
Draw
Textfield_draw=new initresultlayer_1 ("Draw: 0", "Black", 12,20,120);
Resultlayer.addchild (Textfield_draw);
};
/**
*initchecklayer,resultlayer Text reduction Codes
*/
function initresultlayer_1 (d,w,z,h,j) {
var textfield=new ltextfield ();
Textfield.text=d;
Textfield.color=w;
Textfield.font= "Microsoft Jas Black";
Textfield.weight= "Bold";
Textfield.size=z;
Textfield.x=h;
Textfield.y=j;
return TextField;
}
/**
* Controllayer (Control) Display function template
*/
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);
The punch title
var textfield=new initresultlayer_1 ("Please Punch:", "#000", 15,20,5);
Controllayer.addchild (TextField);
Stone
var shitoubutton=initcontrollayer_1 (70,0);
Controllayer.addchild (Shitoubutton);
Scissors
var jiandaobutton=initcontrollayer_1 (190,1);
Controllayer.addchild (Jiandaobutton);
Cloth
var bubutton=initcontrollayer_1 (320,2);
Controllayer.addchild (Bubutton);
};
Controllayer Code Fast Optimization
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;//Gets the value of the Name property to the button that was clicked
Selfbitmap.bitmapdata=showlist[name];
Generate a random number 0,1,2
var foeindex = Math.floor (Math.random ());
Foebitmap.bitmapdata=showlist[foeindex];
var dzh= shu_ying[name][foeindex];
if (dzh==0) {
Draw+=1;
textfield_draw.text= "Draw:" +draw;
}else if (Dzh = = 1) {
Win+=1;
textfield_vin.text= "Number of victories:" +win;
}else{
Fail+=1;
textfield_fail.text= "Number of failures:" +fail;
}
All+=1;
Textfield_all.text= "Total number of times:" +all;
}
</script>
<body>
<div id= "Mygame" > Loading in .......</div>
</body>

Interested in the small partners can be added on this basis to add scissors stone cloth game level can also be on their own on this basis to change the picture, color, typesetting and other __tyna.

Learning Source: http://www.j--d.com/html/453.html

HTML5 game development, scissors stone cloth mini-game case