【前端自学-网页游戏】0基础开发文字类页游-第一课：剧情栏(javascript/html/css)

前言 

昨天，我菲律宾女佣开着我的马萨拉蒂去市场买菜的时候，听档主阿婆讲，最近很流行网页游戏。随后，博主心想，虽然博主一分钟几千万上下资金流动，但是博主心里对前端还留有一块圣地，无论今生贫穷、富贵、生老病死，博主愿意一直学习前端走下去。无论是否有机会用得上这项技能，博主也会持之以恒的学习。嗯、就这样。

环境：

众所周知，文字类游戏可以称得上当今世上最简单的游戏，想要自学前端，从这个地方开始是一个很好的入门方式，目前博主自学前端，苦于没有什么项目或者目标实践，既然没有目标我们自己创造目标。博主目前前端水平如下：

html:半入门

css：半入门

js：半半入门

其他框架、后端水平：无！

博主这种渣渣都能大言不惭的学习前端，估计找本“前端入门”书上放块葱花饼，牵一只猴子过来也能学，当然屏幕前的你也一定能学！

好了正文开始！

需求：

小黑屋是几年前火爆一时的纯文字类游戏，没有图片及动画，整个游戏纯靠文字及简单的鼠标点击事件进行剧情推动。即便如此，也依然夺得了大家的青睐，而后，类似的国内也有很多游戏模式模仿小黑屋的特点，靠简单的文字及按钮触发事件，推动剧情。

下方列举了一段文字堆砌的战斗剧情

•  嘤嘤怪 朝你靠近，距离为1米；
• 你用 平底锅 攻击了 嘤嘤怪 的脑袋，造成了1点伤害；
•  嘤嘤怪 用第三条腿抽打了你菊花一下，造成了90点伤害；
• 你死了！；

以上这段文字，相信玩过文字类页游的小伙伴马上就知道是描述了一段你与怪战斗的经历，既然是经历，那么我们就需要将文字逐行输出，要么以时间单位逐行输出，要么通过事件触发输出，如果不是这样，你可以想象一下，你进入游戏，点击开始按钮，剧情文字大概1w多条全部渲染到页面上，你出生了，你干嘛干嘛（省略1w条），你死了，那样的话毫无剧情发展及操纵感科研，从而就不是游戏，而是变成小说了。

既然有了需求，我们就以此入手，来构建文字类网页游戏中最简单最基础同时又是最重要的东西-剧情栏！

储备：

• 工具-Dreamweaver CS6
• HTML-
• DOM-createElement
• DOM-createTextNode
• DOM-insertBefore
• DOM-setTimeout

参考：

小黑屋游戏左侧剧情栏。

特点：1.文字逐行输出在剧情栏第一行，历史剧情向下滚动。

                         2.文字每隔固定时间输出（10秒后火焰熄灭等。。）。

                         3.文字根据特殊事件触发输出（点击“点火”按钮，触发剧情）。

流程：

1.准备html、css、js.

准备项目工作很简单，用工具dw新建就可以，放自己喜欢的位置，一切东西都默认，如果dreamweaver都不会用那博主也不想说什么了。

博主构建的项目如下,你可能对博主随意建造不按照常规搭建方式来诟病博主，但是博主在这里奉劝：初学者不要被太多的条条框框所限制，简单点，首先你要学会勇于按照自己的想法去实践，错了再改，要以最快速度达到目标，达到“瓶子”的底部，而不是永远被细节和条条框框所束缚，永远守在瓶颈处。。等到你技术过硬了，再回头考虑细节问题，还可以复习一遍。（以上这句话很重要，老子摸爬滚打这么多年总结的）

D:\前端\pro2\index.html
D:\前端\pro2\index.css
D:\前端\pro2\index.js

闲话少说，建好对应的文件后，我们将js和css引入主html

css文件引入标签放在标签中

js引入放在body标签最后的前面。

好了，基础项目建好了，接下来考虑页面的布局，刚开始不用太复杂，我们用几个div标签来构建，初步构想可以先模仿小黑屋的布局。如下图：

游戏主栏包含剧情区，可以用两个div来表示，index.html页面中我们先添加如下部分：

然后我们在index.css文件中加入一些简单样式来“撑开”两个div；

其中#main末尾的margin:0 auto;代表“该标签对于父容器是左右居中的”，（具体参考：菜鸟教程_margin）（之前，博主研究过很多上下居中的办法，后来浏览了大量的网站后才发现根本没有必要做上下居中！具体原因以后再说！）

下面的#left 末尾的float:left;属性标识该标签对于父容器左浮动（具体参考：菜鸟教程_float）

#main {width:800px; height:600px; background:#ccc; margin:0 auto;}
#left {width:300px; height:600px; background:#999; float:left;}

 

做完以上操作后，最终显示效果如下：

游戏主体区域位于浏览器居中的位置。

以上算是完成了我们最初的游戏框架。

 

2.剧情触发、及输出方式。

初步构想：

1.主栏中添加一个按钮，触发剧情。

2.触发内容为三条新构建的文本，依照一定时间逐行输出在剧情栏。

 

 

实现过程

1.首先我们修改index.html文件的游戏主栏标签中，加入一个 按钮内容为start，级别与剧情栏平齐，左浮动，那么就会在剧情栏旁边显示出一个按钮，此按钮作为触发开始剧情按钮，以下为代码

html

start

2.接下来，我们通过点击start按钮，希望在屏幕左侧的剧情栏逐行、有时间间隔的输出三段话分别为:

“你好！”

“欢迎来到...”

“这个世界！！！”

思路：

在js文件中，我们要做到，点击start按钮，新增三个新的

标签,并加入文本标签为对应具体的文本内容，而从第一个“你好”文本输出后，每隔3秒，输出下一条文本。首先我们要学会逆向思维，我们首先构建一个方法：点击start按钮可以在剧情栏里添加

标签及内容，这里用到了三个知识点：DOM-createElement创建一个新的元素;DOM-createTextNode创建一个新的文本元素；DOM-insertBefore在所指定的子元素之前添加一个元素。

 

js初稿：

var start=document.getElementById('bt_s');
function insertA()
{
	var left_Div=document.getElementById('left');
	var new_Li=document.createElement('li');
	var new_Text=document.createTextNode('你好!');
	new_Li.appendChild(new_Text);
	left_Div.insertBefore(new_Li,left_Div.childNodes[0]);
}
start.οnclick=function()
{
	insertA();
}

 

其中，insertBefore的用法是insertBefore(添加的内容,要添加在哪个标签之前),入上图所示，这样写后，我们点击start按钮，就会永远在剧情栏第一条输出一条新内容，其他内容逐行下移。具体点击效果及实时代码入下图：

 

这样，初步算是完成了，剩下的需求为：添加三段不同的话，间隔时间3秒逐条输出到剧情栏，

那么我们首先考虑：输出三段不同的内容，你好、欢迎来到、这个世界。

那么考虑一下代码是否可以这样写：连续重复地写三段新建标签、新建文本、插入第一行的代码，文本内容对应要输出的话，然后再制作三个按钮触发三次的插入行为.

这样写不是不可以，但是代码会变得冗长无比，并且当需求变成连续输出100条或者更多不同的文本的时候，这么做就不切实际了，那么我们需要换一种思路方式，用数组的方式（也可以是其他方案，例如json、数据库等，以后再说）来存储文本内容，并用for循环的办法逐条调用insertA()方法来将文本输出到剧情栏，那么如果日后有其他文本内容，我们只需要在数组中增加就可以了！

ok，接下来我们在js文件中做一个juqingA()的方法，方法中要做的事情是：新建一个剧情文本数组，用for循环语句循环调用insertA()方法，连续三次输出三段文本内容。代码如下：

js二版

var start=document.getElementById('bt_s');
function insertA(content)
{
	var left_Div=document.getElementById('left');
	var new_Li=document.createElement('li');
	var new_Text=document.createTextNode(content);
	new_Li.appendChild(new_Text);
	left_Div.insertBefore(new_Li,left_Div.childNodes[0]);
}


function juqingA()
{
	var textA=new Array();
	textA=['你好！','欢迎来到..','这个世界!!!'];
	for(var i=0;i

上图代码中，我们在方法juqingA()中建造了一个数组，并存储了要输出的三条文本，其次，创造了一条for循环语句来遍历一遍数组textA中所有内容，而后，我们又为insertA()方法增加了一个参数content，用来接收文本的内容，并在新建文本节点new_Text的时候直接使用这个参数，那么最后点击按钮触发juqingA()方法，会将内容全部输出至游戏的剧情栏中！

效果如下：

 

做完以上内容，我们离目标又进了一步，但依然还有一个缺陷，这三句话是同时输出的，没有时间间隔，看起来刻板生硬，好了接下来我们来完成最后一个需求，为页游项目中增加一个十分重要的概念：时间！无论对于任何游戏而言，它都是动态的（即便是文字类页游也一样）时间概念非常重要，如果事件与事件之间没有时间间隔，所有事情同时发生，那么就像我开篇所说，游戏会变成小说，很多吊炸天的效果无法实现。

接下来，我们期望三条文本不同步输出到剧情栏，而是每条间隔3秒钟输出。那么实现的方法很简单，只需要在每次输出文本的时候添加一个函数：DOM-setTimeout我们要单独的写一个时间的函数来方便传参，具体代码变更如下；

js终版

// JavaScript Document
var start=document.getElementById('bt_s');
function insertA(content)
{
	var left_Div=document.getElementById('left');
	var new_Li=document.createElement('li');
	var new_Text=document.createTextNode(content);
	new_Li.appendChild(new_Text);
	left_Div.insertBefore(new_Li,left_Div.childNodes[0]);
}
function timeA(cont,Time)
{
	setTimeout(function(){ insertA(cont); },  Time);	
}

function juqingA()
{
	var textA=new Array();
	textA=['你好！','欢迎来到..','这个世界!!!'];
	var tm=1000;
	for(var i=0;i

以上代码，juqingA()方法里面的fou循环由之前的直接调用insertA()改为调用timeA()，再由timeA()调用insertA()，这样做是为了给每次循环加一个时间标签，当然这里提出一个问题，是否可以直接把setTimeout()方法写到insertA()里面呢？答案是不行的！为什么留给你自己思考，这里可以参考这篇文章;

最终效果：

 

以上，完成！

虽然丑是丑了点，甚至

标签前面的点都没有去掉，不过没关系，那不是我们该关心的，觉得丑的同学可以自己去搜索点css默认样式添加进去，就像我开篇所说的自学不仅仅要勤，更要快！找对方法，专注于该处理的问题上！才能接触到前端的。。。更前端！！。

下期预告：装备栏，装备拾取，随机装备跌落等（具体待定）

总结or后记or写给读者的话

学海无涯苦做舟，求学的路上是寂寞的，今天是2018年8月5日的下午5点，周日，一天的时间写出了教学第一篇，

实际上教学的内容对于大部分业内人士，可能鸡毛都不算，但重要的是我想要传递给新手自学者一种学习的思想和态度，在你心里播下一颗种子，正如我很欣赏的一句话，我们可以在姿态上蔑视，行动上重视，同样的，整篇文章充斥了一些不正经的甚至戏谑的内容，但却是很严谨的写出了所有我想表达的知识点，开篇以“需求”的方式，以最快的速度来实现目标，并解决障碍，这正式现在开发的大环境，你别管怎么实现，首先要快！要马上掌握，你才能走下一不，同时，文章争取以最小的篇幅传递最多的信息，而博主实际上也是一个前端的初学者，做了很多计划，想研究react，想研究后台的东西包括java、php什么的，想走maou（偶像）大神的路，但发现那些目标都太遥远，特别是react，看了几个入门视频发现还得掌握node和webpack之类的东东，唉，短期内可能无法达到，但没关系，慢慢来，我虽然没有到达，但是我已经在路上了！博主会一边学习一边讲掌握的东西以这种形式来整合成文章，最终做出一个成品的东西！

课后练习：

抛开文章中的代码

给你一个需求，请最快速度实现。

主游戏框、剧情框、start按钮，并根据start按钮的触发，据情框中分时间隔3000弹出：

你好！

欢迎来到..

这个世界！！！

最后附上源码及第二课链接