首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

尝试使用用于文本冒险的数组让JS替换innerHTML内容

文本冒险是一种基于文本的游戏,玩家通过选择不同的选项来推动故事情节的发展。在JavaScript中,可以使用数组来实现文本冒险游戏的选项和故事内容的替换。

首先,我们可以创建一个包含故事内容和选项的数组。每个数组元素都是一个对象,包含两个属性:content(内容)和options(选项)。content属性存储故事的文本内容,options属性存储一个数组,包含不同的选项。

代码语言:txt
复制
var story = [
  {
    content: "你来到了一个神秘的森林。",
    options: ["向左走", "向右走"]
  },
  {
    content: "你选择了向左走。",
    options: ["继续向前", "返回"]
  },
  {
    content: "你继续向前,发现了一座古老的城堡。",
    options: ["进入城堡", "绕过城堡"]
  },
  // ...
];

接下来,我们可以创建一个函数来根据玩家选择的选项更新故事内容。该函数接受一个参数,表示玩家选择的选项索引。根据选项索引,我们可以获取下一个故事内容,并将其替换到HTML页面中。

代码语言:txt
复制
function updateStory(optionIndex) {
  var contentElement = document.getElementById("content");
  var optionsElement = document.getElementById("options");

  // 获取下一个故事内容
  var nextStory = story[optionIndex];

  // 更新内容
  contentElement.innerHTML = nextStory.content;

  // 清空选项
  optionsElement.innerHTML = "";

  // 添加新选项
  for (var i = 0; i < nextStory.options.length; i++) {
    var option = document.createElement("button");
    option.innerHTML = nextStory.options[i];
    option.setAttribute("onclick", "updateStory(" + i + ")");
    optionsElement.appendChild(option);
  }
}

在HTML页面中,我们需要一个用于显示故事内容的元素和一个用于显示选项的元素。

代码语言:txt
复制
<div id="content">你来到了一个神秘的森林。</div>
<div id="options">
  <button onclick="updateStory(0)">向左走</button>
  <button onclick="updateStory(1)">向右走</button>
</div>

通过调用updateStory函数,并传入玩家选择的选项索引,我们可以实现故事内容的替换和选项的更新。

这是一个简单的文本冒险游戏的实现示例。根据实际需求,你可以扩展故事内容和选项,添加更多的情节和选择。同时,你也可以通过CSS样式和其他JavaScript功能来美化和增强游戏的体验。

腾讯云相关产品和产品介绍链接地址:

请注意,以上仅为腾讯云的一些相关产品,其他云计算品牌商也提供类似的产品和服务。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

从零开始学 Web 之 DOM(三)innerText与innerHTML、自定义属性

在这里我会从 Web 前端零基础开始,一步步学习 Web 相关知识点,期间也会分享一些好玩项目。现在就让我们一起进入 Web 前端学习冒险之旅吧!...2、获取成对标签中文本内容: 在 IE8 下使用 textContent 获取成对标签中文本内容,返回值为 undefined。 那么说明,浏览器不支持属性类型都为 undefined....common.js"> my$("dv").innerText = "div标签"; // 只显示文本 my$("dv").innerHTML...console.log(my$("dv").innerHTML); // 哈哈 p标签 innerText 属性:设置和获取只能得到文本内容。...innerHTML 属性:不仅可以获得文本内容,还可以设置和获取 html 标签,其显示或得到对应标签格式。

1.1K30

❤️创意网页:有趣文字冒险游戏(可以无限拓展)

在本篇博客中,我将向大家介绍如何使用HTML和JavaScript来创建自己文字冒险游戏。通过简洁明了代码和丰富多样情节选择,你可以打造一个独一无二游戏体验。...HTML用于创建游戏页面结构和样式,而JavaScript则用于编写游戏逻辑代码。 在本文示例代码中,我们使用了简洁HTML结构和CSS样式,使得页面呈现出一种清晰而美观视觉效果。...而JavaScript则负责控制游戏逻辑和交互。通过监听按钮点击事件和切换文本内容,我们可以实现游戏情节展开和选择切换。...default: break; } } 在代码中,我们定义了一个标题和两个容器,分别用于展示故事文本和按钮选择...初始状态下,故事文本显示为"欢迎来到文字冒险游戏!",而按钮上显示是"开始"。当点击按钮时,startGame()函数将被调用,进而触发游戏开始。

55810

JavaScript使用前言

前言: JavaScript作为使用得最多脚本语言,可以说是无处不在。所有主流浏览器都支持JavaScript。目前,全世界大部分网页都使用JavaScript。它可以网页呈现各种动态效果。...直接alert("在此输入弹窗内容")即可。我们经常用该方法来调试js代码。 8、confirm消息对话框: confirm 消息对话框通常用于允许用户做选择动作,如:“你对吗?”等。...(2) 文本节点:向用户展示内容,如...中JavaScript、DOM、CSS等文本。     ...--通过TagName获取--> 2、innerHTML 属性: innerHTML 属性用于获取或替换 HTML 元素内容。...node.lastChild;// 获取到是最后一个li 对于节点操作还有: 访问兄弟节点、插入节点、删除节点、替换节点、替换元素节点、创建元素节点、创建文本节点等

2.6K20

Vue源码之mustache模板引擎(一)

es6 之前使用 mustache 众所周知,es6 之前是没有模板字符串(反引号)。那么方便使用 mustache 呢? 当然,可以使用上面的数组 join 法,不过,还有一个更方便方法。...该正则所匹配内容会被第二个参数返回值替换掉。 substr (pattern):一个将被 newSubStr 替换 字符串。其被视为一整个字符串,而不是一个正则表达式。...仅第一个匹配项会被替换。 newSubStr (replacement):用于替换掉第一个参数在原字符串中匹配部分字符串。该字符串中可以内插一些特殊变量名。参考使用字符串作为参数。...()把要捕获内容包起来,然后通过 replace方法函数参数中 p1 参数获取捕获内容,既然如此,那就可以开始使用正则表达式实现简单 mustache 了。...dom 字符串 tokens 是什么 tokens 是一个嵌套数组,也可以说是模板字符串 JS 表示。

99830

JavaScript学习笔记

全局变量和局部变量 **全局变量:在js页面标签中定义一个变量,这个变量在页面中js部分都可以使用 - 在方法外部使用,在方法内部使用,在另一个Script标签使用 **局部变量:在方法内部定义一个变量...* 可以使用js里面的dom对象进行操作 *** 想要对标记性超文本文档进行操作,首先需要对标记性超文本型文档里面所有的内容封装成对象 --需要把html里面的标签、属性、文本内容封装成对象 *** 解析过程...replaceChild方法:通过父节点进行替换 十七.innerHTML属性 * 这个属性不是dom树组成部分,但是大多数浏览器都支持属性 第一个作用:获取文本内容 haha //获取span...标签 var span1=document.getElementById("spanid"); //获取标签文本内容 alert(span1.innerHTML); 第二个作用:向标签里面设置内容(可以是...("divid"); //向div1标签里面设置内容(可以是HTML代码) div1.innerHTML=" hehehe "; * 案例 * 得到当前时间 var date =new date();

1.7K20

XSS 攻击与防御

因此,不要过度使用 innerHTML 方法,在使用前应考虑一下会不会对程序造成危害。如果一个用户输入内容直接由 innerHTML 操办,那很可能是危险。...如果仅是展示纯文字内容,不展示富文本,应使用 innerText 或者 textContent,这可以避免 XSS 攻击。...黑名单过滤 黑名单过滤就是不让某些标签或属性出现在富文本中。我们可以利用正则匹配,将匹配到内容替换掉。 var xssFilter = function(html){ if(!...当 whiteList 值是一个空数组时,表示去除所有的 HTML 标签,只保留文本内容。...这个头用于检测和减轻用于 Web 站点特定类型攻击,例如 XSS 和数据注入等。设定这个头可以过滤跨域文件,比如只允许本站脚本被浏览器接收,而别的域脚本会失效,不被执行。

3.9K20

【技术创作101训练营】innerHTML插入运行js字符串问题探究

但是这就遇到了一个问题, jsp里引入js库以及一些js代码就无法运行了, 所以就探索了一下innerHTML以及解析js一些方法 1. innerHTML介绍 有两个功能, 一个是可以获取指定DOM...HTML元素, 另一个就是替换指定DOMHTML元素 2. innerHTML插入js会发生什么 什么也不会发生, 因为用 innerHTML 插入文本到网页中有可能成为网站攻击媒介,从而产生潜在安全风险问题...firefox 先将被插入 HTML 代码元素从其父元素中移除,然后使用innerHTML插入包含SCRIPT元素代码,最后将这个元素恢复至原父元素中,则经过此操作后SCRIPT中脚本可以被执行。...Array = [] // 存放scriptsrc中js文件地址 4.2 工具方法 清空数组方法, 用于清楚缓存数据; 创建guid方法用于区别创建script标签对象 /*...属性用来存放解析出来js脚本, src用于存放解析出来外部js脚本文件地址 const htmlArr: Array = html.split(//i) let

1.2K00

JS之文档对象模型DOM

,标签内部文本内容成为文本节点 注意:属性节点,它不属于DOM树形结构,不属于任何节点父节点,也不属于任何节点子节点 ,属性节点依附于元素节点上 一种附加节点 【上面代码 产生6个元素节点,5个属性节点...,9个文本节点】 HTML 本身也是 XML,所有可以使用XML DOM API规范 DOM Element DOM Attr DOM Text DOM Document HTML DOM是对XML DOM...扩展, HTML DOM比XML DOM 开发JS来说更加简单方便!... ②:获得node后 如果node是元素,去操作里面的文本内容 innerHTML (HTML页面内所有元素,一定是HTML 元素,innerHTML 是所有HTML元素通用属性 ) XML...(true); 该方法可以返回一个节点克隆节点, 克隆节点包含原节点属性和子元素 此节内容有大量练习,建议大家做写,增强代码熟练度。

3.3K60

探索在网页中使用“标注”

笔者思路是:当用户鼠标“抬起”时,去判断有没有选中文本,如果没有则啥事没有、反之则要将这一部分选中文本替换成标签!...replaceSelectedStrByEle(txt,selectStr,'nite-writer-pen') } } 这里 window.getSelection() 是浏览器API,专门用于获取用户选中文本...我建议,在点击页面其余空白地方时改变状态 —— 因为为了更好体验,上面选中使用mouseup:这里涉及到一个“浏览器事件触发优先级”。你可以文本处于“高zIndex区域”、或者用JS去隔离。...对这个才是大问题:你这里可能“理所应当”想到了“把元素标签去掉不就完了”,这里你可以尝试一下,可不是一件简单事。...辗转了一上午,想到了一个“取巧方法”:因为选中文本已经是一个dom了,将选中文本都转化为string,然后再用字符串替换替换掉父p标签innerText内容相同之处!

56330

【一起来烧脑】一步学会JavaScript体系

document.write() 将内容写到HTML文档中 innerHTML写入到HTML元素 console.log()写到控制台 document.getElementById("myDIV...运算符“+”用于加值。 比较运算符 比较运算符在逻辑语句中使用,以测定变量或值是否相等。...非数字值 字符串 在字符串中查找字符串 indexOf() 来定位字符串中某一个指定字符首次出现位置 内容匹配 match()函数用来查找字符串中特定字符 返回这个字符 替换内容 replace...() 方法在字符串中用某些字符替换另一些字符 toUpperCase() 或者toLowerCase() charAt() 返回在指定位置字符 charCodeAt() 返回在指定位置字符...Unicode 编码 concat() 连接字符串 fixed() 以打字机文本显示字符串 fontcolor() 使用指定颜色来显示字符串 fontsize() 使用指定尺寸来显示字符串

1.2K20

Vue学习

} }) 作用范围:作用于el选项命中标签内部 建议使用id选择器 适用于大多数双标签(html...> v-text指令作用是:设置标签内容(textContent) 默认书法会替换全部内容使用差值表达式{{}}可以替换指定内容 v-html <h3...内容中有html结构会解析为标签 v-text指令无论是什么内容都会解析为文本 解析文本使用v-text,需要解析html结构使用v-html v-on <input...指令作用是:根据数据生成列表结构 数组经常和v-for结合使用 语法是(item,index) in数据 item和index可以结合其他指令一起使用 数组长度更新会同步到页面上,是响应式 v-on...,简写为@ 方法中通过this,关键字获取data中数据 v-text指令作用是:设置元素文本值,简写为{{}} v-html指令作用是:设置元素innerHTML 记录本 <div id="

1.1K00

04_使用JS完成功能

向页面指定位置写入内容innerHTML */ 第一步:确定事件(给出提示信息使用聚焦事件,给出校验结果信息使用离焦事件)并为其绑定函数 第二步:聚焦事件绑定函数中(获取span给出提示信息...) 第三步:离焦事件绑定函数中(获取用户输入内容进行判断) 第四步:如果失败,在span位置给出错误提示信息,如果成功,span内容为空。...onchange:当用户改变内容时候使用这个事件(二级联动) 7.使用JS完成全选和选不选操作 技术分析 确定事件(鼠标单击事件onclick),事件绑定到编号前面的复选框里面 获取编号前面的复选框状态...JS完成省市二级联动 技术分析 事件(onchange) 使用一个二维数组来存储省份和城市(二维数组创建?)...获取用户选择省份(使用方法传参方式:this.value) 遍历数组(获取省份与用户选择省份比较,如果相同了,继续遍历该省份下所有的城市) 创建文本节点和元素节点并进行添加操作 createTextNode

3.9K60

JavaScript基础

/编写js代码 将代码编写到外部js文件中,然后通过标签将其引入 script标签一旦用于引入外部文件了,就不能在编写代码了,即使编写了浏览器也会忽略 ,如果需要则可以在创建一个新...) // 2 innerHTML:获取元素内容 innerText:获取元素内部文本内容 var shanxi = document.getElementById("shanxi"); var parentNode...= shanxi.parentNode; // 获取元素内容 console.log(parentNode.innerHTML) // 获取元素内部文本内容 console.log(parentNode.innerText...createTextNode() :创建文本节点。 appendChild():把新子节点添加到指定节点。 removeChild():删除子节点。 replaceChild():替换子节点。...,作用和直接修改location一样 reload() 用于重新加载当前页面,作用和刷新按钮一样,如果在方法中传递一个true,作为参数,则会强制清空缓存刷新页面 replace() 可以使用一个新页面替换当前页面

2K20

BOM和DOM

我们可以根据返回true和false来判断一下,然后根据这个值来使用location去跳转对应网站。 提示框(了解即可)     提示框经常用于提示用户在进入页面前输入某个值。     ...是父级标签,然后找到这个父标签里面的要被替换子标签,然后用新标签将该子标签替换掉 属性节点       获取文本节点值: var divEle = document.getElementById(..."d1") divEle.innerText #输入这个指令,一执行就能获取该标签和内部所有标签文本内容 divEle.innerHTML #获取是该标签内所有内容,包括文本和标签       ...,是不是应该应用在用户某些操作上啊,如果你用户点击了某个内容它变变颜色之类,给用户一些好看效果或者指示效果啊,所以这就要和我们下面要学事件结合起来要做事情,通过事件+上面的样式修改来实现...onselect 在文本框中文本被选中时发生。 onsubmit 确认按钮被点击,使用对象是form。

53110

从零搭建一个 webpack 脚手架工具(四)

webpack 配置文件中 use 数组第一个 loader 应该返回一个 JS 脚本(字符串格式 JS 脚本),因此 style-loader 需要这么做。...我们就需要想办法将源码中 url() 字符串提取出来,然后给路径做替换。再把替换路径插入到源码中。 先说一下 JavaScript 正则表达式中一个方法:exec。这个方法很强大。...此数组第 0 个元素是与正则表达式相匹配文本,第 1 个元素是与 RegExpObject 第 1 个子表达式相匹配文本(如果有的话),第 2 个元素是与 RegExpObject 第 2 个子表达式相匹配文本...数组第一项正则表达式匹配文本,而第二项匹配是正则表达式中 (.+?) 中内容。...(u)前面的那个字符索引 let last = reg.lastIndex - matchUrl.length; // 将 url() 字符串前面的内容添加到数组

77710

前端day13-JS(WebApi)学习笔记(attribute语法、DOM节点操作)

1.1-innerText与innerHTML 作用完全不同(知识有些类似) 类似点:获取到都是string类型字符串 innerText:获取元素文本 innerHTML:获取元素内容...:获取元素文本(包含子标签文本) console.log(box.innerText); //覆盖原来内容,innerText:会把所有的内容都当成文本,无法解析标签...'); 用attribute方式设置属性只能使用attribute方式来获取 2.注意点 js点语法能获取到属性: (1)行内标准属性 (2)js点语法动态添加自定义属性 不能获取到属性: (1...3.1-DOM节点介绍 1.什么是节点:在HTML文档中,一切皆节点(HTML文档本身、标签、属性、注释内容文本) 2.什么是元素:元素在HTML中叫做标签,在JSdom对象中称为元素(可以理解为标签面向对象叫法...2.innerHTML:创建元素过多时(100以内可以忽略),会损耗性能 解析字符串识别标签 直接赋值 元素.innerHTML替换原本内容,如果不想替换使用 += 拼接 3.document.createElement

3.1K11
领券