您的位置：首页 > Web前端 > HTML5

HTML5 canvas游戏开发实战 5 : 石头剪刀布

2018-02-07 11:23 736 查看

5.1 游戏分析

游戏画面

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="./js/lufylegend-1.7.6.min.js"></script>
<script type="text/javascript" src="./js/Main.js"></script>
</head>
<body>
<div id="mylegend">loading...</div>
</body>
</html>

5.2 必要的JavaScript知识

随机数：Math.random()生成0到1的小数，如果需要随机生成一个5到10之间的整数，

Math.floor(5 + 5*Math.random());

条件分支：if ... else if ... else ... 和switch

5.3 分层实现

整个游戏界面作为一个层，然后将选择出拳部分和结果显示部分分离成为另外两个层。

5.4 各个层的基本功能

基本画面显示：利用静态类LLoadManage的load函数来一次性读取多张图片。

LLoadManage.load($list, $onupdate, $oncomplete);

$list : 要读取的图片数组
$onupdate : 每读取一张图片后调用的函数
$oncomplete : 读完所有图片后调用的函数

5.5 出拳

initClickLayer()

5.6 结果判定

init(50, "mylegend", 800, 400, main);
var backLayer;
var resultLayer;
var clickLayer;
var imglist = {};
var imgData = new Array(
{name:"title",path:"./images/title.png"},
{name:"shitou",path:"./images/shitou.png"},
{name:"jiandao",path:"./images/jiandao.png"},
{name:"bu",path:"./images/bu.png"},
);
var showList = new Array();
var nameText, playerNameText;
var selfBitmap,
enemyBitmap,
selfTextAll,
selfTextWin,
selfTextLoss,
selfTextDraw,
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);
console.log(progress);
},
function(result) {
imglist = result;
backLayer.removeChild(loadingLayer);
loadingLayer = null;
gameInit();
}
);
}
function gameInit() {
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.heigth], true, '#000000');
//显示游戏标题
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 = 130;
backLayer.addChild(selfBitmap);
//电脑方出拳图片
enemyBitmap = new LBitmap(showList[0]);
enemyBitmap.x = 400 + 50;
enemyBitmap.y = 130;
backLayer.addChild(enemyBitmap);
//玩家、电脑名称设定
playerNameText = new LTextField();
playerNameText.text = "玩家";
playerNameText.weight = "bolder";
playerNameText.color = "#ffffff";
playerNameText.size = 24;
playerNameText.x = selfBitmap.x + (selfBitmap.width - playerNameText.getWidth())/2;
playerNameText.y = 95;
console.log(playerNameText);
backLayer.addChild(playerNameText);
console.log(backLayer);
nameText = new LTextField();
nameText.text = "电脑";
nameText.weight = "bolder";
nameText.color = "#ffffff";
nameText.size = 24;
nameText.x = enemyBitmap.x + (enemyBitmap.width - nameText.getWidth())/2;
nameText.y = 95;
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,300,110],true,'#ffffff');

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

var btnShitou = getButton("shitou");
btnShitou.x = 30;
btnShitou.y = 35;
clickLayer.addChild(btnShitou);
btnShitou.addEventListener(LMouseEvent.MOUSE_UP,onclick)
var btnJiandao = getButton("jiandao");
btnJiandao.x = 115;
btnJiandao.y = 35;
clickLayer.addChild(btnJiandao);
btnJiandao.addEventListener(LMouseEvent.MOUSE_UP,onclick)

var btnBu = getButton("bu");
btnBu.x = 200;
btnBu.y = 35;
clickLayer.addChild(btnBu);
btnBu.addEventListener(LMouseEvent.MOUSE_UP,onclick)

clickLayer.x = 250;
clickLayer.y = 275;
backLayer.addChild(clickLayer);
}
//创建按钮
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;
}
//出拳
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) {
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);
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航