每日一练（二）HTML5-lufylegend.js制作猜拳游戏
史朗
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>石头剪刀布</title>
<script src="lufylegend-1.10.1.min.js"></script>
</head>
<body>
<div id="legend"></div>
</body>
<script>
init(50, "legend", 800, 500, main);
var backLayer, clickLayer, resultLayer, loadingLayer, selfBitmap, enemyBitmap;
var imglist = {}, imgData = new Array(
{name: "title", path: "./images/title.png"},
{name: "shitou", path: "./images/1.png"},
{name: "jiandao", path: "./images/2.png"},
{name: "bu", path: "./images/3.png"}
);
var showList = new Array();
var selfTextALl, selfTextWin, selfTextLoss, selfTextDraw;
var all = 0, win = 0, loss = 0, draw = 0;
var checkList = [
[0, 1, -1],
[-1, 0, 1],
[1, -1, 0]
];
function main() {
backLayer = new LSprite();
addChild(backLayer);
loadingLayer = new LoadingSample3();
backLayer.addChild(loadingLayer);
LLoadManage.load(
imgData,
function (progress) {
loadingLayer.setProgress(progress)
},
function (result) {
imglist = result;
backLayer.removeChild(loadingLayer)
loadingLayer = null;
initGame();
}
)
}
function initGame() {
showList.push(new LBitmapData(imglist["shitou"]));
showList.push(new LBitmapData(imglist["jiandao"]));
showList.push(new LBitmapData(imglist["bu"]));
//添加游戏界面背景
backLayer.graphics.drawRect(10, "#008800", [0, 0, LGlobal.width, LGlobal.height], 1, "#000");
//显示游戏标题
var titleBitmap = new LBitmap(new LBitmapData(imglist["title"]));
titleBitmap.x = (LGlobal.width - titleBitmap.width) / 2;
titleBitmap.y = 10;
backLayer.addChild(titleBitmap);
//玩家方出拳图片
selfBitmap = new LBitmap(showList[0]);
selfBitmap.x = 400 - selfBitmap.width - 50;
selfBitmap.y = 300;
backLayer.addChild(selfBitmap);
//电脑方出拳图片
enemyBitmap = new LBitmap(showList[0]);
enemyBitmap.x = 400 - enemyBitmap.width + 50;
enemyBitmap.y = 300;
backLayer.addChild(enemyBitmap);
//玩家，电脑名称设定
var nameText;
nameText = new LTextField();
nameText.text = "玩家";
nameText.weight = "bolder";
nameText.color = "#fff";
nameText.size = 24;
nameText.x = selfBitmap.x + (selfBitmap.width - nameText.getWidth()) / 2;
nameText.y = selfBitmap.y - selfBitmap.height - 50;
backLayer.addChild(nameText);
nameText = new LTextField();
nameText.text = "电脑";
nameText.weight = "bolder";
nameText.color = "#fff";
nameText.size = 24;
nameText.x = enemyBitmap.x + (enemyBitmap.width - nameText.getWidth()) / 2;
nameText.y = enemyBitmap.y - enemyBitmap.height - 50;
backLayer.addChild(nameText);
initResultLayer();//结果层初始化
initClickLayer();//操作层初始化
}
function initResultLayer() {
resultLayer = new LSprite();
resultLayer.graphics.drawRect(4, "#ff8800", [0, 0, 150, 110], 1, "#fff");
resultLayer.x = 10;
resultLayer.y = 100;
backLayer.addChild(resultLayer);
drawResultText("selfTextALl", "猜拳次数：0", 10, 20);
drawResultText("selfTextWin", "获胜次数：0", 10, 40);
drawResultText("selfTextLoss", "失败次数：0", 10, 60);
drawResultText("selfTextDraw", "平局次数：0", 10, 80);
}
function drawResultText(name, text, x, y) {
window[name] = new LTextField();
window[name]["text"] = text;
window[name]["weight"] = "bolder";
window[name]["color"] = "red";
window[name]["x"] = x;
window[name]["y"] = y;
resultLayer.addChild(window[name]);
}
function initClickLayer() {
clickLayer = new LSprite();
clickLayer.graphics.drawRect(4, "#ff8800", [0, 0, 300, 110], 1, "#fff");
clickLayer.x = 250;
clickLayer.y = 380;
backLayer.addChild(clickLayer);
var mesText = new LTextField();
mesText.text = "请出拳：";
mesText.weight = "bolder";
mesText.x = 10;
mesText.y = 10;
clickLayer.addChild(mesText);
var shitou = getButton("shitou");
shitou.x = 30;
shitou.y = 35;
clickLayer.addChild(shitou);
var jiandao = getButton("jiandao");
jiandao.x = 115;
jiandao.y = 35;
clickLayer.addChild(jiandao);
var bu = getButton("bu");
bu.x = 200;
bu.y = 35;
clickLayer.addChild(bu);
shitou.addEventListener(LMouseEvent.MOUSE_UP, onclick);
jiandao.addEventListener(LMouseEvent.MOUSE_UP, onclick);
bu.addEventListener(LMouseEvent.MOUSE_UP, onclick);
}
function getButton(value) {
var btnUp = new LBitmap(new LBitmapData(imglist[value]));
var btnOver = new LBitmap(new LBitmapData(imglist[value]));
btnOver.x = 2;
btnOver.y = 2;
var btn = new LButton(btnUp, btnOver);
btn.name = value;
return btn;
}
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;
}
enemyValue = Math.floor(Math.random() * 3);
selfBitmap.bitmapData = showList[selfValue];
enemyBitmap.bitmapData = showList[enemyValue];
var result = checkList[selfValue][enemyValue];
if (result == 1) {
win += 1;
} else if (result == 0) {
draw += 1;
} else if (result == -1) {
loss += 1;
}
all += 1;
selfTextALl.text = "猜拳次数：" + all;
selfTextWin.text = "胜利次数：" + win;
selfTextLoss.text = "失败次数：" + loss;
selfTextDraw.text = "平局次数：" + draw;
}
</script>
</html>
类似资料：