HTML5 lufylegend引擎学习（一） -- 剪刀石头布小游戏

网址：http://www.lufylegend.com/

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <title>A Little Game!</title>
  5         <meta charset="utf-8" />
  6         <style>
  7             html,body{
  8                 height:100%;
  9                 width: 100%;
 10                 margin: 0;
 11                 padding: 0;
 12             }
 13 
 14             body{
 15                 background-color: black;
 16             }
 17             #playground{
 18                 background-color: white;
 19                 position: absolute;
 20                 width: 800px;
 21                 height: 400px;
 22                 left: 50%;
 23                 top: 50%;
 24                 margin-left: -400px;
 25                 margin-top: -200px;
 26             }
 27         </style>
 28     </head>
 29     <body>
 30         <div id="playground"></div>
 31         <script type="text/javascript" src="js/lufylegend-1.10.1.js.js"></script>
 32         <script>
 33             var playerData = {
 34                 win : 0,
 35                 lose : 0,
 36                 dogfall : 0,
 37                 jiandan : 0,
 38                 shitou : 0,
 39                 bu : 0
 40             };
 41 
 42             var computerData = {
 43                 win : 0,
 44                 lose : 0,
 45                 dogfall : 0,
 46                 jiandan : 0,
 47                 shitou : 0,
 48                 bu : 0
 49             };
 50 
 51             var playground;
 52             var backlayer;
 53             var graphic;
 54             var loadManager ;
 55             var loadingProgress;
 56             var bitmapData;
 57             var title;
 58 
 59             var clicklayer;
 60             var jiandanBtn;
 61             var shitouBtn;
 62             var buBtn;
 63 
 64             var playerBitmap;
 65             var computerBitmap;
 66 
 67             var playStatus;
 68             var computerStatus;
 69             var winText1;
 70             var loseText1;
 71             var dogFallText1;
 72             var jiandanText1;
 73             var shitouText1;
 74             var buText1;
 75             var winText2;
 76             var loseText2;
 77             var dogFallText2;
 78             var jiandanText2;
 79             var shitouText2;
 80             var buText2;
 81 
 82             var imgList = Array();
 83             var imgData = [
 84                 { name : "title",path : "./images/title.png"},
 85                 { name : "bu",path : "./images/bu.png"},
 86                 { name : "jiandao",path : "./images/jiandao.png"},
 87                 { name : "shitou",path : "./images/shitou.png"}
 88             ];
 89 
 90             playground = document.getElementById("playground");
 91 
 92             init(50,"playground",800,400,main);
 93 
 94             function main()
 95             {
 96                 backlayer = new LSprite();
 97                 addChild(backlayer);
 98 
 99                 loadingProgress = new LoadingSample3();
100                 backlayer.addChild(loadingProgress);
101 
102                 LLoadManage.load(imgData,function(p){
103                     loadingProgress.setProgress(p);
104                 },gameInit);
105             }
106 
107             function gameInit(result)
108             {
109                 backlayer.removeChild(loadingProgress);
110                 loadingProgress = null;
111 
112                 // 存储图片的数据
113                 imgList.push(new LBitmapData(result["title"]));
114                 imgList.push(new LBitmapData(result["jiandao"]));
115                 imgList.push(new LBitmapData(result["shitou"]));
116                 imgList.push(new LBitmapData(result["bu"]));
117 
118                 // 标题
119                 title = new LBitmap(imgList[0]);
120                 title.x = playground.clientWidth/2 - title.getWidth()/2;
121                 backlayer.addChild(title);
122 
123                 // 三八线
124                 backlayer.graphics.drawLine(1,"#06061F",[playground.clientWidth/2,title.getHeight(),playground.clientWidth/2,playground.clientHeight-title.getHeight()]);
125 
126                 // 显示玩家的名称
127                 var computerText = new LTextField();
128                 computerText.text = "电脑";
129                 computerText.color = "#250012";
130                 computerText.size = 17;
131                 computerText.font = "Calibri Light";
132                 computerText.x = playground.clientWidth/4 - computerText.getWidth()/2;
133                 computerText.y = playground.clientHeight-title.getHeight();
134                 backlayer.addChild(computerText);
135 
136                 var  playerText = new LTextField();
137                 playerText.text = "玩家";
138                 playerText.color = "#250012";
139                 playerText.size = 17;
140                 playerText.font = "Calibri Light";
141                 playerText.x = (playground.clientWidth/4)*3 - playerText.getWidth()/2;
142                 playerText.y = playground.clientHeight - title.getHeight();
143                 backlayer.addChild(playerText);
144 
145                 // 放置剪刀、石头、布的图片
146                 var jiandaoUp = new LBitmap(imgList[1]);
147                 jiandaoUp.scaleX = 0.5;
148                 jiandaoUp.scaleY = 0.5;
149                 var jiandaoOver = new LBitmap(imgList[1]);
150                 jiandaoOver.scaleX = 0.5;
151                 jiandaoOver.scaleY = 0.5;
152                 jiandanBtn = new LButton(jiandaoUp,jiandaoOver);
153                 jiandanBtn.name = "jiandao";
154                 jiandanBtn.x = 0;
155                 jiandanBtn.y = 0;
156 
157                 var shitouUp = new LBitmap(imgList[2]);
158                 shitouUp.scaleX = 0.5;
159                 shitouUp.scaleY = 0.5;
160                 var shitouOver = new LBitmap(imgList[2]);
161                 shitouOver.scaleX = 0.5;
162                 shitouOver.scaleY = 0.5;
163                 shitouBtn = new LButton(shitouUp,shitouOver);
164                 shitouBtn.name = "shitou";
165                 shitouBtn.x = jiandanBtn.getWidth() + 10;
166                 shitouBtn.y = 0;
167 
168                 var buUp= new LBitmap(imgList[3]);
169                 buUp.scaleX = 0.5;
170                 buUp.scaleY = 0.5;
171                 var buOver = new LBitmap(imgList[3]);
172                 buOver.scaleX = 0.5;
173                 buOver.scaleY = 0.5;
174                 buBtn = new LButton(buUp,buOver);
175                 buBtn.name = "bu";
176                 buBtn.x = shitouBtn.getWidth() + jiandanBtn.getWidth() + 20;
177                 buBtn.y = 0;
178 
179                 clicklayer = new LSprite();
180                 clicklayer.width = jiandaoUp.getWidth() * 3 + 30;
181                 clicklayer.height = title.getHeight();
182                 clicklayer.x = playground.clientWidth/2 - clicklayer.width/2;
183                 clicklayer.y = playground.clientHeight - title.getHeight();
184 
185                 clicklayer.addChild(jiandanBtn);
186                 clicklayer.addChild(shitouBtn);
187                 clicklayer.addChild(buBtn);
188                 backlayer.addChild(clicklayer);
189 
190                 // 显示统计数据
191                 computerStatus = new LSprite();
192                 computerStatus.graphics.drawRect(1,'#250012',[0,title.getHeight()+10,150,200],true,"#ffffff");
193                 backlayer.addChild(computerStatus);
194 
195                 playStatus = new LSprite();
196                 playStatus.graphics.drawRect(1,"250012",[playground.clientWidth-150,title.getHeight()+10,150,200],true,"#ffffff");
197                 backlayer.addChild(playStatus);
198 
199                 initTextStatus();
200 
201                 // 监听事件
202                 jiandanBtn.addEventListener(LMouseEvent.MOUSE_UP,onBtnClick);
203                 shitouBtn.addEventListener(LMouseEvent.MOUSE_UP,onBtnClick);
204                 buBtn.addEventListener(LMouseEvent.MOUSE_UP,onBtnClick);
205             }
206 
207             function onBtnClick(e,btn)
208             {
209                 var player,computer;
210 
211                 switch(btn.name)
212                 {
213                     case "jiandao":
214                             player = 1;
215                             playerData.jiandan += 1;
216                         break;
217                     case "shitou":
218                             player = 2;
219                             playerData.shitou += 1;
220                         break;
221                     case "bu":
222                             player = 3;
223                             playerData.bu += 1;
224                         break;
225                 }
226                 // 电脑随机出拳
227                 computer = Math.ceil(Math.random()*3);
228                 switch(computer)
229                 {
230                     case 1:
231                             computerData.jiandan += 1;
232                         break;
233                     case 2:
234                             computerData.shitou += 1;
235                         break;
236                     case 3:
237                             computerData.bu += 1;
238                         break;
239                 }
240 
241                 // 显示出拳结果
242                 computerBitmap = new LBitmap(imgList[computer]);
243                 computerBitmap.x = playground.clientWidth/2 - computerBitmap.getWidth() - 10;
244                 computerBitmap.y = playground.clientHeight/2 - computerBitmap.getHeight()/2;
245                 backlayer.addChild(computerBitmap);
246 
247                 playerBitmap = new LBitmap(imgList[player]);
248                 playerBitmap.x = playground.clientWidth/2 + 10;
249                 playerBitmap.y = playground.clientHeight/2 - playerBitmap.getHeight()/2;
250                 backlayer.addChild(playerBitmap);
251 
252                 // 平局
253                  if(player == computer)
254                  {
255                      playerData.dogfall += 1;
256                      computerData.dogfall += 1;
257                  }
258                  else if(player-1 == computer || player+2 == computer)  // 胜场
259                  {
260                         playerData.win += 1;
261                         computerData.lose += 1;
262                  }
263                 else
264                  {
265                      playerData.lose += 1;
266                      computerData.win += 1;
267                  }
268 
269                 winText2.text = "Win : " + playerData.win;
270                 loseText2.text = "Lose : " + playerData.lose;
271                 dogFallText2.text = "DogFall : " + playerData.dogfall;
272                 jiandanText2.text = "JianDao : " + playerData.jiandan;
273                 shitouText2.text = "ShiTou : " + playerData.shitou;
274                 buText2.text = "Bu : " + playerData.bu;
275 
276                 winText1.text = "Win : " + computerData.win;
277                 loseText1.text = "Lose : " + computerData.lose;
278                 dogFallText1.text = "DogFall : " + computerData.dogfall;
279                 jiandanText1.text = "JianDao : " + computerData.jiandan;
280                 shitouText1.text = "ShiTou : " + computerData.shitou;
281                 buText1.text = "Bu : " + computerData.bu;
282             }
283 
284             function initTextStatus()
285             {
286                 winText1 = new LTextField();
287                 winText1.x = 10;
288                 winText1.y = title.getHeight() + 15;
289                 winText1.text = "Win : " + computerData.win;
290                 computerStatus.addChild(winText1);
291 
292                 loseText1 = new LTextField();
293                 loseText1.x = 10;
294                 loseText1.y = title.getHeight() + 35;
295                 loseText1.text = "Lose : " + computerData.lose;
296                 computerStatus.addChild(loseText1);
297 
298                 dogFallText1 = new LTextField();
299                 dogFallText1.x = 10;
300                 dogFallText1.y = title.getHeight() + 55;
301                 dogFallText1.text = "DogFall : " + computerData.dogfall;
302                 computerStatus.addChild(dogFallText1);
303 
304                 jiandanText1 = new LTextField();
305                 jiandanText1.x = 10;
306                 jiandanText1.y = title.getHeight() + 75;
307                 jiandanText1.text = "JianDao : " + computerData.jiandan;
308                 computerStatus.addChild(jiandanText1);
309 
310                 shitouText1 = new LTextField();
311                 shitouText1.x = 10;
312                 shitouText1.y = title.getHeight() + 95;
313                 shitouText1.text = "ShiTou : " + computerData.shitou;
314                 computerStatus.addChild(shitouText1);
315 
316                 buText1 = new LTextField();
317                 buText1.x = 10;
318                 buText1.y = title.getHeight() + 115;
319                 buText1.text = "Bu : " + computerData.bu;
320                 computerStatus.addChild(buText1);
321 
322                 winText2 = new LTextField();
323                 winText2.x = playground.clientWidth - 140;
324                 winText2.y = title.getHeight() + 15;
325                 winText2.text = "Win : " + playerData.win;
326                 playStatus.addChild(winText2);
327 
328                 loseText2 = new LTextField();
329                 loseText2.x = playground.clientWidth - 140;
330                 loseText2.y = title.getHeight() + 35;
331                 loseText2.text = "Lose : " + playerData.lose;
332                 playStatus.addChild(loseText2);
333 
334                 dogFallText2 = new LTextField();
335                 dogFallText2.x = playground.clientWidth - 140;
336                 dogFallText2.y = title.getHeight() + 55;
337                 dogFallText2.text = "DogFall : " + playerData.dogfall;
338                 playStatus.addChild(dogFallText2);
339 
340                 jiandanText2 = new LTextField();
341                 jiandanText2.x = playground.clientWidth - 140;
342                 jiandanText2.y = title.getHeight() + 75;
343                 jiandanText2.text = "JianDao : " + playerData.jiandan;
344                 playStatus.addChild(jiandanText2);
345 
346                 shitouText2 = new LTextField();
347                 shitouText2.x = playground.clientWidth - 140;
348                 shitouText2.y = title.getHeight() + 95;
349                 shitouText2.text = "ShiTou : " + playerData.shitou;
350                 playStatus.addChild(shitouText2);
351 
352                 buText2 = new LTextField();
353                 buText2.x = playground.clientWidth - 140;
354                 buText2.y = title.getHeight() + 115;
355                 buText2.text = "Bu : " + playerData.bu;
356                 playStatus.addChild(buText2);
357             }
358         </script>
359     </body>
360 </html>

 

 

posted @ 2017-03-26 08:41  GoodByeZ  阅读(374)  评论(0)  编辑  收藏  举报