當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

[HTML5游戏开发]简单的《找没有同汉字版〗爆去考考您狄综力吧

發(fā)布時間：2025/3/21 HTML 17 豆豆

生活随笔收集整理的這篇文章主要介紹了 [HTML5游戏开发]简单的《找没有同汉字版〗爆去考考您狄综力吧小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

[color=ize:18px]一，籌辦工做
??本次游戲開發(fā)需求用到lufylegend.js開源游戲引擎，版本我用的是1.5.2（如今最新的版本是1.6.0）。
?? 引擎下載的位置：http://lufylegend.谷歌code.com/files/lufylegend-1.5.2.rar
?? 引擎API文檔：http://lufylegend.com/lufylegend/api
??起首為了開發(fā)便利，我們得先成立一個叫Find_Word的文件夾，然后正在內里加減項目，以下：
?? Find_Word文件夾
??|---index.html
??
??|---js文件夾
??
??|---main.js
??
??|---lufylegend-1.5.2.min.js（游戲引擎）
??
??|---lufylegend-1.5.2.js（游戲引擎）
??
??做完那些后就能夠開端游戲開發(fā)了。[color=ize:18px]兩，建造過程
??因為本次游戲開發(fā)較為簡單，因而，我簡單說一下過程。起首，正在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標簽戰(zhàn)那個div標簽的id就可以正在html中主動參加canvas。
??
??正在main.js挪用init()的寫法以下：
??init(50,"mylegend",525,500,main);
init函數第一個參數是頁里刷新頻次，第兩個是canvas減到的div的id，第三個戰(zhàn)第四個是頁里尺寸，最初一個是頁里初初化完成后挪用的函數。
??
??接著，我們界說一連串的變量：
??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;那些代碼實鄰界說層變量，便利當前游戲開發(fā)。
??
??var tileText,overText,gameoverText;那里實鄰界說游戲中可能呈現的字層變量。
??
??var checkpoints = [
["籍","藉"],
["我","找"],
["秋","舂"],
["龍","尤"],
["曰","日"]
];那些是界說閉卡，正在那個兩維數組中，每個數組便是醫(yī)柝，每個數組中的文字便是閉卡中要呈現的字。能夠看出，那個游戲共5閉
??
??接下去便是游戲的函數部門。起首是main函數：
??function main(){
i0 = Math.floor(Math.random()*10);
j0 = Math.floor(Math.random()*10);

initLayer();
initCtrl();
initTile();
}正在那內里，我起首給i0戰(zhàn)j0賦值，讓他們成為任何一個0-10之間的隨即數，以便確定那里是沒有同的誰人字。然后我借正在那個法式中初初化了層戰(zhàn)控造，和挪用了隱示文字的函數initTile()，讓我枚糖去吭喲initLayer戰(zhàn)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戰(zhàn)j，然后吭喲是否是戰(zhàn)j0戰(zhàn)i0相等，假如相等，闡明那一塊便是取其他沒有同的那一塊。然后到閉卡數組中掏出字。能夠從數組checkpoints看出，當碰到的是取其他沒有同的那一塊時，便與下標為0的那一個字，不然便與下標為1的那一個字。以是，當是第醫(yī)柝時，我們要找的字便是⊥鞏”，而其他的琢殼“藉"。
??接下去便處理字的位置，由于假如沒有處理，一切字城市堆正在一同。處理位置的幾止代碼以下：
??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戰(zhàn)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();
}三，下載和演示位置

轉載于:https://www.cnblogs.com/dyllove98/p/3177679.html

總結

以上是生活随笔為你收集整理的[HTML5游戏开发]简单的《找没有同汉字版〗爆去考考您狄综力吧的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： FreeRTOS 中断优先级嵌套错误引发
下一篇： extjs4:代码实现comboBox选