【HTML5游戏开发】简单的《找不同汉字版》,来考考你的眼力吧

原创 2013年03月01日 22:30:39

一,准备工作

本次游戏开发需要用到lufylegend.js开源游戏引擎,版本我用的是1.5.2(现在最新的版本是1.6.0)。

引擎下载的位置:http://lufylegend.googlecode.com/files/lufylegend-1.5.2.rar

引擎API文档:http://lufylegend.com/lufylegend/api

首先为了开发方便,我们得先建立一个叫Find_Word的文件夹,然后在里面添加项目,如下:

Find_Word文件夹

|---index.html

|---js文件夹

|---main.js

|---lufylegend-1.5.2.min.js(游戏引擎)

|---lufylegend-1.5.2.js(游戏引擎)

做完这些后就可以开始游戏开发了。

二,制作过程

由于本次游戏开发较为简单,因此,我简单说一下过程。首先,在index.html中加入html代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html5 game</title>
<script type="text/javascript" src="./js/lufylegend-1.5.2.min.js"></script>
<script type="text/javascript" src="./js/main.js"></script> 
</head>
<body>
<div id="mylegend">loading......</div>
</body>
</html>
也许有些朋友会很纳闷,因为他们没有找到canvas标签。其实在lufylegend中,当你调用init()函数时,会自动加入canvas标签,因此你只用写下一个div标签和这个div标签的id就能在html中自动加入canvas。

在main.js调用init()的写法如下:

init(50,"mylegend",525,500,main);

init函数第一个参数是页面刷新频率,第二个是canvas加到的div的id,第三个和第四个是页面尺寸,最后一个是页面初始化完成后调用的函数。

接着,我们定义一连串的变量:

var backLayer,tileLayer,ctrlLayer,overLayer,gameoverLayer;
var tileText,overText,gameoverText;
var col,row;
var time = 0;
var selectLayer;
var checkpoints = [
	["籍","藉"],
	["我","找"],
	["春","舂"],
	["龙","尤"],
	["曰","日"]
];
var checkpointNo = 0;
var i0;
var j0;
var i,j;
var partX,partY;
var overTextContent = ["恭喜您,您过关了","进入下一关","重新开始"];
var gameoverTextContent = ["对不起,您失败了","重开关卡"];
var nowLine;
var setTimeLine;
其中我只介绍几个重要的变量,其他的以后会提到。

var backLayer,tileLayer,ctrlLayer,overLayer,gameoverLayer;
这些代码是在定义层变量,方便以后游戏开发。

var tileText,overText,gameoverText;
这里是在定义游戏中可能出现的字层变量。

var checkpoints = [
	["籍","藉"],
	["我","找"],
	["春","舂"],
	["龙","尤"],
	["曰","日"]
];
这些是定义关卡,在这个二维数组中,每一个数组就是一关,每一个数组中的文字就是关卡中要出现的字。可以看出,这个游戏共5关

接下来就是游戏的函数部分。首先是main函数:

function main(){
	i0 = Math.floor(Math.random()*10);
	j0 = Math.floor(Math.random()*10);

	initLayer();
	initCtrl();
	initTile();
}
在这里面,我首先给i0和j0赋值,让他们成为任何一个0-10之间的随即数,以便确定哪里是不同的那个字。然后我还在这个程序中初始化了层和控制,以及调用了显示文字的函数initTile(),让我们分别来看看initLayer和initTile中的代码:

initLayer中:

function initLayer(){
	backLayer = new LSprite();
	addChild(backLayer);
	
	tileLayer = new LSprite();
	backLayer.addChild(tileLayer);

	ctrlLayer = new LSprite();
	backLayer.addChild(ctrlLayer);
}
我用lufylegend中LSprite类的方法将层变量定义为了一个容器,以后要显示什么东西,就可以往这些容器中放。其中addChild是把一个东西放进容器的函数,当然放进去的东西也可以是个容器。由此,游戏就有了层次感。如果直接写addChild(xxx)就是把xxx放在游戏最底层。

initTile中:

function initTile(){
	for(i=0;i<row;i++){
		for(j=0;j<col;j++){
			tile();
		}
	}
}
这个函数是在进行平铺工作,做法有点像贴瓷砖。关键在于tile(),页面上的东西全都是由它贴上去的。接下来让我们揭示它的真面目:

function tile(){
	tileLayer.graphics.drawRect(3,"dimgray",[j*50,i*50,50,50],true,"lightgray");

	var w = checkpoints[checkpointNo][(i==i0 && j==j0) ? 0 : 1];
	tileText = new LTextField();
	tileText.weight = "bold";
	tileText.text = w;
	tileText.size = 25;
  	tileText.color = "dimgray";
	tileText.font = "黑体";
	tileText.x = j*50+7;
	tileText.y = i*50+7;
	tileLayer.addChild(tileText);
}

首先我们先在页面上把格子平铺好,因此用了lufylegend中LGraphics类中的drawRect,并利用它在屏幕上画了100个50*50正方形。

drawRect的几个参数分别是:

第一个:边缘线粗
第二个:边缘线颜色
第三个:[起始坐标x,起始坐标y,矩形宽width,矩形高height]
第四个:是否实心图形
第五个:实心颜色

画好格子后,我们开始给每个格子上写文字。在lufylegend中输出文字很简单,只要定义一个LTextField类并给它的属性填值然后将它addChild就可以完成。

它的属性有:

type类型
x坐标x
y坐标y
text作为文本字段中当前文本的字符串
font文字的格式
size文字大小
color文字颜色
visible是否可见
weight文字粗细
stroke当为true时,可以设置线宽
lineWidth文字线宽
textAlign文字左右对齐方式
textBaseline文字上下对齐方式

举一个简单的例子方便大家理解:

var backLayer,title; 
function main(){ 
    backLayer = new LSprite(); 
    addChild(backLayer); 
    title = new LTextField(); 
    title.size = 30; 
    title.color = "#ff0000"; 
    title.text = "文字显示测试"; 
    backLayer.addChild(title); 
}
当大家了解完了LTextField类,那理解我的代码就简单了,首先我设定了文字的内容:

var w = checkpoints[checkpointNo][(i==i0 && j==j0) ? 0 : 1];

这行代码的意思是当画一个方块时,判断画的那一块是第几行第几个,也就是i和j,然后看看是不是和j0和i0相等,如果相等,说明那一块就是与其他不同的那一块。然后到关卡数组中取出字。可以从数组checkpoints看出,当遇到的是与其他不同的那一块时,就取下标为0的那一个字,否则就取下标为1的那一个字。所以,当是第一关时,我们要找的字就是“籍”,而其余的字是“藉"。

接下来就处理字的位置,因为如果不处理,所有字都会堆在一起。处理位置的几行代码如下:

tileText.x = j*50+7;
tileText.y = i*50+7;

接着我们来看看游戏时间的实现:

function addTimeLine(){
	overLayer.graphics.drawRect(5,"dimgray",[500,0,20,500],true,"lightgray");
	overLayer.graphics.drawLine(15,"lightgray",[510,3,510,497]);
	overLayer.graphics.drawLine(15,"red",[510,3,510,497]);
	setTimeLine = setInterval(function(){drawTimeLine();},100);
}
function drawTimeLine(){
	nowLine = 3+((time/5)*495)/10;
	overLayer.graphics.drawLine(15,"lightgray",[510,3,510,497]);
	overLayer.graphics.drawLine(15,"red",[510,nowLine,510,497]);
	time++;
	if(time>50){
		clearInterval(setTimeLine);
		gameOver();
	}
}
我还是用graphics来实现的,只不过用的是里面的drawLine,参数是:

第一个:线粗
第二个:线颜色
第三个:[起始坐标x,起始坐标y,结束坐标x,结束坐标y]

实现减短时间条时,我先画一个颜色为lightgray的线使时间条清空一遍,再让画笔每100毫秒就移至3+((time/5)*495)/10,然后让这个坐标与510的位置连线。这样反复清屏加重绘,便实现了减短时间条。

下一步,我们要实现鼠标事件,先看代码:

function onDown(){
	var mouseX,mouseY;
	mouseX = event.offsetX;
	mouseY = event.offsetY;

	partX = Math.floor((mouseX)/50);
	partY = Math.floor((mouseY)/50);
	isTure(partX,partY);

	alert(partX+","+partY);
}

这一段代码很好理解,首先我取出鼠标位置,然后 将它除以50并取整,得出点的是哪一格,然后将点的那一格作为参数送进isTure,在里面我判断了参数值是否与i0和j0符合,如果符合,就调用处理胜利的函数。

isTure的内容如下:

function isTure(x,y){
	if(x==j0 && y==i0){
		clearInterval(setTimeLine);
		overLayer.graphics.drawRect(5,"dimgray",[(LGlobal.width - 420)*0.5,80,420,250],true,"lightgray");
		selectLayer.graphics.drawRect(5,"dimgray",[(LGlobal.width - 250)*0.5,230,250,50],true,"darkgray");

		for(var i=0;i<overTextContent.length;i++){
			overText = new LTextField();
			overText.weight = "bold";
			overText.color = "dimgray";
			overText.font = "黑体";
			if(i==0){
				overText.text = overTextContent[i];
				overText.size = 35;
				overText.x = (LGlobal.width - overText.getWidth())*0.5;
				overText.y = 120;
				overLayer.addChild(overText);
			}else if(i==1){
				if(checkpointNo == checkpoints.length-1){
					overText.text = overTextContent[i+1];
					overText.size = 20;
					overText.x = (LGlobal.width - overText.getWidth())*0.5;
					overText.y = 240; 
					selectLayer.addChild(overText);
					checkpointNo = 0;
				}else{
					overText.text = overTextContent[i];
					overText.size = 20;
					overText.x = (LGlobal.width - overText.getWidth())*0.5;
					overText.y = 240;
					selectLayer.addChild(overText);
				}
			}
		}
	}
	tileLayer.removeEventListener(LMouseEvent.MOUSE_DOWN,onDown);
}

最后还有一些代码作为赢或输后的处理,很简单,我一笔带过:

function gameOver(){
	overLayer.graphics.drawRect(5,"dimgray",[(LGlobal.width - 420)*0.5,80,420,250],true,"lightgray");
	gameoverLayer.graphics.drawRect(5,"dimgray",[(LGlobal.width - 250)*0.5,230,250,50],true,"darkgray");

	for(var i=0;i<gameoverTextContent.length;i++){
		gameoverText = new LTextField();
		gameoverText.weight = "bold";
		gameoverText.color = "dimgray";
		gameoverText.font = "黑体";
		if(i==0){
			gameoverText.text = gameoverTextContent[i];
			gameoverText.size = 35;
			gameoverText.x = (LGlobal.width - gameoverText.getWidth())*0.5;
			gameoverText.y = 120;
			gameoverLayer.addChild(gameoverText);
		}else if(i==1){
			gameoverText.text = gameoverTextContent[i];
			gameoverText.size = 20;
			gameoverText.x = (LGlobal.width - gameoverText.getWidth())*0.5;
			gameoverText.y = 240;
			gameoverLayer.addChild(gameoverText);
		}
	}
	tileLayer.removeEventListener(LMouseEvent.MOUSE_DOWN,onDown);
}
function gameReStart(){
	i0 = Math.floor(Math.random()*10);
	j0 = Math.floor(Math.random()*10);

	time = 0;

	tileLayer.removeAllChild();
	overLayer.removeAllChild();
	selectLayer.removeAllChild();
	backLayer.removeChild(selectLayer);
	backLayer.removeChild(overLayer);
	if(checkpointNo != checkpoints.length-1){
		checkpointNo++;
	}
	initTile();
	addEvent();
	addTimeLine();
}
function reTry(){
	i0 = Math.floor(Math.random()*10);
	j0 = Math.floor(Math.random()*10);

	time = 0;

	tileLayer.removeAllChild();
	overLayer.removeAllChild();
	gameoverLayer.removeAllChild();
	selectLayer.removeAllChild();
	backLayer.removeChild(selectLayer);
	backLayer.removeChild(overLayer);
	backLayer.removeChild(gameoverLayer);

	initTile();
	addEvent();
	addTimeLine();
}

三,下载和演示位置

演示位置:http://www.lufylegend.com/lufylegend_developers/yorhom_Find_Word/index.html

下载位置:http://www.demodashi.com/demo/10494.html

演示截图:




希望大家多支持,谢谢捧场。

---------------------2013年3月30日更新---------------------

1,加入滤镜效果

2,修改了进入游戏后鼠标事件失灵的bug(感谢网友:qq407653296)

游戏截图:



----------------------------------------------------------------

欢迎大家转载我的文章。

转载请注明:转自Yorhom's Game Box

欢迎继续关注我的博客

版权声明: 举报

相关文章推荐

HTML5各引擎显示效率比较

现在越来越多的人开始尝试使用HTML5开发,HTML5的引擎也逐渐增多,开发者到底应该选择一款什么样的引擎呢?这一次我来对比一下几个我个人认为还不错的引擎的效率。 本次参加对比的引擎: 1. crea...

如何制作一款HTML5 RPG游戏引擎——第一篇,地图类的实现

一,话说天下大事 前不久看到lufy的博客上,有一位朋友想要一个RPG游戏引擎,出于兴趣准备动手做一做。由于我研究lufylegend有一段时间了,对它有一定的依赖性,因此就准备将这个引擎基于luf...

我是如何成为一名python大咖的?

人生苦短,都说必须python,那么我分享下我是如何从小白成为Python资深开发者的吧。2014年我大学刚毕业..

html5游戏开发--"动静"结合(二)-用地图块拼成大地图 & 初探lufylegend

一、前言 本次教程将向大家讲解如何用html5将小地图块拼成大地图,以及如何用现有的高级html5游戏开发库件lufylegend.js开发游戏。 首先让我们来了解了解如何用html5实现动画,毕竟“...

速度挑战 - 2小时完成HTML5拼图小游戏

初学lufylegend.js之日,我用lufylegend.js开发了第一个HTML5小游戏——拼图游戏,还写了篇博文来炫耀一下:HTML5小游戏《智力大拼图》发布,挑战你的思维风暴。不过当时初学游...

html5游戏开发-零基础开发《圣诞老人送礼物》小游戏

开言: 以前lufy前辈写过叫“ html5游戏开发-零基础开发RPG游戏”的系列文章,在那里面我学习了他的引擎以及了解了游戏脚本。自从看了那几篇文章,我便对游戏开发有了基本的认识。今天我也以零基础...

[html5游戏开发]数独游戏-完整算法-开源讲座

开言:本次讲一下数独游戏的开发,数独游戏是一个填数字的游戏,在一个9x9的方格内,这个9x9的大格子又可以分为9个3x3的小的九宫格,在这些格子内填写上1至9的数字,使得每一行,每一列,并且每个小的九...

【推荐】一个强大的html5游戏引擎 pixi

pixi官网前言当初不用phaser而改用lufylegend是因为phaser在微信上面有问题。 现在竟然发现另一个强大的游戏引擎pixi,无论是简单的2d精灵动画还是骨骼动画应有尽有。。 没办...

HTML5物理游戏开发 - 越野山地自行车(三)粉碎自行车

用过锤子的人都知道(如果你没用过,而且也不知道怎么用,建议你去问问雷神索尔),要砸碎一个自行车该怎么砸呢?如果你不会,我教你三招吧: 法一:使劲砸;这种方法适用于你想换把锤子 法二:到阿斯嘉找雷神大哥...

25 个超棒的 HTML5 & JavaScript 游戏引擎开发库

作者:ejinxian 就像在汽车中,引擎完成主要的工作,使汽车看起来不可思议。游戏引擎同理,游戏开发者完成细节的工作,使游戏看起来真实、吸引人眼球。游戏引擎负责其余的事情。早期,游戏开发者通常从草...
  • dj0379
  • dj0379
  • 2016-07-19 23:16
  • 9237

HTML5超帅动画制作-LTweenLite的妙用

lufylegend.js是一个开源的HTML5游戏引擎,在游戏中往往会有各种的动画,这些动画有些是flash文件,有些是视频文件,本次就来利用lufylegend制作一个帅气的游戏动画。
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)