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

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

 <!DOCTYPE html>

 <html>

     <head>

         <title>A Little Game!</title>

         <meta charset="utf-8" />

         <style>

             html,body{

                 height:100%;

                 width: 100%;

                 margin: 0;

                 padding: 0;

             }

             body{

                 background-color: black;

             }

             #playground{

                 background-color: white;

                 position: absolute;

                 width: 800px;

                 height: 400px;

                 left: 50%;

                 top: 50%;

                 margin-left: -400px;

                 margin-top: -200px;

             }

         </style>

     </head>

     <body>

         <div id="playground"></div>

         <script type="text/javascript" src="js/lufylegend-1.10.1.js.js"></script>

         <script>

             var playerData = {

                 win : 0,

                 lose : 0,

                 dogfall : 0,

                 jiandan : 0,

                 shitou : 0,

                 bu : 0

             };

             var computerData = {

                 win : 0,

                 lose : 0,

                 dogfall : 0,

                 jiandan : 0,

                 shitou : 0,

                 bu : 0

             };

             var playground;

             var backlayer;

             var graphic;

             var loadManager ;

             var loadingProgress;

             var bitmapData;

             var title;

             var clicklayer;

             var jiandanBtn;

             var shitouBtn;

             var buBtn;

             var playerBitmap;

             var computerBitmap;

             var playStatus;

             var computerStatus;

             var winText1;

             var loseText1;

             var dogFallText1;

             var jiandanText1;

             var shitouText1;

             var buText1;

             var winText2;

             var loseText2;

             var dogFallText2;

             var jiandanText2;

             var shitouText2;

             var buText2;

             var imgList = Array();

             var imgData = [

                 { name : "title",path : "./images/title.png"},

                 { name : "bu",path : "./images/bu.png"},

                 { name : "jiandao",path : "./images/jiandao.png"},

                 { name : "shitou",path : "./images/shitou.png"}

             ];

             playground = document.getElementById("playground");

             init(50,"playground",800,400,main);

             function main()

             {

                 backlayer = new LSprite();

                 addChild(backlayer);

                 loadingProgress = new LoadingSample3();

                 backlayer.addChild(loadingProgress);

                 LLoadManage.load(imgData,function(p){

                     loadingProgress.setProgress(p);

                 },gameInit);

             }

             function gameInit(result)

             {

                 backlayer.removeChild(loadingProgress);

                 loadingProgress = null;

                 // 存储图片的数据

                 imgList.push(new LBitmapData(result["title"]));

                 imgList.push(new LBitmapData(result["jiandao"]));

                 imgList.push(new LBitmapData(result["shitou"]));

                 imgList.push(new LBitmapData(result["bu"]));

                 // 标题

                 title = new LBitmap(imgList[0]);

                 title.x = playground.clientWidth/2 - title.getWidth()/2;

                 backlayer.addChild(title);

                 // 三八线

                 backlayer.graphics.drawLine(1,"#06061F",[playground.clientWidth/2,title.getHeight(),playground.clientWidth/2,playground.clientHeight-title.getHeight()]);

                 // 显示玩家的名称

                 var computerText = new LTextField();

                 computerText.text = "电脑";

                 computerText.color = "#250012";

                 computerText.size = 17;

                 computerText.font = "Calibri Light";

                 computerText.x = playground.clientWidth/4 - computerText.getWidth()/2;

                 computerText.y = playground.clientHeight-title.getHeight();

                 backlayer.addChild(computerText);

                 var  playerText = new LTextField();

                 playerText.text = "玩家";

                 playerText.color = "#250012";

                 playerText.size = 17;

                 playerText.font = "Calibri Light";

                 playerText.x = (playground.clientWidth/4)*3 - playerText.getWidth()/2;

                 playerText.y = playground.clientHeight - title.getHeight();

                 backlayer.addChild(playerText);

                 // 放置剪刀、石头、布的图片

                 var jiandaoUp = new LBitmap(imgList[1]);

                 jiandaoUp.scaleX = 0.5;

                 jiandaoUp.scaleY = 0.5;

                 var jiandaoOver = new LBitmap(imgList[1]);

                 jiandaoOver.scaleX = 0.5;

                 jiandaoOver.scaleY = 0.5;

                 jiandanBtn = new LButton(jiandaoUp,jiandaoOver);

                 jiandanBtn.name = "jiandao";

                 jiandanBtn.x = 0;

                 jiandanBtn.y = 0;

                 var shitouUp = new LBitmap(imgList[2]);

                 shitouUp.scaleX = 0.5;

                 shitouUp.scaleY = 0.5;

                 var shitouOver = new LBitmap(imgList[2]);

                 shitouOver.scaleX = 0.5;

                 shitouOver.scaleY = 0.5;

                 shitouBtn = new LButton(shitouUp,shitouOver);

                 shitouBtn.name = "shitou";

                 shitouBtn.x = jiandanBtn.getWidth() + 10;

                 shitouBtn.y = 0;

                 var buUp= new LBitmap(imgList[3]);

                 buUp.scaleX = 0.5;

                 buUp.scaleY = 0.5;

                 var buOver = new LBitmap(imgList[3]);

                 buOver.scaleX = 0.5;

                 buOver.scaleY = 0.5;

                 buBtn = new LButton(buUp,buOver);

                 buBtn.name = "bu";

                 buBtn.x = shitouBtn.getWidth() + jiandanBtn.getWidth() + 20;

                 buBtn.y = 0;

                 clicklayer = new LSprite();

                 clicklayer.width = jiandaoUp.getWidth() * 3 + 30;

                 clicklayer.height = title.getHeight();

                 clicklayer.x = playground.clientWidth/2 - clicklayer.width/2;

                 clicklayer.y = playground.clientHeight - title.getHeight();

                 clicklayer.addChild(jiandanBtn);

                 clicklayer.addChild(shitouBtn);

                 clicklayer.addChild(buBtn);

                 backlayer.addChild(clicklayer);

                 // 显示统计数据

                 computerStatus = new LSprite();

                 computerStatus.graphics.drawRect(1,'#250012',[0,title.getHeight()+10,150,200],true,"#ffffff");

                 backlayer.addChild(computerStatus);

                 playStatus = new LSprite();

                 playStatus.graphics.drawRect(1,"250012",[playground.clientWidth-150,title.getHeight()+10,150,200],true,"#ffffff");

                 backlayer.addChild(playStatus);

                 initTextStatus();

                 // 监听事件

                 jiandanBtn.addEventListener(LMouseEvent.MOUSE_UP,onBtnClick);

                 shitouBtn.addEventListener(LMouseEvent.MOUSE_UP,onBtnClick);

                 buBtn.addEventListener(LMouseEvent.MOUSE_UP,onBtnClick);

             }

             function onBtnClick(e,btn)

             {

                 var player,computer;

                 switch(btn.name)

                 {

                     case "jiandao":

                             player = 1;

                             playerData.jiandan += 1;

                         break;

                     case "shitou":

                             player = 2;

                             playerData.shitou += 1;

                         break;

                     case "bu":

                             player = 3;

                             playerData.bu += 1;

                         break;

                 }

                 // 电脑随机出拳

                 computer = Math.ceil(Math.random()*3);

                 switch(computer)

                 {

                     case 1:

                             computerData.jiandan += 1;

                         break;

                     case 2:

                             computerData.shitou += 1;

                         break;

                     case 3:

                             computerData.bu += 1;

                         break;

                 }

                 // 显示出拳结果

                 computerBitmap = new LBitmap(imgList[computer]);

                 computerBitmap.x = playground.clientWidth/2 - computerBitmap.getWidth() - 10;

                 computerBitmap.y = playground.clientHeight/2 - computerBitmap.getHeight()/2;

                 backlayer.addChild(computerBitmap);

                 playerBitmap = new LBitmap(imgList[player]);

                 playerBitmap.x = playground.clientWidth/2 + 10;

                 playerBitmap.y = playground.clientHeight/2 - playerBitmap.getHeight()/2;

                 backlayer.addChild(playerBitmap);

                 // 平局

                  if(player == computer)

                  {

                      playerData.dogfall += 1;

                      computerData.dogfall += 1;

                  }

                  else if(player-1 == computer || player+2 == computer)  // 胜场

                  {

                         playerData.win += 1;

                         computerData.lose += 1;

                  }

                 else

                  {

                      playerData.lose += 1;

                      computerData.win += 1;

                  }

                 winText2.text = "Win : " + playerData.win;

                 loseText2.text = "Lose : " + playerData.lose;

                 dogFallText2.text = "DogFall : " + playerData.dogfall;

                 jiandanText2.text = "JianDao : " + playerData.jiandan;

                 shitouText2.text = "ShiTou : " + playerData.shitou;

                 buText2.text = "Bu : " + playerData.bu;

                 winText1.text = "Win : " + computerData.win;

                 loseText1.text = "Lose : " + computerData.lose;

                 dogFallText1.text = "DogFall : " + computerData.dogfall;

                 jiandanText1.text = "JianDao : " + computerData.jiandan;

                 shitouText1.text = "ShiTou : " + computerData.shitou;

                 buText1.text = "Bu : " + computerData.bu;

             }

             function initTextStatus()

             {

                 winText1 = new LTextField();

                 winText1.x = 10;

                 winText1.y = title.getHeight() + 15;

                 winText1.text = "Win : " + computerData.win;

                 computerStatus.addChild(winText1);

                 loseText1 = new LTextField();

                 loseText1.x = 10;

                 loseText1.y = title.getHeight() + 35;

                 loseText1.text = "Lose : " + computerData.lose;

                 computerStatus.addChild(loseText1);

                 dogFallText1 = new LTextField();

                 dogFallText1.x = 10;

                 dogFallText1.y = title.getHeight() + 55;

                 dogFallText1.text = "DogFall : " + computerData.dogfall;

                 computerStatus.addChild(dogFallText1);

                 jiandanText1 = new LTextField();

                 jiandanText1.x = 10;

                 jiandanText1.y = title.getHeight() + 75;

                 jiandanText1.text = "JianDao : " + computerData.jiandan;

                 computerStatus.addChild(jiandanText1);

                 shitouText1 = new LTextField();

                 shitouText1.x = 10;

                 shitouText1.y = title.getHeight() + 95;

                 shitouText1.text = "ShiTou : " + computerData.shitou;

                 computerStatus.addChild(shitouText1);

                 buText1 = new LTextField();

                 buText1.x = 10;

                 buText1.y = title.getHeight() + 115;

                 buText1.text = "Bu : " + computerData.bu;

                 computerStatus.addChild(buText1);

                 winText2 = new LTextField();

                 winText2.x = playground.clientWidth - 140;

                 winText2.y = title.getHeight() + 15;

                 winText2.text = "Win : " + playerData.win;

                 playStatus.addChild(winText2);

                 loseText2 = new LTextField();

                 loseText2.x = playground.clientWidth - 140;

                 loseText2.y = title.getHeight() + 35;

                 loseText2.text = "Lose : " + playerData.lose;

                 playStatus.addChild(loseText2);

                 dogFallText2 = new LTextField();

                 dogFallText2.x = playground.clientWidth - 140;

                 dogFallText2.y = title.getHeight() + 55;

                 dogFallText2.text = "DogFall : " + playerData.dogfall;

                 playStatus.addChild(dogFallText2);

                 jiandanText2 = new LTextField();

                 jiandanText2.x = playground.clientWidth - 140;

                 jiandanText2.y = title.getHeight() + 75;

                 jiandanText2.text = "JianDao : " + playerData.jiandan;

                 playStatus.addChild(jiandanText2);

                 shitouText2 = new LTextField();

                 shitouText2.x = playground.clientWidth - 140;

                 shitouText2.y = title.getHeight() + 95;

                 shitouText2.text = "ShiTou : " + playerData.shitou;

                 playStatus.addChild(shitouText2);

                 buText2 = new LTextField();

                 buText2.x = playground.clientWidth - 140;

                 buText2.y = title.getHeight() + 115;

                 buText2.text = "Bu : " + playerData.bu;

                 playStatus.addChild(buText2);

             }

         </script>

     </body>

 </html>

HTML5 lufylegend引擎学习（一） -- 剪刀石头布小游戏的更多相关文章

HTML5游戏开发,剪刀石头布小游戏案例
剪刀石头布,非常可爱的小游戏,相信大家都非常的怀念这款小游戏,小时候也玩过很多次,陪伴着我的童年的成长,现在是不是还会玩一下,剪刀石头布游戏的规则我们都知道是:剪刀剪布,石头砸剪刀,布包石头.跟朋友. ...
html5+Canvas实现酷炫的小游戏
最近除了做业务,也在尝试学习h5和移动端,在这个过程中,学到了很多,利用h5和canvas做了一个爱心鱼的小游戏.点这里去玩一下 PS: 貌似有点闪屏,亲测多刷新两下就好了==.代码在本地跑都不会闪, ...
JQuery&原生js ——实现剪刀石头布小游戏
前言 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库( 或JavaScript框架).jQuery设计的宗旨是“write L ...
Java GUI学习,贪吃蛇小游戏
JAVA GUI练习贪吃蛇小游戏前几天虽然生病了,但还是跟着狂神学习了GUI的方面,跟着练习了贪吃蛇的小项目,这里有狂神写的源码点我下载,还有我跟着敲的点我下载,嘿嘿,也就注释了下重要的地方,这方 ...
html5面向对象做一个贪吃蛇小游戏
canvas加面向对象方式的贪吃蛇 2016-08-25 这个小游戏可以增加对面向对象的理解,可以加强js逻辑能力,总之认真自己敲一两遍收获还是不少啊!!适合刚学canvas的同学练习!! 废话不多说 ...
微信小程序开发入门学习(1):石头剪刀布小游戏
从今天起开始捣鼓小程序了2018-12-17 10:02:15 跟着教程做了第一个入门实例有兴趣的朋友可以看看: 猜拳游戏布局程序达到的效果猜拳游戏的布局是纵向显示了三个组件:文本组件(tex ...
python学习-6 猜拳小游戏
import random # 调用随机数模块 pc = random.randint(1,3) # 产生1-3的随机数 print("来玩个猜拳游戏吧!") a = '石头' b ...
一款简洁而强大的前端框架JQUery—动画效果及剪刀石头布小游戏
jQuery是什么? jQuery是一个快速.简洁的JavaScript框架,它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作.事件处理.动画 ...
[HTML5实现人工智能]小游戏《井字棋》发布，据说IQ上200才能赢
一,什么是TicTacToe(井字棋) 本游戏为在下用lufylegend开发的第二款小游戏.此游戏是大家想必大家小时候都玩过,因为玩它很简单,只需要一张草稿纸和一只笔就能开始游戏,所以广受儿 ...

随机推荐

Azure虚拟机时间同步问题
场景描述:在Azure上新创建虚拟机默认是UTC时区的,因为业务在国内,所以要修改在CST注:协调世界时(英语:Coordinated Universal Time,法语:Temps Universe ...
Winform中实现ZedGraph中曲线右键显示为中文
场景 Winforn中设置ZedGraph曲线图的属性.坐标轴属性.刻度属性: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/10 ...
MySQL单标查询
一单表查询的语法 #查询数据的本质:mysql会到你本地的硬盘上找到对应的文件,然后打开文件,按照你的查询条件来找出你需要的数据.下面是完整的一个单表查询的语法 select * from,这个se ...
云服务器 ECS Linux 系统 MySQL 备份的导入导出
MySQL 备份的导出注意: 如果您使用的是帮助中心的一键环境配置,那么 MySQL 的安装目录是 /alidata/server/mysql. 如果您将 MySQL 安装到其他目录,您需要输入您 ...
Cannot find class: com.mysql.jdbc.Driver错误及解决办法。
在刚刚开始搭建Mybatis源码解析,一步一步从浅入深简单示例的时候,我使用的是mysql 5.1.12版本的驱动包.运行时出现如下错误: Cause: java.sql.SQLException: ...
RxSwift 中的调度器
与 ReactiveCocoa 相比,Rx 的一大优势就是更丰富的并发模型.提到并发,就不得不提多线程.在 RxSwift 中,与线程对应的概念就是调度器,本文就调度器做些介绍,包括并发调度器.串行调 ...
2015年蓝桥杯java b组第十题
10. 生命之树在X森林里,上帝创建了生命之树. 他给每棵树的每个节点(叶子也称为一个节点)上,都标了一个整数,代表这个点的和谐值. 上帝要在这棵树内选出一个非空节点集S,使得对于S中的任意两个点a ...
ppt课件动手动脑实际验证
1关于double精度源代码:public class Doublejingdu { public static void main(String[] args) { System.out.prin ...
Vue.js+vue-element搭建属于自己的后台管理模板：什么是Vue.js?（一）
Vue.js+vue-element搭建属于自己的后台管理模板:Vue.js是什么?(一) 前言本教程主要讲解关于前端Vue.js框架相关技术知识,通过学习一步一步学会搭建属于自己的后台管理模板,并 ...
数据分析--pandas的基本使用
一.pandas概述 1.pandas是一个强大的Python数据分析的工具包,是基于NumPy构建的. 2.pandas的主要功能具备对其功能的数据结构DataFrame.Series 集成时间序 ...

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

HTML5 lufylegend引擎学习（一） -- 剪刀石头布小游戏的更多相关文章

随机推荐

热门专题