首页 > 其他分享 >简单的《找不同汉字版》，来考考你的眼力吧

简单的《找不同汉字版》，来考考你的眼力吧

时间：2023-06-08 19:04:02浏览次数：41  
标签：function lufylegend 50 汉字 眼力 graphics var tileText 考考你


概述


简单的《找不同汉字版》，来考考你的眼力吧



一、准备工作


本次游戏开发需要用到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();  
}



三、文件截图、运行效果

1、文件截图：

简单的《找不同汉字版》，来考考你的眼力吧_简单的找不同汉字版


2、演示地址：

http://www.lufylegend.com/lufylegend_developers/yorhom_Find_Word/index.html


3、演示截图

双击index.html即可看到效果

简单的《找不同汉字版》，来考考你的眼力吧_html_02

简单的《找不同汉字版》，来考考你的眼力吧_Math_03

简单的《找不同汉字版》，来考考你的眼力吧_简单的找不同汉字版_04

四、其他补充

后面修改更正过bug，主要修改如下：

  1. 加入滤镜效果
  2. 修改了进入游戏后鼠标事件失灵的bug



标签：function,lufylegend,50,汉字,眼力,graphics,var,tileText,考考你
From： https://blog.51cto.com/u_7583030/6442272

相关文章

  • Java汉字转拼音工具
    maven依赖<dependency><groupId>com.belerweb</groupId><artifactId>pinyin4j</artifactId><version>2.5.0</version></dependency>工具类封装packagecomg.yang.httpstest.controller.domain;importnet.......
  • 【SQL】将查询到的值转换为其它数据（如汉字）
    方法一：--语法casewhen列名=条件then命名else命名end示例selectid,(casewhenclass=0then"语文"whenclass=1then"数学"whenclass=2then"英语"end)as学科frombase; 方法二：--语法case列名when条件then命名else命名end示......
  • SQLserver 与mysql中的varchar()类型关于存储汉字的个数；字符与字节的区别
    https://blog.csdn.net/qq_64314976/article/details/128604141https://www.cnblogs.com/chenmingjun/p/8118083.html今天遇到一个问题，mysql中的汉字，插入到sqlserver中报错，两边字段大小都是varchar(18)。汉字个数超过了9个，所以在SQLserver中报错我可以理解，因为1个汉字占用2个......
  • 30万个名字汉字起名中文取名ACCESS\EXCEL数据库
    虽然汉字#起名名字#的数据库已经有一些，比如7千多汉字起名参考大典ACCESS数据库、汉字起名中文起名宝宝起名ACCESS数据库，但是今天发现了一个数据库，他是在《7千多汉字起名参考大典》的基础上增加了30万个男孩女孩的名字实例。非常适合于比如固定了名字的第二个字，取第三个字时一查就......
  • 2万多汉字组词词组大全ACCESS\EXCEL数据库
    本数据库是由MicrosoftAccess2000创建的MDB数据库文件，您需要使用MicrosoftAccess2000或以上版本打开这个文件。可以通过到Access中全选复制，然后到Excel中粘贴立即转为XLS文件，也可以在Access中导出成其他格式文件。包含有近5千个常用字的组词，字段组词前面的10\20\30\40......
  • 常用汉字约 7000 个「详：按照清华字频顺序 6763 个」
    常用6763个汉字使用频率表汉字频度表统计资料来源于清华大学，现公布如下，仅供参考。使用字数6763字（国标字符集），范文合计总字数86405823个。说明如下：假若认识500字，则覆盖面为78.53%。其余类推，列表如下：字数覆盖面（%）50078.532021000......
  • tflearn 中文汉字识别模型试验汇总
    defget_model(width,height,classes=40):#TODO,modifymodel#Building'VGGNetwork'network=input_data(shape=[None,width,height,1])#ifRGB,224,224,3network=conv_2d(network,64,3,activation='relu')......
  • densenet tensorflow 中文汉字手写识别
    densenet中文汉字手写识别，代码如下： importtensorflowastfimportosimportrandomimportmathimporttensorflow.contrib.slimasslimimporttimeimportloggingimportnumpyasnpimportpicklefromPILimportImageimporttensorflowastf#fromtflearn.lay......
  • 【IntelliJ IDEA】UTF-8编码下\u7528\u6237转换为中文汉字，\u9489\u9489\u81EA\u
    本文目录一、背景描述二、问题原因三、解决方案一、背景描述本地开发环境，Windows10+IntelliJIDEA+Springboot项目。在开发项目中遇见设置文件编码格式为UTF-8，但是打开该文件出现类似\u9489\u9489\u81EA\u5B9A\u4E49\u673A\u5668\u4EBA这样的数据，看也看不懂，也不是平常见到的......
  • 500多条汉字常见错别字题库ACCESS\EXCEL数据库
    之前发过一个叫《汉字英雄100个最容易错误的汉字》的ACCESS数据库，严格的说这个数据库不算题库，因为没有选项；而今天的这个《汉字常见错别字题库ACCESS数据库》却是有选项的题库：这些题目出自历届高考的易错字大全。想测试下自己的语文功力吗？想提高自己的汉语水平吗？还在等什么，快来试......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99