如何实现一个HTML5 RPG游戏引擎——第四章，实现情景对话

今天我们来实现情景对话。这是一个重要的功能，沒有它，游戏将变得索然无味。所以我们不得不来完成它。

可是要知道，使用对话可不是一件简单的事，由于它内部的东西非常多，比方说人物头像，人物名称，对话内容。。。

因此我们仅仅能通过数组+JSON来将对话信息装起来，然后依据信息作出不同的显示。接下来我便要向大家展示实现方法。

先看本系列文章文件夹：

怎样制作一款HTML5 RPG游戏引擎——第一篇，地图类的实现

http://blog.csdn.net/yorhomwang/article/details/8892305

怎样制作一款HTML5 RPG游戏引擎——第二篇，烟雨+飞雪效果

http://blog.csdn.net/yorhomwang/article/details/8915020

怎样制作一款HTML5 RPG游戏引擎——第三篇，利用幕布切换场景

http://blog.csdn.net/yorhomwang/article/details/9042571

该引擎是基于lufylegend开发的，学习时请先了解lufylegend。

官方站点地址：http://lufylegend.com/lufylegend

API地址：http://lufylegend.com/lufylegend/api

1，实现后的代码

为了向大家展示封装的必要性，所以我们先看实现后的代码：

[javascript] view plain copy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>LTalk</title>
<script type="text/javascript" src="../lufylegend-1.7.6.min.js"></script>
<script type="text/javascript" src="../lufylegendrpg-1.0.0.js"></script>
<script>
init(30,"legend",480,320,main);
LRPGStage.setShortcuts(true);
LGlobal.setDebug(true);
var backLayer,loadingLayer,talkLayer;
var talk;
var talkContent;
var talkNum = 0;
var loadData = [
{name:"yorhom_face",path:"./yorhom.jpg"},
{name:"lufy_face",path:"./lufy.jpg"}
];
var imglist = [];
function main(){
//添加进度条
loadingLayer = new LoadingSample1();
addChild(loadingLayer);
//载入图片并显示运行进度
LLoadManage.load(
loadData,
function(progress){
loadingLayer.setProgress(progress);
},
gameInit
);
}
function gameInit(result){
removeChild(loadingLayer);
imglist = result;
//初始化层
backLayer = new LSprite();
addChild(backLayer);
talkLayer = new LSprite();
backLayer.addChild(talkLayer);
//添加操作button
addEvent();
//增加对话内容
talkContent = [
{name:"[Yorhom]",msg:"你好，lufy",face:imglist["yorhom_face"]},
{name:"[lufy]",msg:"你好，yorhom",face:imglist["lufy_face"]},
{name:"[Yorhom]",msg:"lufylegend最新版本号是哪个版本号啊？",face:imglist["yorhom_face"]},
{name:"[lufy]",msg:"……你不知道自己看吗？",face:imglist["lufy_face"]},
{name:"[Yorhom]",msg:"……说得也是",face:imglist["yorhom_face"]},
];
//添加对话
talkLayer.graphics.drawRect(5,"black",[20,15,400,130],true,"black");
talkLayer.alpha = 0.8;
talk = new LTalk(talkContent);
talkLayer.addChild(talk);
talkLayer.addEventListener(LMouseEvent.MOUSE_DOWN,say);
//设置样式
talk.setNameStyle({x:160,y:40,color:"white",size:12});
talk.setMsgStyle({x:160,y:70,color:"white",size:10});
talk.setFaceStyle({x:30,y:30});
talk.textWidth = 260;
}
function addEvent(){
LEvent.addEventListener(LGlobal.window,LKeyboardEvent.KEY_UP,say);
}
function say(){
if(talkNum < talkContent.length){
//输出对话
talk.wind(talkNum,function(){talkNum++;});
}
}
</script>
</head>
<body>
<div id="legend"></div>
</body>
</html>

这78行代码就能够实现进行5次对话的效果，先发两张截图，例如以下：

如何实现一个HTML5 RPG游戏引擎——第四章，实现情景对话

由此可见，本次封装还是非常有作用的。

可是怎样实现呢？请看接下来的解说。

2，LTalk类

LTalk是一个对话类，构造器例如以下：

[javascript] view plain copy

function LTalk(content){
var s = this;
base(s,LSprite,[]);
if(!content){
s.content = [];
}else{
s.content = content;
}
s.x = 0;
s.y = 0;
s.textWidth = LStage.width;
s.talkIndex = 0;
s.faceX = 0;
s.faceY = 0;
s.nameX = 0;
s.nameY = 0;
s.nameColor = "black";
s.nameFont = "宋体";
s.nameSize = "15";
s.msgX = 0;
s.msgY = 0;
s.msgColor = "black";
s.msgFont = "宋体";
s.msgSize = "15";
}

当中，textWidth属性是为了设置文字区宽度的，设置后，假设文字过多而超出这个区域就会自己主动换行。talkIndex指对话编号。faceX，faceY指人物头像位置。nameX，nameY指人物名称的位置；nameColor，nameFont，nameSize分别用来设置名称颜色，字体，尺寸。msgX，msgY，msgColor，msgFont，msgSize同分别代表对话内容的x坐标，y坐标，颜色，字体，尺寸。

设定好刚才的那些属性后，就能够自己定义对话样式了。

这个类构造时要传个參数，这个參数是对话内容。是一个数组套JSON的格式，例如以下：

[plain] view plain copy

[
{name:"名称",msg:"内容",face:头像图片},
{name:"名称",msg:"内容",face:头像图片},
{name:"名称",msg:"内容",face:头像图片},
{name:"名称",msg:"内容",face:头像图片},
{name:"名称",msg:"内容",face:头像图片},
];

每往这个列表里加一条，就会多一段对话。

3，wind方法

接下来看看wind方法：

[javascript] view plain copy

LTalk.prototype.wind = function(num,completeFunc){
var s = this;
if(!num || num == null)num = 0;
if(!completeFunc)completeFunc = null;
s.talkIndex = num;
s.removeAllChild();
if(s.talkIndex < s.content.length){
var talkObject = s.content[s.talkIndex];
var faceBitmapdata = new LBitmapData(talkObject.face);
var faceBitmap = new LBitmap(faceBitmapdata);
faceBitmap.x = s.faceX;
faceBitmap.y = s.faceY;
s.addChild(faceBitmap);
var name = new LTextField();
name.x = s.nameX;
name.y = s.nameY;
name.size = s.nameSize;
name.color = s.nameColor;
name.font = s.nameFont;
name.text = talkObject.name;
name.width = s.textWidth;
name.setWordWrap(true,name.getHeight()+5);
s.addChild(name);
var msg = new LTextField();
msg.x = s.msgX;
msg.y = s.msgY;
msg.size = s.msgSize;
msg.color = s.msgColor;
msg.font = s.msgFont;
msg.text = talkObject.msg;
msg.width = s.textWidth;
msg.setWordWrap(true,msg.getHeight()+7);
msg.wind(completeFunc);
s.addChild(msg);
}else{
trace("Error: Param exceeds the size of the content!");
}
}

这个方案有两个參数，第一个是播放序号，第二个參数是输出完成后调用的函数。

首先我们推断一下參数num是不是没定义，假设是就自己主动设0，然后再推断第二个參数是否定义，假设沒有，就设为null。这样做能够确保程序运行无误。接着，我们把控制播放序号的属性talkIndex设为num，然后清空一次，以便不和上次输出的重叠在一起。接着推断talkIndex有沒有超出最大值，沒有的话就运行输出命令。代码例如以下：

[javascript] view plain copy

var talkObject = s.content[s.talkIndex];
var faceBitmapdata = new LBitmapData(talkObject.face);
var faceBitmap = new LBitmap(faceBitmapdata);
faceBitmap.x = s.faceX;
faceBitmap.y = s.faceY;
s.addChild(faceBitmap);
var name = new LTextField();
name.x = s.nameX;
name.y = s.nameY;
name.size = s.nameSize;
name.color = s.nameColor;
name.font = s.nameFont;
name.text = talkObject.name;
name.width = s.textWidth;
name.setWordWrap(true,name.getHeight()+5);
s.addChild(name);
var msg = new LTextField();
msg.x = s.msgX;
msg.y = s.msgY;
msg.size = s.msgSize;
msg.color = s.msgColor;
msg.font = s.msgFont;
msg.text = talkObject.msg;
msg.width = s.textWidth;
msg.setWordWrap(true,msg.getHeight()+7);
msg.wind(completeFunc);
s.addChild(msg);

熟悉lufylegend的朋友不难理解这些，就是将名称，内容，头像所有加到界面上。显示内容为构造器參数中相应的内容。
wind做好后，大家想让文本逐字显示时仅仅用写一行obj.wind();就可以了。

4，更改样式&手动清空对话&重设数据

刚才我们看了控制文字，图片样式的几个属性，有非常多，假设一个一个用手改就会非常麻烦，并且要写非常多行代码，因此我们加几个控制样式的方法，它们各自是：setFaceStyle，setNameStyle，setMsgStyle。运用时仅仅用传入參数就可以了。

实现方法例如以下：

[javascript] view plain copy

LTalk.prototype.setFaceStyle = function(styleData){
var s = this;
if(!styleData.x){s.faceX = 0;}else{s.faceX = styleData.x;}
if(!styleData.y){s.faceY = 0;}else{s.faceY = styleData.y;}
}
LTalk.prototype.setNameStyle = function(styleData){
var s = this;
if(!styleData.x){s.nameX = 0;}else{s.nameX = styleData.x;}
if(!styleData.y){s.nameY = 0;}else{s.nameY = styleData.y;}
if(!styleData.color){s.nameColor = "black";}else{s.nameColor = styleData.color;}
if(!styleData.font){s.nameFont = "宋体";}else{s.nameFont = styleData.font;}
if(!styleData.size){s.nameSize = "15";}else{s.nameSize = styleData.size;}
}
LTalk.prototype.setMsgStyle = function(styleData){
var s = this;
if(!styleData.x){s.msgX = 0;}else{s.msgX = styleData.x;}
if(!styleData.y){s.msgY = 0;}else{s.msgY = styleData.y;}
if(!styleData.color){s.msgColor = "black";}else{s.msgColor = styleData.color;}
if(!styleData.font){s.msgFont = "宋体";}else{s.msgFont = styleData.font;}
if(!styleData.size){s.msgSize = "15";}else{s.msgSize = styleData.size;}
}

值得注意的是，參数是一个JSON对象。格式例如以下：

[javascript] view plain copy

/*给msg和name设置样式时传的參数*/
{x:x坐标,y:y坐标,color:文字颜色,size:文字尺寸}
/*给face设置样式时传的參数*/
{x:x坐标,y:y坐标}

OK，给对话设定样式就搞定了。

再加一个手动清空对话的方法，这样一来能够方便用户手动清空对话：

[javascript] view plain copy

LTalk.prototype.clear = function(){
var s = this;
s.removeAllChild();
s.die();
}

最后加一个重设对话数据的函数：

[javascript] view plain copy

LTalk.prototype.setData = function(content){
var s = this;
s.content = content;
}

5，Debug输出

前面在设计类时，没考虑到大家debug，所以都没添加什么debug输出。这次想到了，就顺便做一下，顺便把曾经的也做了一下。今天就仅仅呈现LTalk中的Debug输出，代码例如以下：

[javascript] view plain copy

LTalk.prototype.showData = function(){
var s = this;
for(var key in s.content){
trace("----------No."+key+"----------");
trace("Name: " + s.content[key].name);
trace("Msg: " + s.content[key].msg);
trace("Face: " + s.content[key].face);
}
}

调用此方法输出例如以下：

如何实现一个HTML5 RPG游戏引擎——第四章，实现情景对话

6,源码

源码不多，大家能够拿下去測试一下：

[javascript] view plain copy

/**
*LTalk.js
*/
function LTalk(content){
var s = this;
base(s,LSprite,[]);
if(!content){
s.content = [];
}else{
s.content = content;
}
s.x = 0;
s.y = 0;
s.textWidth = LStage.width;
s.talkIndex = 0;
s.faceX = 0;
s.faceY = 0;
s.nameX = 0;
s.nameY = 0;
s.nameColor = "black";
s.nameFont = "宋体";
s.nameSize = "15";
s.msgX = 0;
s.msgY = 0;
s.msgColor = "black";
s.msgFont = "宋体";
s.msgSize = "15";
}
LTalk.prototype.setData = function(content){
var s = this;
s.content = content;
}
LTalk.prototype.showData = function(){
var s = this;
for(var key in s.content){
trace("----------No."+key+"----------");
trace("Name: " + s.content[key].name);
trace("Msg: " + s.content[key].msg);
trace("Face: " + s.content[key].face);
}
}
LTalk.prototype.setFaceStyle = function(styleData){
var s = this;
if(!styleData.x){s.faceX = 0;}else{s.faceX = styleData.x;}
if(!styleData.y){s.faceY = 0;}else{s.faceY = styleData.y;}
}
LTalk.prototype.setNameStyle = function(styleData){
var s = this;
if(!styleData.x){s.nameX = 0;}else{s.nameX = styleData.x;}
if(!styleData.y){s.nameY = 0;}else{s.nameY = styleData.y;}
if(!styleData.color){s.nameColor = "black";}else{s.nameColor = styleData.color;}
if(!styleData.font){s.nameFont = "宋体";}else{s.nameFont = styleData.font;}
if(!styleData.size){s.nameSize = "15";}else{s.nameSize = styleData.size;}
}
LTalk.prototype.setMsgStyle = function(styleData){
var s = this;
if(!styleData.x){s.msgX = 0;}else{s.msgX = styleData.x;}
if(!styleData.y){s.msgY = 0;}else{s.msgY = styleData.y;}
if(!styleData.color){s.msgColor = "black";}else{s.msgColor = styleData.color;}
if(!styleData.font){s.msgFont = "宋体";}else{s.msgFont = styleData.font;}
if(!styleData.size){s.msgSize = "15";}else{s.msgSize = styleData.size;}
}
LTalk.prototype.wind = function(num,completeFunc){
var s = this;
if(!num || num == null)num = 0;
if(!completeFunc)completeFunc = null;
s.talkIndex = num;
s.removeAllChild();
if(s.talkIndex < s.content.length){
var talkObject = s.content[s.talkIndex];
var faceBitmapdata = new LBitmapData(talkObject.face);
var faceBitmap = new LBitmap(faceBitmapdata);
faceBitmap.x = s.faceX;
faceBitmap.y = s.faceY;
s.addChild(faceBitmap);
var name = new LTextField();
name.x = s.nameX;
name.y = s.nameY;
name.size = s.nameSize;
name.color = s.nameColor;
name.font = s.nameFont;
name.text = talkObject.name;
name.width = s.textWidth;
name.setWordWrap(true,name.getHeight()+5);
s.addChild(name);
var msg = new LTextField();
msg.x = s.msgX;
msg.y = s.msgY;
msg.size = s.msgSize;
msg.color = s.msgColor;
msg.font = s.msgFont;
msg.text = talkObject.msg;
msg.width = s.textWidth;
msg.setWordWrap(true,msg.getHeight()+7);
msg.wind(completeFunc);
s.addChild(msg);
}else{
trace("Error: Param exceeds the size of the content!");
}
}
LTalk.prototype.clear = function(){
var s = this;
s.removeAllChild();
s.die();
}

运用时，就仅仅用写这些代码：

[javascript] view plain copy

var talkContent = [
{name:"[Yorhom]",msg:"你好，lufy",face:imglist["yorhom_face"]},
{name:"[lufy]",msg:"你好，yorhom",face:imglist["lufy_face"]},
{name:"[Yorhom]",msg:"lufylegend最新版本号是哪个版本号啊？",face:imglist["yorhom_face"]},
{name:"[lufy]",msg:"……你不知道自己看吗？",face:imglist["lufy_face"]},
{name:"[Yorhom]",msg:"……说得也是",face:imglist["yorhom_face"]},
];
var talk = new LTalk(talkContent);
addChild(talk);
talk.wind();

顺便提示一下，LTalk构造时所传的对话内容參数是一个数组套JSON的格式，它要在游戏图片载入完成后再初始化，否则显示不出对话头像。

最后把測试链接给大家：

http://www.cnblogs.com/yorhom/articles/3132075.html

进入后点击黑框開始对话。祝大家測试愉快~

近天就先讲到这里，下次我们接着研究。

谢谢大家阅读本文，支持就是最大的鼓舞。（^_^）

----------------------------------------------------------------

欢迎大家转载我的文章。

转载请注明：转自Yorhom's Game Box

http://blog.csdn.net/yorhomwang

DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计网页设计期末网页作业 html静态网页 html5期末大作业网页设计 web大作业
️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业 javascript html css 旅游风景
⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动二挡起步 web前端期末大作业 web设计网页规划与设计 html css javascript dreamweaver 前端
Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
h5小游戏定制开发红匣子实力推荐
随着科技的不断发展，移动互联网已经成为人们生活中不可或缺的一部分。在这个背景下，H5小游戏应运而生，为人们带来了丰富的娱乐体验。H5小游戏定制开发作为一种新兴的游戏开发方式，正逐渐受到市场的关注和青睐。那么，什么是H5小游戏定制开发呢？它又具有哪些特点和优势呢？让我们一起来深入了解一下。首先，我们来了解一下H5小游戏的基本概念。H5小游戏是一种基于HTML5技术的游戏，可以在移动端、PC端等多平台
HTML5概述 WFIT~SKY Web前端 html5 前端 html
1.HTML概述1.1HTML定义HTML超文本标记语言，其中超文本是链接，标记也叫标签（即带尖括号的文本）。1.2HTML基本骨架HTML基本骨架是网页模板。网页的标题网页的内容html：整个网页head：网页头部，存放给浏览器看的代码，例如CSSbody：网页主体，存放给用户看的代码，例如文字、图片title：网页标题1.3HTML关系父子关系（嵌套）兄弟关系（并列）2.HTML开发环境2.1
HTML添加文字若无心_. HTML html5
一、创建HTML5文档基本标签//定义文档类型//定义HTML文档//定义关于文档的信息文档标题//定义文档的标题//定义文档的字符编码//定义文档的主体二、文字相关标签1.标题文字-标签可定义标题。定义最大的标题。定义最小的标题。Document这是标题1这是标题2这是标题3这是标题4这是标题5这是标题62.文本段落Document这次会晤的主题是“金砖国家在非洲：在第四次工业革命中共谋包容增长
【拖拽】自定义拖拽图标风露_
一、知识点设置被拖拽的元素draggable为true(HTML5新特性)关键方法：voiddataTransfer.setDragImage(img,xOffset,yOffset);注意点：Note:Ifthe[Element]isanexisting[HTMLElement],itneedstobevisibleintheviewportinordertobeshownasadragfeed
Cocos2d、Cocos2dx、Cocos Creator、Cocos Studio的区别 Thomas游戏圈
一、Cocos2d和Cocos2dx的区别【开发语言】：Cocos2d是Object-C写的，Cocos2dx是C++写的，支持使用C++、Lua或Java进行开发。【运行平台】：Cocos2d只能在IOS下运行，Cocos2dx是跨平台的，适配iOS、Android、HTML5、Windows和Mac系统，功能侧重于原生移动平台。点击链接加入群聊【Unity/Cocos交流群】【国籍】：Coco
web前端达到什么水平，才能找到工作？ cj瑾瑜前端 html javascript css css3
一、前端是什么？前端即网站前台部分，也叫前端开发，运行在PC端，移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，HTML5，CSS3，前端框架的应用，跨平台响应式网页设计能够适应各种屏幕分辨率，完美的动效设计，给用户带来极高的用户体验。（核心技术：HTML、CSS、JavaScript）核心技术是前端开发中最基本也是最必须的三个技能。前端的开发中，在页面的布局时，HTML将元素进行定义
HTML5（六）canvas 矩形、路径、画板功能祝名
一.绘制矩形1.什么是canvascanvas标签相当于一个画板；canvas的宽高不要用css去定义，直接在标签中用属性写；2.obj=c.getContext('2d');获得2d绘画环境（相当于铺了一层画布）绘画图像的操作都会在obj这个绘画环境中存储；3.绘画方法及样式x,y为坐标样例：二.canvas路径1.方法2.样例cv.lineJoin='round';//边界类型为弧形三.画板功
HTML5中的数据存储sessionStorage、localStorage 阿立聊代码 HTML实战 html5 前端 html
第8章HTML5中的数据存储之前通常使用Cookie存储机制将数据保存在用户的客户端。H5增加了两种全新的数据存储方式：WebStroage和WebSQLDatabase.前者用于临时或永久保存客户端少量数据，后者是客户端本地化的一套数据库系统。8.1WebStorage存储简介WebStorageAPI分为会话数据和长期数据，相应的API分为两类：sessionStorage(保存会话数据)lo
html5carousel图片轮播,全面解析Bootstrap中Carousel轮播的使用方法 RemusrickCat
本文实例为大家全面的解析了Bootstrap中Carousel的使用方法，供大家参考，具体内容如下源码文件：Carousel.scssCarousel.js实现原理：隐藏所有要显示的元素，然后指定当前要显示的为block，宽、高自适应源码分析：1、Html结构：主要分为以四个部分1.1、容器：最外层div，需要一个data-ride=”carousel”来指定为轮播放插件，并且提供一个Id，方便圆
【Web前端技术 02】深入探索HTML5：标签全解析与案例演示！ wcyd Web前端技术前端 html5 html
深入探索HTML5：标签全解析与案例演示！大家好！在上一篇文章中，我们对HTML5有了一个基本的了解。今天，我们将更深入地探索HTML5，全面介绍各种标签及其应用。从基础标签到新增标签，从文档结构到格式标签，我们将一一解析，并提供丰富的案例演示。准备好了吗？让我们开始吧！️HTML5基础结构首先，让我们回顾一下HTML5的基本结构。HTML5文档的结构就像一座房子的蓝图，指导我们如何构建网页。下面
HTML5中`＜span＞`标签深入解析软考鸭 html5 html5 前端 html
引言在HTML5中，标签是一个行内元素，用于对文档中的一小部分文本或内容进行分组，以便于应用CSS样式或JavaScript脚本。与块级元素（如）不同，不会打断文本的流动，而是与其内容一起在同一行内显示。本文将深入解析标签的定义、用法、属性以及在实际开发中的应用。定义与用法标签是一个无语义的行内容器，用于包裹文档中的一部分内容，而不改变文档的结构。它通常与CSS和JavaScript结合使用，以实
HTML5 `＜button＞` 标签深入全面解析软考鸭 html5 html5 前端 html
引言在HTML5中，标签用于定义一个可点击的按钮，它是创建交互式网页的重要元素之一。与相比，标签提供了更多的灵活性和样式化的可能性。本文将深入解析HTML5中的标签，详细介绍其属性、样式以及实际应用。标签的基本用法标签内部可以放置内容，如文本、图像或其他HTML元素。这使得标签比更加灵活。点击我在这个简单的例子中，我们创建了一个普通的按钮，其上的文本是“点击我”。标签的属性标签支持多种属性，用于定
HTML5之基础、元信息标签 Programmer.杨前端技术-HTML html meta head title 标签
标签声明位于文档中最前面的位置，处于标签之前。声明不是一个HTML标签，它是告知Web浏览器该页面使用了哪种HTML版本（规范），浏览器用此版本（规范）对该文档进行解析，渲染。可声明的DTD有三种：分别是严格版本（strict）、过渡版本（transitional）、以及基于框架的版本（frameset），若文档不遵循其DTD规范，则此文档中的代码不但不能通过代码校验，并且有可能无法正常显示。文档
HTML5中`＜ul＞`标签深入全面解析软考鸭 html5 html5 前端 html
在HTML5的广阔天地里，标签作为无序列表的代言人，扮演着举足轻重的角色。它不仅能够整洁地罗列信息，还通过丰富的属性和样式选项，为网页设计师提供了无限的创意空间。本文将深入剖析标签的内核，详细解读其属性与样式，助力你打造更加精致、功能强大的网页。一、标签基础概览，即UnorderedList（无序列表）的缩写，用于在网页中展示一系列无特定顺序的项目。每个项目由（ListItem，列表项）标签包裹，
HTML5全面知识点 A_cot html html5 前端框架前端
HTML（HyperTextMarkupLanguage）是构建网页的基础语言。以下是全面的HTML知识点：一、HTML基础概念定义：HTML是一种用于描述网页结构的标记语言，通过各种标签来定义网页的内容和布局。版本历史：从HTML的早期版本发展到现在的HTML5，功能不断增强，支持更多的多媒体和交互特性。二、HTML文档结构声明：用于告诉浏览器文档类型是HTML5。标签：整个HTML文档的根元素
python提取数据库数据到前端html5显示_python html提取数据库数据 weixin_39878745
python开源工具列表【持续更新】以下是个人在工作中整理的一些pythonwheel，供参考。这个列表包含与网页抓取和数据处理的Python库网络通用urllib-网络库(stdlib)。requests-网络库。grab–网络库(基于pycurl)。pycurl–网络库(绑定libcurl)。urllib3–...文章武耀文2018-04-253128浏览量8个用于业余项目的优秀Python库
掌财社:在html5中使用video进行全屏播放与自动播放的代码方法总结！ weixin_45378258 HTML
今天由于在之前小编在项目中遇到的有关于：“在html5中使用video进行全屏播放与自动播放的代码方法总结！”这方面的内容，所以今天就来和大家分享有关于这方面的相关内容！近期开始开发公司新版官网，首页顶部（header）是一个全屏播放的小视频,现简单总结如下：页面代码：其中php简单判断了一下是否是移动设备,移动设备不展示视频(如果移动端展示的话,需要解决iOS上无法自动播放的问题):ps:如果H
Vue中使用pdfJs预览PDF、图片 viceen vue3+ts-运维 vue项目-运维 vue.js html html5
Vue中使用pdfJs预览PDF、图片pdf.js是一个使用HTML5构建的可移植文档格式库。它可以帮助我们在浏览器中构建pdf文档，实现在线查看pdf文件的功能。实现步骤如下：1.下载pdfJs到本地（官网下载地址），放到项目根目录下的静态资源目录static文件夹内，将文件命名为pdfJs。如下图使用iframe打开或者需要注意的是：file参数中默认只允许传简单路径比如：http://www
【WebKit深度解析】HTML5支持全景与实践指南 2401_85812026 webkit html5 前端
标题：【WebKit深度解析】HTML5支持全景与实践指南WebKit作为许多现代浏览器的核心技术，对HTML5的支持程度直接关系到Web应用的性能和体验。HTML5是构建现代Web应用的基石，提供了丰富的特性和API。本文将深入探讨WebKit对HTML5的支持程度，并通过实际代码示例，展示如何在WebKit浏览器上充分利用HTML5的强大功能。1.WebKit与HTML5概述WebKit是一个
HTML5 ＜video＞常用属性、时间、方法及基础使用说明 Wu Youlu java 前端 javascript
简介HTML元素用于在文档中嵌入媒体播放器，用于支持文档内的视频播放。标签也可用于播放音频，但播放音频用更加适合。元素支持三种视频格式：MP4,WebM,和Ogg:MP4=带有H.264视频编码和AAC音频编码的MPEG4文件WebM=带有VP8视频编码和Vorbis音频编码的WebM文件Ogg=带有Theora视频编码和Vorbis音频编码的Ogg文件基础写法Yourbrowserdoesnot
WebAPI DOM文档对象模型 znhyXYG javascript 前端开发语言
DOM（文档对象模型）是一个可以改变网页内容、结构、样式的处理可扩展标记语言的接口一、获取元素方法：1、根据ID获取2、根据标签名获取3、根据类名获取（html5新增）4、querySelector获取（html5新增）5、querySelectorAll获取（html5新增）6、获取特殊元素（body、html）ID获取方法：document.getElementById(); 2019-9-9
使用fabric.js简简单单实现一个画板小草先森tyro 前端
什么是fabricfabric是一个功能强大的JavaScript库,运行在HTML5canvas上。fabric为canvas提供了一个交互式对象模型，以及一个svg-to-canvas解析器。与canvas的区别来一个简单的例子来说明一下fabric与canvas的区别，假设我们想在一个画布上画一个红色的矩形：//原生canvasapi//有一个id是c的canvas元素varcanvasEl
探索 Fabric.js：前端开发的轻量级图形编辑框架滑辰煦Marc
探索Fabric.js：前端开发的轻量级图形编辑框架是一个强大的、基于WebGL和SVG的JavaScript图形库，专为构建交互式图形界面而设计。它提供了一种简单的方式来在网页上创建和操纵矢量对象，包括文本、形状、图像等，并且具有丰富的可定制性和性能优化。项目简介Fabric.js提供了一个统一的对象模型，使得处理HTML5canvas上的元素变得异常简单。无论是创建复杂的绘图应用，还是实现动态
用html写出生日蛋糕,纯HTML5+CSS3制作生日蛋糕代码天眼查用html写出生日蛋糕
.birthday.container{width:600px;height:600px;margin:0pxauto;background:#fafafa;border-radius:5px;position:relative;}/****顶层的**/.birthday.top-one{position:absolute;width:280px;height:280px;bottom:200px
HTML5生日祝福蛋糕页面(生日蛋糕树) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码 css爱心 @秋天的笔记生日祝福网页html 520情人节告白网页制作七夕情人节表白网页源代码 HTML5七夕情人节动画网页 HTML生日快乐代码 3D旋转电子相册
HTML5七夕情人节表白网页❤生日蛋糕(蛋糕树)❤HTML+CSS+JS求婚html生日快乐祝福代码网页520情人节告白代码程序员表白源码抖音3D旋转相册js烟花代码css爱心表白这是程序员表白系列中的100款网站表白之一，旨在让任何人都能使用并创建自己的表白网站给心爱的人看。此波共有100个表白网站，可以任意修改和使用，源码已上传，演示网址如下。文章末尾-已经附上源码下载地址作者主页-更多源码1
记录-小程序720°VR（跳转H5页面实现）久违的小技巧小程序小程序 vr javascript
全景浏览提前准备1拍照支架/照片合成软件（KolorAutopanoGiga4.0）或者全景相机2pannellum（pannellum是一个轻量级、免费和开源的Web全景查看器。它使用HTML5、CSS3、JavaScript和WebGL构建，没有插件。）3H5页面引入pannellum.js/css文件，swiper/jquery文件（因为需要在全景图底部显示可切换图片，与dom操作/ajax
HTML5与CSS3 Mousse.- html css 前端 html5 css3
HTML部分##什么是网页：1.网站是指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。2.网页是网站中的一“页”，通常是HTML格式的文件，它要通过浏览器来阅读。##网页的组成：1.网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以.htm或.html后缀结尾的文件，因此将其俗称为HTML文件。##什么是HTML：1
apache ftpserver-CentOS config gengzg apache
<server xmlns="http://mina.apache.org/ftpserver/spring/v1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation=" http://mina.apache.o
优化MySQL数据库性能的八种方法 AILIKES sql mysql
1、选取最适用的字段属性　　MySQL可以很好的支持大数据量的存取，但是一般说来，数据库中的表越小，在它上面执行的查询也就会越快。因此，在创建表的时候，为了获得更好的性能，我们可以将表中字段的宽度设得尽可能小。例如，在定义邮政编码这个字段时，如果将其设置为CHAR(255),显然给数据库增加了不必要的空间，甚至使用VARCHAR这种类型也是多余的，因为CHAR(6)就可以很
JeeSite 企业信息化快速开发平台 Kai_Ge JeeSite
JeeSite 企业信息化快速开发平台平台简介 JeeSite是基于多个优秀的开源项目，高度整合封装而成的高效，高性能，强安全性的开源Java EE快速开发平台。 JeeSite本身是以Spring Framework为核心容器，Spring MVC为模型视图控制器，MyBatis为数据访问层， Apache Shiro为权限授权层，Ehcahe对常用数据进行缓存，Activit为工作流
通过Spring Mail Api发送邮件 120153216 邮件 main
原文地址：http://www.open-open.com/lib/view/open1346857871615.html 使用Java Mail API来发送邮件也很容易实现，但是最近公司一个同事封装的邮件API实在让我无法接受，于是便打算改用Spring Mail API来发送邮件，顺便记录下这篇文章。【Spring Mail API】 Spring Mail API都在org.spri
Pysvn 程序员使用指南 2002wmj SVN
源文件:http://ju.outofmemory.cn/entry/35762 这是一篇关于pysvn模块的指南. 完整和详细的API请参考 http://pysvn.tigris.org/docs/pysvn_prog_ref.html. pysvn是操作Subversion版本控制的Python接口模块. 这个API接口可以管理一个工作副本, 查询档案库, 和同步两个. 该
在SQLSERVER中查找被阻塞和正在被阻塞的SQL 357029540 SQL Server
SELECT R.session_id AS BlockedSessionID , S.session_id AS BlockingSessionID , Q1.text AS Block
Intent 常用的用法备忘 7454103 .net android Google Blog F#
Intent 应该算是Android中特有的东西。你可以在Intent中指定程序要执行的动作（比如：view,edit,dial），以及程序执行到该动作时所需要的资料。都指定好后，只要调用startActivity()，Android系统会自动寻找最符合你指定要求的应用程序，并执行该程序。下面列出几种Intent 的用法显示网页:
Spring定时器时间配置 adminjun spring 时间配置定时器
红圈中的值由6个数字组成，中间用空格分隔。第一个数字表示定时任务执行时间的秒，第二个数字表示分钟，第三个数字表示小时，后面三个数字表示日，月，年，< xmlnamespace prefix ="o" ns ="urn:schemas-microsoft-com:office:office" /> 测试的时候，由于是每天定时执行，所以后面三个数
POJ 2421 Constructing Roads 最小生成树 aijuans 最小生成树
来源：http://poj.org/problem?id=2421 题意：还是给你n个点，然后求最小生成树。特殊之处在于有一些点之间已经连上了边。思路：对于已经有边的点，特殊标记一下，加边的时候把这些边的权值赋值为0即可。这样就可以既保证这些边一定存在，又保证了所求的结果正确。代码： #include <iostream> #include <cstdio>
重构笔记——提取方法（Extract Method） ayaoxinchao java 重构提炼函数局部变量提取方法
提取方法（Extract Method）是最常用的重构手法之一。当看到一个方法过长或者方法很难让人理解其意图的时候，这时候就可以用提取方法这种重构手法。下面是我学习这个重构手法的笔记：提取方法看起来好像仅仅是将被提取方法中的一段代码，放到目标方法中。其实，当方法足够复杂的时候，提取方法也会变得复杂。当然，如果提取方法这种重构手法无法进行时，就可能需要选择其他
为UILabel添加点击事件 bewithme UILabel
默认情况下UILabel是不支持点击事件的，网上查了查居然没有一个是完整的答案，现在我提供一个完整的代码。 UILabel *l = [[UILabel alloc] initWithFrame:CGRectMake(60, 0, listV.frame.size.width - 60, listV.frame.size.height)]
NoSQL数据库之Redis数据库管理(PHP-REDIS实例) bijian1013 redis 数据库 NoSQL
一.redis.php <?php //实例化 $redis = new Redis(); //连接服务器 $redis->connect("localhost"); //授权 $redis->auth("lamplijie"); //相关操
SecureCRT使用备注 bingyingao secureCRT 每页行数
SecureCRT日志和卷屏行数设置一、使用securecrt时，设置自动日志记录功能。 1、在C:\Program Files\SecureCRT\下新建一个文件夹(也就是你的CRT可执行文件的路径），命名为Logs； 2、点击Options -> Global Options -> Default Session -> Edite Default Sett
【Scala九】Scala核心三：泛型 bit1129 scala
泛型类 package spark.examples.scala.generics class GenericClass[K, V](val k: K, val v: V) { def print() { println(k + "," + v) } } object GenericClass { def main(args: Arr
素数与音乐 bookjovi 素数数学 haskell
由于一直在看haskell，不可避免的接触到了很多数学知识，其中数论最多，如素数，斐波那契数列等，很多在学生时代无法理解的数学现在似乎也能领悟到那么一点。闲暇之余，从图书馆找了<<The music of primes>>和<<世界数学通史>>读了几遍。其中素数的音乐这本书与软件界熟知的&l
Java-Collections Framework学习与总结-IdentityHashMap BrokenDreams Collections
这篇总结一下java.util.IdentityHashMap。从类名上可以猜到，这个类本质应该还是一个散列表，只是前面有Identity修饰，是一种特殊的HashMap。简单的说，IdentityHashMap和HashM
读《研磨设计模式》-代码笔记-享元模式-Flyweight bylijinnan java 设计模式
声明：本文只为方便我个人查阅和理解，详细的分析以及源代码请移步原作者的博客http://chjavach.iteye.com/ import java.util.ArrayList; import java.util.Collection; import java.util.HashMap; import java.util.List; import java
PS人像润饰&调色教程集锦 cherishLC PS
1、仿制图章沿轮廓润饰——柔化图像，凸显轮廓 http://www.howzhi.com/course/retouching/ 新建一个透明图层，使用仿制图章不断Alt+鼠标左键选点，设置透明度为21%，大小为修饰区域的1/3左右（比如胳膊宽度的1/3），再沿纹理方向（比如胳膊方向）进行修饰。所有修饰完成后，对该润饰图层添加噪声，噪声大小应该和
更新多个字段的UPDATE语句 crabdave update
更新多个字段的UPDATE语句 update tableA a set (a.v1, a.v2, a.v3, a.v4) = --使用括号确定更新的字段范围
hive实例讲解实现in和not in子句 daizj hive not in in
本文转自：http://www.cnblogs.com/ggjucheng/archive/2013/01/03/2842855.html 当前hive不支持 in或not in 中包含查询子句的语法，所以只能通过left join实现。假设有一个登陆表login(当天登陆记录,只有一个uid),和一个用户注册表regusers(当天注册用户，字段只有一个uid)，这两个表都包含
一道24点的10+种非人类解法（2,3,10,10） dsjt 算法
这是人类算24点的方法？！！！事件缘由：今天晚上突然看到一条24点状态，当时惊为天人，这NM叫人啊？以下是那条状态朱明西 : 24点，算2 3 10 10，我LX炮狗等面对四张牌痛不欲生，结果跑跑同学扫了一眼说，算出来了，2的10次方减10的3次方。。我草这是人类的算24点啊。。然后么。。。我就在深夜很得瑟的问室友求室友算刚出完题，文哥的暴走之旅开始了 5秒后
关于YII的菜单插件 CMenu和面包末breadcrumbs路径管理插件的一些使用问题 dcj3sjt126com yii framework
在使用 YIi的路径管理工具时，发现了一个问题。 <?php
对象与关系之间的矛盾：“阻抗失配”效应[转] come_for_dream 对象
概述 “阻抗失配”这一词组通常用来描述面向对象应用向传统的关系数据库（RDBMS）存放数据时所遇到的数据表述不一致问题。C++程序员已经被这个问题困扰了好多年，而现在的Java程序员和其它面向对象开发人员也对这个问题深感头痛。 “阻抗失配”产生的原因是因为对象模型与关系模型之间缺乏固有的亲合力。“阻抗失配”所带来的问题包括：类的层次关系必须绑定为关系模式（将对象
学习编程那点事 gcq511120594 编程互联网
一年前的夏天，我还在纠结要不要改行，要不要去学php？能学到真本事吗？改行能成功吗？太多的问题，我终于不顾一切，下定决心，辞去了工作，来到传说中的帝都。老师给的乘车方式还算有效，很顺利的就到了学校，赶巧了，正好学校搬到了新校区。先安顿了下来，过了个轻松的周末，第一次到帝都，逛逛吧！接下来的周一，是我噩梦的开始，学习内容对我这个零基础的人来说，除了勉强完成老师布置的作业外，我已经没有时间和精力去
Reverse Linked List II hcx2013 list
Reverse a linked list from position m to n. Do it in-place and in one-pass. For example:Given 1->2->3->4->5->NULL, m = 2 and n = 4, return
Spring4.1新特性——页面自动化测试框架Spring MVC Test HtmlUnit简介 jinnianshilongnian spring 4.1
目录 Spring4.1新特性——综述 Spring4.1新特性——Spring核心部分及其他 Spring4.1新特性——Spring缓存框架增强 Spring4.1新特性——异步调用和事件机制的异常处理 Spring4.1新特性——数据库集成测试脚本初始化 Spring4.1新特性——Spring MVC增强 Spring4.1新特性——页面自动化测试框架Spring MVC T
Hadoop集群工具distcp liyonghui160com
1. 环境描述两个集群：rock 和 stone rock无kerberos权限认证，stone有要求认证。 1. 从rock复制到stone，采用hdfs Hadoop distcp -i hdfs://rock-nn:8020/user/cxz/input hdfs://stone-nn:8020/user/cxz/运行在rock端，即源端问题：报版本
一个备份MySQL数据库的简单Shell脚本 pda158 mysql 脚本
　　主脚本（用于备份mysql数据库）：　　该Shell脚本可以自动备份数据库。只要复制粘贴本脚本到文本编辑器中，输入数据库用户名、密码以及数据库名即可。我备份数据库使用的是mysqlump 命令。后面会对每行脚本命令进行说明。　　 1. 分别建立目录“backup”和“oldbackup” 　　#mkdir /backup 　　#mkdir /oldbackup 　
300个涵盖IT各方面的免费资源（中）——设计与编码篇 shoothao IT资源图标库图片库色彩板字体
A. 免费的设计资源 Freebbble:来自于Dribbble的免费的高质量作品。 Dribbble:Dribbble上“免费”的搜索结果——这是巨大的宝藏。 Graphic Burger:每个像素点都做得很细的绝佳的设计资源。 Pixel Buddha:免费和优质资源的专业社区。 Premium Pixels:为那些有创意的人提供免费的素材。
thrift总结 - 跨语言服务开发 uule thrift
官网官网JAVA例子 thrift入门介绍 IBM-Apache Thrift - 可伸缩的跨语言服务开发框架 Thrift入门及Java实例演示 thrift的使用介绍 RPC POM： <dependency> <groupId>org.apache.thrift</groupId>

如何实现一个HTML5 RPG游戏引擎——第四章，实现情景对话

1，实现后的代码

2，LTalk类

3，wind方法

4，更改样式&手动清空对话&重设数据

5，Debug输出

6,源码

你可能感兴趣的:(html5)