HTML5(石头剪刀布游戏开发)

 <%@ page language="java" contentType="text/html; charset=UTF-8"

     pageEncoding="UTF-8"%>

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

 <title>HTML5-lufyLegend测试</title>

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

 <script type="text/javascript" src="js/Box2dWeb-2.1.a.3.min.js"></script>

 <script type="text/javascript" src="js/jquery-1.10.2.js"></script>

 <script type="text/javascript">

     $(function(){

         var backLayer = "";

         var resultLayer = "";

         var clickLayer = "";

         var loadingLayer = "";

         var enmeyBitmap = "";

         var selfBitmap = "";

         var imageList = {};

         var showList = [];

         var selfTextAll="";

         var selfTextWin="";

         var selfTextLoss="";

         var selfTextEq="";

         var win = 0;

         var lost = 0;

         var eq = 0;

         var imageData = new Array(

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

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

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

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

                         );

         init(50,"mylegend",1500,500,main);

         function main(){

             backLayer = new LSprite();

             addChild(backLayer);

             loadingLayer = new LoadingSample3();

             backLayer.addChild(loadingLayer);

             LLoadManage.load(imageData,

                     function(data){

                         loadingLayer.setProgress(data);

                     },function(result){

                         imageList = result;

                         backLayer.removeChild(loadingLayer);

                         loadingLayer = null;

                         //游戏界面初始化

                         gameInit();

                     });

         }

         function gameInit(){

             showList.push(new LBitmapData(imageList["shitou"]));

             showList.push(new LBitmapData(imageList["jiandao"]));

             showList.push(new LBitmapData(imageList["bu"]));

             var titleBitmap = new LBitmap(new LBitmapData(imageList["title"]));

             titleBitmap.x = 100;

             titleBitmap.y = 10;

             backLayer.addChild(titleBitmap);

             //名称设定

             var selfText = new LTextField();

             selfText.text="玩家";

             selfText.color="white";

             selfText.weight = "bold";

             selfText.x = 215;

             selfText.y = 90;

             backLayer.addChild(selfText);

             //玩家方出拳图片

              selfBitmap = new LBitmap(showList[0]);

             selfBitmap.x = 170;

             selfBitmap.y = 110;

             backLayer.addChild(selfBitmap);

             //我放出拳图片

             enmeyBitmap = new LBitmap(showList[1]);

             enmeyBitmap.x = 350;

             enmeyBitmap.y = 110;

             backLayer.addChild(enmeyBitmap);

             //名称设定

             var selfText = new LTextField();

             selfText.text="电脑";

             selfText.color="white";

             selfText.x = 400;

             selfText.weight = "bold";

             selfText.y = 90;

             backLayer.addChild(selfText);

             backLayer.graphics.drawRect(1,"black",[0,0,600,700],true,"black");

             backLayer.x = 300;

             backLayer.y = 100;

             //结果显示初始化

             initialResult();

             //操作层初始化

             initialClick();

         }

         function initialResult(){

             resultLayer = new LSprite();

             resultLayer.graphics.drawRect(1,"black",[0,0,150,100],true,"white");

             resultLayer.x = 10;

             resultLayer.y = 117;

             backLayer.addChild(resultLayer);

             selfTextAll = new LTextField();

             selfTextAll.text =  "猜拳次数：0";

             selfTextAll.x = 10;

             selfTextAll.y = 10;

             resultLayer.addChild(selfTextAll);

             selfTextWin = new LTextField();

             selfTextWin.text =  "胜利次数：0";

             selfTextWin.x = 10;

             selfTextWin.y = 30;

             resultLayer.addChild(selfTextWin);

             selfTextLoss = new LTextField();

             selfTextLoss.text =  "失败次数：0";

             selfTextLoss.x = 10;

             selfTextLoss.y = 50;

             resultLayer.addChild(selfTextLoss);

             selfTextEq = new LTextField();

             selfTextEq.text =  "平局次数：0";

             selfTextEq.x = 10;

             selfTextEq.y = 70;

             resultLayer.addChild(selfTextEq);

         }

         function initialClick(){

             clickLayer = new LSprite();

             clickLayer.graphics.drawRect(1,"black",[0,0,250,100],true,"white");

             clickLayer.x = 200;

             clickLayer.y = 280;

             backLayer.addChild(clickLayer);

             var text1 =new  LTextField();

             text1.text="请出拳";

             text1.x = 10;

             text1.y = 10;

             clickLayer.addChild(text1);

             var btn_Shitou = getButton("shitou");

             var btn_Jiandao = getButton("jiandao");

                var btn_Bu = getButton("bu");

             btn_Shitou.x = 10;

             btn_Shitou.y = 30;

             btn_Jiandao.x = 90;

             btn_Jiandao.y = 30;

             btn_Bu.x = 170;

             btn_Bu.y = 30;

             btn_Shitou.addEventListener(LMouseEvent.MOUSE_UP,onclick);

             btn_Jiandao.addEventListener(LMouseEvent.MOUSE_UP,onclick);

             btn_Bu.addEventListener(LMouseEvent.MOUSE_UP,onclick);

             clickLayer.addChild(btn_Shitou);

             clickLayer.addChild(btn_Jiandao);

             clickLayer.addChild(btn_Bu);

         }

         function onclick(event,display){

             var self,enmey;

             if(display.name == "shitou"){

                 self = 0;

             }else if(display.name == "jiandao"){

                 self = 1;

             }else {

                 self = 2;

             }

             enmey = Math.floor(Math.random()*3);

             selfBitmap.bitmapData = showList[self];

             enmeyBitmap.bitmapData = showList[enmey];

             var checkList = [[0,1,-1],[-1,0,1],[1,-1,0]];

             var result = checkList[self][enmey];

             if(result == -1){

                 lost +=1;

             } else if(result == 1){

                 win+=1;

             }else{

                 eq+=1;

             }

                 selfTextAll.text = "猜拳次数："+(lost+eq+win);

                 selfTextWin.text = "胜利次数："+win;

                 selfTextLoss.text = "失败次数："+lost;

                 selfTextEq.text = "平局次数："+eq;

         }

         function getButton(flag){

             var btn_UP = new LBitmap(new LBitmapData(imageList[flag]));

             btn_UP.scaleX= 0.5;

             btn_UP.scaleY= 0.5;

             var btn_Over = new LBitmap(new LBitmapData(imageList[flag]));

             btn_Over.scaleX= 0.5;

             btn_Over.scaleY= 0.5;

             btn_Over.x = 1;

             btn_Over.y = 1;

             var btn = new LButton(btn_UP, btn_Over);

             btn.name = flag;

             return btn;

         }

     });

 </script>

 </head>

 <body>

     <div id="mylegend">loading...</div>

 </body>

 </html>

HTML5(石头剪刀布游戏开发)的更多相关文章

Html5 Egret游戏开发成语大挑战（一）开篇
最近接触了Egret白鹭引擎,感觉非常好用,提供了各种各样的开发工具让开发者和设计者更加便捷,并且基于typescript语言开发省去了很多学习成本,对于我们这种掉微软坑许久的童鞋来说,确实很有吸引力 ...
Phaser是一款专门用于桌面及移动HTML5 2D游戏开发的开源免费框架
Phaser是一款专门用于桌面及移动HTML5 2D游戏开发的开源免费框架,提供JavaScript和TypeScript双重支持,内置游戏对象的物理属性,采用Pixi.js引擎以加快Canvas和W ...
HTML5 Canvas游戏开发实战 PDF扫描版
HTML5 Canvas游戏开发实战主要讲解使用HTML5 Canvas来开发和设计各类常见游戏的思路和技巧,在介绍HTML5 Canvas相关特性的同时,还通过游戏开发实例深入剖析了其内在原理,让读 ...
HTML5物理游戏开发 - 越野山地自行车（三）粉碎自行车
自上一章公布到如今已时隔四月,实在对不住大家.让大家久等了~话说不是我不关注我的博客,而是事情一多起来写博客的时间就少了. 待到今日有空了,回头看了看自己曾经写的文章,猛得发现已经四个月不曾写文章了. ...
Html5 Egret游戏开发成语大挑战（八）一般性二级页面处理
在游戏中,我们一般会有各种各样的二级页面,比如游戏暂停界面或者游戏结束界面,这些界面组成了对玩家交互主要手段,在游戏开发中,对于这些界面的coding组织是非常有学问的,如果倒退到十年前,游戏开发的老 ...
Html5 Egret游戏开发成语大挑战（六）游戏界面构建和设计
本篇将主要讲解游戏界面的构建和设计,会应用到egret.eui的自定义组件,可以很直观的构建一个游戏整体,这里我们仍然只需要使用EgretWing就可以达到目的,本篇可能是篇幅最少的一个,但是涉及自定 ...
HTML5 Canvas游戏开发（三）lufylegend开源库件(上)
lufylegend可以解决HTML5开发游戏中会遇到的一些问题: 1.各种浏览器对于JavaScript和HTML的解析是不一致的. 2.手机浏览器和PC浏览器的区别. 3.JavaScript并非 ...
Html5 Egret游戏开发成语大挑战（九）设置界面和声音管理
在上一篇中,简单的使用界面元素快速实现了一个游戏中的二级页面,这种直接在游戏页面上做UI的做法并不太好,原因是,UI会让游戏的压力变大,即使它是隐蔽的,如果同样的功能在其它的地方也是一样的,那么就要写 ...
Html5 Egret游戏开发成语大挑战（七）游戏逻辑和数据处理
本篇在前面的基础上,将进行逻辑的编码开发让游戏能够正式的玩起来,这里没有注重太多的体验细节,而是直接实现游戏的规则逻辑,将分成两个部分说明:数据处理和游戏逻辑. 初始化游戏数据在前面的第五篇中,我们 ...

随机推荐

Codeforces 903F Clear The Matrix（状态压缩DP）
题目链接 Clear The Matrix 题意给定一个$4 * n$的矩形,里面的元素为$'.'$或$'*'$.现在有$4$种正方形可以覆盖掉$'*'$,正方形的边长分别为$1,2,3,4$. 求 ...
ansible 文件和目录操作
ansible file 模块参考: refer to https://docs.ansible.com/ansible/latest/modules/file_module.html?highlig ...
lock与monitor的区别
1.Lock 只能对引用对象加锁 Lock锁定区间内可以对锁定值修改而不发生运行时错误,通常也会采用此种修改方式.这种方式又有点类同于使用Monitor.Wait取得资源,并对这个资源进行操作. 用法 ...
Scut游戏服务器引擎6.1.5.6发布，直接可运行，支持热更新
1. 增加exe版(console),web版本(IIS)的游戏服宿主程序 2. 增加Model支持脚本化,实现不停服更新 3. 增加Language支持脚本化 4. 修改Sns与Pay Center ...
Linux内核裁剪的具体步骤
在menuconfig中配置: 详细介绍内核配置选项及删改情况第一部分:全部删除 Code maturity level options ---> 代码成熟等级选项 []Prompt for ...
k8s学习（二）——etcdctl工具的使用
k8s的实现核心实际上就是通过读写etcd数据库实现对资源的存储,管理和控制. k8s所有资源的本源都是存储在etcd中的一个个键值对. 理论上可以观察到etcd数据库中的数据变化.具体的使用方式如下 ...
AAuto如何设置定时器
在设计视图中(一定要有个Form)点击左下角的功能组件点击定时器即可切换到代码视图,并添加如下代码.其中我每隔一秒改变一下winform.static2.text的文本值
Linux视频培训教程
很详尽的Linux培训教程,既包含日常工作常常要用到的实践及技巧,又包含Linux认证及系统管理及架构,讲的很不错.最关键的.这么具体,完整的教程还是免费的.花了点时间拿它整理了下. 第一部分: Li ...
shell脚本实现定时重启任务并输出日志信息
#!/bin/bash #当前日期 time=`date` pidno=`ps aux|grep adserver-beta|grep -v "grep"|awk '{print ...
VueJS路由
Vue.js 路由本章节我们将为大家介绍 Vue.js 路由. Vue.js 路由允许我们通过不同的 URL 访问不同的内容. 通过 Vue.js 可以实现多视图的单页Web应用(single pa ...

HTML5(石头剪刀布游戏开发)

HTML5(石头剪刀布游戏开发)的更多相关文章

随机推荐

热门专题