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

最新推荐文章于 2025-11-05 09:44:18 发布

原创最新推荐文章于 2025-11-05 09:44:18 发布 · 1.8k 阅读

5 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

71 篇文章

订阅专栏

本文介绍了一个简单的猜拳游戏开发过程，使用JavaScript实现。主要内容包括游戏界面设计、图像加载、玩家交互、结果判断等关键步骤。通过实例展示了如何运用HTML与JavaScript进行基本的游戏开发。

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