[color=ize:18px]一，筹办工做
本次
游戏开发需求用到lufylegend.js开源游戏引擎，版本我用的是1.5.2（如今最新的版本是1.6.0）。
引擎下载的位置：http://lufylegend.谷歌code.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（游戏引擎）
做完那些后就能够开端游戏开发了。[color=ize:18px]两，建造过程
因为本次游戏开发较为简单，因而，我简单说一下过程。起首，正在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);
}
更多内容请查看http://www.shengshiyouxi.com/
那冶�漾码很好理解，起首我掏出鼠标位置，然后 将它除以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;
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;
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;
gameoverText.size = 35;
gameoverText.x = (LGlobal.width - gameoverText.getWidth())*0.5;
gameoverText.y = 120;
gameoverLayer.addChild(gameoverText);
}else if(i==1){
gameoverText.text = gameoverTextContent;
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();
}三，下载和演示位置