您的位置：首页 > Web前端 > JavaScript
HTML5游戏开发之 -- lufylegend. js猜拳游戏（竖屏）

2017-08-17 14:08 447 查看
不懂的部分可以查询API

传送门在此： http://lufylegend.com/api/zh_CN/out/classes/FPS.html

效果预览：
代码部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="mylegend"></div>
<script type="text/javascript" src="js/lufylegend-1.7.6.min.js"></script>
<script type="text/javascript">

//窗口发生变化重新获取数据
window.onresize = function(){
history.go(0);//刷新页面进入进度条界面
gamesSize();
}

function gamesSize() {

//获取可视区域宽高
var w = document.documentElement.clientWidth || document.body.clientWidth;
var h = document.documentElement.clientHeight || document.body.clientHeight;

//初始化(游戏速度设定，canvas的容器ID，游戏界面的宽，游戏界面的高，初始化后执行的函数)
init(50,"mylegend",w,h,main);
}

gamesSize();

var loadingLayer,//进度条
backLayer,//背景层
resultLayer,//结果显示层
clickLayer,//操作层
selfBitmap,//玩家出拳图片
enemyBitmap,//电脑出拳图片
selfTextAll,//猜拳次数
selfTextWin,//胜利次数
selfTextLoss,//失败次数
selfTextDraw,//平局次数
win = 0,
loss = 0,
draw = 0;
var imglist = {};

//设置需要加载的图片数据数组
var imgData = new Array(
{name:"title",path:"./img/title2.png"},
{name:"shitou",path:"./img/shitou.png"},
{name:"jiandao",path:"./img/jiandao.png"},
{name:"bu",path:"./img/bu.png"}
);

//胜负结果判断数组
var checkList = [
[0,1,-1],
[-1,0,1],
[1,-1,0]
];

var showList = new Array();

function main() {

//建立一个容器
backLayer = new LSprite();
addChild(backLayer);

//建立一个进度条（效果是第三种）
loadingLayer = new LoadingSample3();

//将进度条添加到backLayer容器中
backLayer.addChild(loadingLay
4000
er);

//LLoadManage类是可以用来同时读取图片，文本以及js多种类型的文件
LLoadManage.load(

//指定需要加载的数组
imgData,

//加载过程中调用的函数，计算已加载的文件个数与总数比例，以设置进度条进度
function(progress) {
loadingLayer.setProgress(progress)
},

//数组中的所有数据加载完毕后调用的函数
function(result) {

//将进度条返回的数组赋值给imglist数组
imglist = result;

//移除进度条
backLayer.removeChild(loadingLayer);

//清除loadingLayer容器
loadingLayer = null;

//数据加载完毕后显示游戏界面
gameInit();
}
);
}

function gameInit(){

//将所有图像路径添加至showList数组中
showList.push(new LBitmapData(imglist["shitou"]));
showList.push(new LBitmapData(imglist["jiandao"]));
showList.push(new LBitmapData(imglist["bu"]));

//添加游戏界面背景
//Objct.graphics.drawRect(边框线宽度，边框线颜色，[X轴坐标，Y轴坐标，宽，高]，背景色是否显示，设置背景色)
backLayer.graphics.drawRect(10,'#008800',[0,0,LGlobal.width,LGlobal.height],true,'#000000');

//显示游戏标题图片
titleBitmap = new LBitmap(new LBitmapData(imglist['title']));

//X轴缩放大小
titleBitmap.scaleX = 0.5;

//Y轴缩放大小
titleBitmap.scaleY = 0.5;

//容器X轴坐标
titleBitmap.x = (LGlobal.width - 220)/2;

//容器Y轴坐标
titleBitmap.y = 30;

//将容器添加至背景图层backLayer容器内（相当于resultLayer成为backLayer的子元素，坐标以他为相对值进行移动）
backLayer.addChild(titleBitmap);

//玩家方出拳图片
selfBitmap = new LBitmap(showList[0]);
selfBitmap.x = (LGlobal.width - selfBitmap.width)/2 - 80;
selfBitmap.y = (LGlobal.height - selfBitmap.height)/2 + 80;
backLayer.addChild(selfBitmap);

//电脑方出拳图片
enemyBitmap = new LBitmap(showList[0]);
enemyBitmap.x = (LGlobal.width - enemyBitmap.width)/2 + 70;
enemyBitmap.y = (LGlobal.height - enemyBitmap.height)/2 + 80;
backLayer.addChild(enemyBitmap);

//玩家电脑名称设定
var nameText;
nameText = new LTextField();
nameText.text = "玩家";
nameText.weight = "bolder";
nameText.color = "#ffffff";
nameText.size = 20;
nameText.x = selfBitmap.x + (selfBitmap.width - nameText.getWidth())/2;
nameText.y = (LGlobal.height - enemyBitmap.height)/2 + 40;
backLayer.addChild(nameText);
nameText = new LTextField();
nameText.text = "电脑";
nameText.weight = "bolder";
nameText.color = "#ffffff";
nameText.size = 20;
nameText.x = enemyBitmap.x + (enemyBitmap.width - nameText.getWidth())/2;
nameText.y = (LGlobal.height - enemyBitmap.height)/2 + 40;
backLayer.addChild(nameText);

//结果显示层初始化
initResultLayer();

//操作层初始化
initClickLayer();
}

function initResultLayer(){

resultLayer = new LSprite();
resultLayer.graphics.drawRect(4,'#ff8800',[0,0,150,110],true,'#ffffff');
resultLayer.x = 10;
resultLayer.y = 100;
backLayer.addChild(resultLayer);

selfTextAll = new LTextField();
selfTextAll.text = "猜拳次数 ： 0";
selfTextAll.weight = "bolder";
selfTextAll.x = 10;
selfTextAll.y = 20;
resultLayer.addChild(selfTextAll);

selfTextWin = new LTextField();
selfTextWin.text = "胜利次数 ： 0";
selfTextWin.weight = "bolder";
selfTextWin.x = 10;
selfTextWin.y = 40;
resultLayer.addChild(selfTextWin);

selfTextLoss = new LTextField();
selfTextLoss.text = "失败次数 ： 0";
selfTextLoss.weight = "bolder";
selfTextLoss.x = 10;
selfTextLoss.y = 60;
resultLayer.addChild(selfTextLoss);

selfTextDraw = new LTextField();
selfTextDraw.text = "平局次数 ： 0";
selfTextDraw.weight = "bolder";
selfTextDraw.x = 10;
selfTextDraw.y = 80;
resultLayer.addChild(selfTextDraw);
}

function initClickLayer(){
clickLayer = new LSprite();
clickLayer.graphics.drawRect(4,'#ff8800',[0,0,LGlobal.width - 14,90],true,'#ffffff');
clickLayer.x = 7;
clickLayer.y = (LGlobal.height - 90) - 7;

var msgText = new LTextField();
msgText.text = "请出拳：";
msgText.weight = "bolder";
msgText.x = 10;
msgText.y = 10;
clickLayer.addChild(msgText);

var btnShitou = getButton("shitou");
btnShitou.x = (LGlobal.width - btnShitou.width)/2 - 80;
btnShitou.y = 35;
clickLayer.addChild(btnShitou);
btnShitou.addEventListener(LMouseEvent.MOUSE_UP,onclick);

var btnJiandao = getButton("jiandao");
btnJiandao.x = (LGlobal.width - btnJiandao.width)/2 + 10;
btnJiandao.y = 35;
clickLayer.addChild(btnJiandao);
btnJiandao.addEventListener(LMouseEvent.MOUSE_UP,onclick);

var btnBu = getButton("bu");
btnBu.x = (LGlobal.width - btnBu.width)/2 + 105;
btnBu.y = 35;
clickLayer.addChild(btnBu);
btnBu.addEventListener(LMouseEvent.MOUSE_UP,onclick);
backLayer.addChild(clickLayer);
}

function onclick(event,display){
var selfValue,enemyValue;

//获取点击按钮的名称，并设置每个按钮的值
if(display.name == "shitou"){
selfValue = 0;
}else if(display.name == "jiandao"){
selfValue = 1;
}else if(display.name == "bu"){
selfValue = 2;
}

//设置电脑的值（0-2的随机数）
enemyValue = Math.floor(Math.random()*3);

selfBitmap.bitmapData = showList[selfValue];
enemyBitmap.bitmapData = showList[enemyValue];
var result = checkList[selfValue][enemyValue];

//判断胜负
if(result == -1){
loss += 1;
}else if(result == 1){
win += 1;
}else{
draw += 1;
}

//统计胜负
selfTextWin.text = "胜利次数 ： " + win;
selfTextLoss.text = "失败次数 ： " + loss;
selfTextDraw.text = "平局次数 ： " +  draw;
selfTextAll.text = "猜拳次数 ： " + (win + loss + draw);
}

function getButton(value){

var btnUp = new LBitmap(new LBitmapData(imglist[value]));
btnUp.scaleX = 0.5;
btnUp.scaleY = 0.5;

var btnOver = new LBitmap(new LBitmapData(imglist[value]));
btnOver.scaleX = 0.5;
btnOver.scaleY = 0.5;
btnOver.x = 2;
btnOver.y = 2;

var btn = new LButton(btnUp,btnOver);
btn.name = value;
return btn;
}

</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签： html5游戏开发 html5 javascript lufylegend
相关文章推荐
新的分享
章节导航