本次遊戲開發需求用到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();
}三，下載和演示位置