當前位置：首頁 > 人文社科 > 生活经验 >内容正文

生活经验

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

發布時間：2023/11/27 生活经验 35 豆豆

生活随笔收集整理的這篇文章主要介紹了【HTML5游戏开发】简单的《找不同汉字版》，来考考你的眼力吧小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

一，準備工作

本次游戲開發需要用到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://files.cnblogs.com/yorhom/Find_Word.rar

演示截圖：

轉載于:https://www.cnblogs.com/jiangxiaobo/p/6004587.html

總結

以上是生活随笔為你收集整理的【HTML5游戏开发】简单的《找不同汉字版》，来考考你的眼力吧的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。