[HTML5游戏开发]简单的《找没有同汉字版〗爆去考考您狄综力吧
[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 | 坐标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();
}三，下载和演示位置
转载于:https://www.cnblogs.com/dyllove98/p/3177679.html
[HTML5游戏开发]简单的《找没有同汉字版〗爆去考考您狄综力吧相关推荐
- html5游戏开发-简单老虎机
本游戏使用的是html5的canvas,运行游戏需要浏览器支持html5. 使用开源引擎:lufylegend.js, lufylegend.js引擎包内包含这个demo,请直接下载lufylegen ...
- HTML5游戏开发系列教程5(译)
原文地址:http://www.script-tutorials.com/html5-game-development-lesson-5/ 最终我决定准备下一篇游戏开发系列的文章,我们将继续使用can ...
- html5游戏开发-零基础开发RPG游戏-开源讲座(四)
了解上三篇的内容请点击: html5[color=rgb(68, 68, 68) !important]游戏开发-零基础开发RPG游戏-开源讲座(一) http://www.html5cn.org/a ...
- Html5游戏开发-145行代码完成一个RPG小Demo
lufy前辈写过<[代码艺术]17行代码的贪吃蛇小游戏>一文,忽悠了不少求知的兄弟进去阅读,阅读量当然是相当的大.今天我不仿也搞一个这样的教程,目地不在于忽悠人,而在于帮助他人. 先看de ...
- html5游戏开发-零基础开发《圣诞老人送礼物》小游戏
开言: 以前lufy前辈写过叫"html5游戏开发-零基础开发RPG游戏"的系列文章,在那里面我学习了他的引擎以及了解了游戏脚本.自从看了那几篇文章,我便对游戏开发有了基本的认识. ...
- html5游戏开发--动静结合(二)-用地图块拼成大地图 初探lufylegend
一.前言 本次教程将向大家讲解如何用html5将小地图块拼成大地图,以及如何用现有的高级html5游戏开发库件lufylegend.js开发游戏. 首先让我们来了解了解如何用html5实现动画,毕竟& ...
- HTML5 游戏开发快速提升
小册介绍 HTML5 是构建 Web 内容的一种语言描述方式,是最新的 HTML 标准,是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一.HTML5 是跨平台的,被设计为在不同类型 ...
- HTML5游戏开发进阶指南（亚马逊5星畅销书，教你用HTML5和JavaScript构建游戏！）
HTML5游戏开发进阶指南(亚马逊5星畅销书,教你用HTML5和JavaScript构建游戏!) [印]香卡(Shankar,A.R.) 著 谢光磊 译 ISBN 978-7-121-21226-0 ...
- 七巧板平台html5游戏开发之初识物理引擎
七巧板平台html5游戏开发之初识物理引擎 七巧板平台是用于Web App.中轻度HTML5游戏及富媒体类应用开发,集开发.运营于一体的平台.它基于HTML5技术开发,具有进入门槛极低.开发极简单.跨 ...
最新文章
- 出现link错误，说找不到IPHlpApi.Lib（VC6.0）
- 双数组Trie树(DoubleArrayTrie)Java实现
- 利用ASP控制WEB打印代码方法集合
- 社区电商平台小区乐获GGV领投超1亿美元融资
- 在linux或者windows上直观查看linux下生成的自签名证书
- HDU-1016 Prime Ring Problem DFS
- C++基础知识点整理
- python同时满足两个条件_python算法-快速寻找满足条件的两个数
- Android studio Gradle icon error, Manifest Merger
- linux系统自动执行任务（转）
- 画五角星中间没有填充_冷军画两个白色五角星，卖出230万，专家大呼：这不是画...
- 使用 IBM Data Studio 管理数据库最佳实践
- UG NX10.0软件安装教程
- 51单片机学习笔记——AD转换
- 拒绝从入门到入土：初识C语言
- 2017年软考程序员下午题第二题
- 【Arduino实验13 超声波测距】
- win10开启自带的手机投屏功能方式
- 官方消息：即将开始退钱
- vscode的下载与安装教程