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

来源：互联网发布：中兴手机在线升级软件编辑：程序博客网时间：2024/04/28 07:53

[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坐标xy坐标ytext做为文本字段中当前文本的字符串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();
}三，下载和演示位置