HTML5 lufylegend引擎学习(一) -- 剪刀石头布小游戏
<!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开发的第二款小游戏.此游戏是大家想必大家小时候都玩过,因为玩它很简单,只需要一张草稿纸和一只笔就能开始游戏,所以广受儿 ...
随机推荐
- Windows7关闭默认共享
注意:禁用默认共享会导致安装ORACLE时执行先决条件检测不通过,要想安装ORACLE得先打开共享. 1.win+r 运行里输入compmgmt.msc进入计算机管理,在共享文件夹里,去掉所有的盘共享 ...
- 从网页跳转到自己的app
展开该数据并点击 Item 0.你将在这里定义自定义 URL scheme 的名字.只需要名字,不要在后面追加 :// — 比如,如果你输入 iOSDevApp,你的自定义 url 就是 iOSDev ...
- Java 教程(开发环境配置+基础语法)
Java 开发环境配置 在本章节中我们将为大家介绍如何搭建Java开发环境. window系统安装java 下载JDK 首先我们需要下载java开发工具包JDK,下载地址:http://www.ora ...
- GDB 调试指南
本文首发于我的公众号 Linux云计算网络(id: cloud_dev),专注于干货分享,号内有 10T 书籍和视频资源,后台回复 「1024」 即可领取,欢迎大家关注,二维码文末可以扫. 00 介绍 ...
- 复习0824js
编程思想: 面向过程:凡事亲力亲为,所有事情的过程都要清楚,注重的是过程. 面向对象:提出需求,找到对象,对象解决这个问题,我们要结果,注重的是结果. 面向对象的特性:封装,继承,多态: JS: 是一 ...
- [Flask Tips]Flask-APScheduler用法总结
在应用中需要使用调度框架来做一些统计的功能,可惜在Windows上可用的不多,最后选择了APScheduler这个调度器. 用法不多介绍,只总结一下在使用中遇到的坑. app_context 问题 凡 ...
- php数据提交POSt
通常情况下用户使用浏览器网页表单向服务器post提交数据,我们使用PHP的$_POST接收用户POST到服务器的数据,并进行适当的处理.但有些情况下,如用户使用客户端软件向服务端php程序发送post ...
- AJAX基础内容
1.什么是ajax?为什么要使用ajax? ajax是Asynchronous JavaScript and XML ,也称为创建交互式网页应用开发技术. 2.为什么采用ajax 1)通过异步交互,提 ...
- 这个注册的 IP 网络都不通了,Eureka 注册中心竟然无法踢掉它!
本文导读: 微服务技术架构选型介绍 k8s 容器化部署架构方案 Eureka 注册中心问题场景 问题解决手段及原理剖析 阅读本文建议先了解: 注册中心基本原理 K8s(Kuberneters)基本概念 ...
- java自学小测试 九九乘法表
public class Ninenine { public static void main(String[] args) { for(int i=1;i<=9;i++){ for(int j ...