HTML5 canvas遊戲開發實戰 5 : 石頭剪刀布

CopperDong發表於2018-02-07
HTMLCanvas遊戲開發

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);
}

相關文章