Question

我正在使用Javascript开发一款基于文本的简单游戏。我的想法是为事件创建一个类，该类具有标题属性，文本属性和下一事件数组。我无法让下一个活动部分正常工作。这是我的代码：

console.log('script starting')

let title = document.getElementById("title")
let text = document.getElementById("text")
let options = document.getElementById("options")

class gameEvent{
    constructor(name,text,next){
        this.name = name
        this.text = text
        this.next = next
    }
    display(title,element,options){
        title.innerHTML = this.name
        element.innerHTML = this.text

        options.innerHTML = ""
        if(this.next.length != 0){
            for(let i = 0; i < this.next.length; i++){
                options.innerHTML += `<button>${this.next[i].name}</button>`
            }
        }
    }
}

var start = new gameEvent("The game is starting","You wake up and notice that the game has started",[
    {
        "name":"Left-Button",
        "gameEvent":left
    },
    {
        "name":"Right-Button",
        "gameEvent":right
    }
])

var left = new gameEvent("You choose the button on the left", "This is just a test, nothing actually goes here",{})

var right = new gameEvent("You choose the button on the right", "This is a test and you chhose the button on the right",{})

start.display(title,text,options)

<!DOCTYPE html>
<html>
    <head>
        <title>A Simple Text Based Game</title>
        <link rel = 'stylesheet' href = '/style'/>
    </head>
    <body>
        <h1>Welcome to this simple text-based game!</h1>
        <div id="main">
            <h2 id="title">
                This is where the main text goes for the game.
            </h2>
            <p id="text">
                If you are seeing this something has gone wrong.
            </p>
            <div id="options">
                The option for things you can do next go here.
            </div>
        </div>
    </body>
    <script src = '/script'></script>
</html>

我尝试了各种不同的方法，但是我需要在以下行的javascript文档中的button元素中放置哪些内容：options.innerHTML + = <button>${this.next[i].name}</button>，以使gameEvent运行？

Answer 1

我只是通过更改来更新您的代码，希望对您有所帮助。谢谢

let title = document.getElementById("title")
let text = document.getElementById("text")
let options = document.getElementById("options")

let eventName = document.getElementById("eventName")
let eventText = document.getElementById("eventText")
let eventOptions = document.getElementById("eventOptions")

class gameEvent{
    constructor(name,text,next){
        this.name = name
        this.text = text
        this.next = next
    }
    display(title,element,options){
        title.innerHTML = this.name
        element.innerHTML = this.text

        options.innerHTML = ""
        if(this.next.length != 0){
            for(let i = 0; i < this.next.length; i++){
                options.innerHTML += `<button onclick="${this.next[i].method}()">${this.next[i].name}</button>`
            }
        }
    }
}

var start = new gameEvent("The game is starting","You wake up and notice that the game has started",[
    {
        "name":"Left-Button",
        "method":"leftButton",
        "gameEvent":left
    },
    {
        "name":"Right-Button",
        "method":"rightButton",
        "gameEvent":right
    }
])

var left = new gameEvent("You choose the button on the left", "This is just a test, nothing actually goes here",{})

var right = new gameEvent("You choose the button on the right", "This is a test and you chhose the button on the right",{})

function leftButton(){
  eventName.innerHTML = left.name;
  eventText.innerHTML = left.text;
  eventOptions.innerHTML = left.next;
}

function rightButton(){
  eventName.innerHTML = right.name;
  eventText.innerHTML = right.text;
  eventOptions.innerHTML = right.next;
}

start.display(title,text,options)

<!DOCTYPE html>
<html>
    <head>
        <title>A Simple Text Based Game</title>
        <link rel = 'stylesheet' href = '/style'/>
    </head>
    <body>
        <h1>Welcome to this simple text-based game!</h1>
        <div id="main">
            <h2 id="title">
                This is where the main text goes for the game.
            </h2>
            <p id="text">
                If you are seeing this something has gone wrong.
            </p>
            <div id="options">
                The option for things you can do next go here.
            </div>
        </div>
        <ul>
          <li>Name: <span id="eventName"></span></li>
          <li>Text: <span id="eventText"></span></li>
          <li>Option: <span id="eventOptions"></span></li>
        </ul>
    </body>
    <script src = '/script'></script>
</html>

基于文本的简单游戏，无法更新文本

1 个答案: