Блог

В настоящее время я работаю над текстовым приключением. Я хочу добавить панель здоровья и углубиться в ваш ответ, вы теряете жизнь или получаете жизнь. Но я совершенно потерян. Вы можете найти первую часть моего кода JS ниже. У кого-нибудь есть простое решение? Должен ли я объявить об этом заранее ? И я думаю, что мне нужна другая функция. Но как это реализовать в сценариях?

 var images = document.getElementById("images"); //This is the variable that refers to the image being inserted into the program
var text = document.getElementById("text"); //This is the variable that refers to the text below the image 
var buttonBox = document.getElementById('buttonBox'); //This is the variable that refers to the button box in the program 
var input = document.getElementById('input'); //This is the input of the program
var player; //This is the player 



input.onkeypress = function(event) { //This is the input on the splash screen for the video game 
  if (event.key == "Enter" || event.keyCode == 13) {
    player =  input.value;
    input.parentNode.removeChild(input);
    advanceTo(scenario.two);
  }
};


var changeText = function(words) { //This changes a certain phrase into the character name that the user has entered
  text.innerHTML = words.replace("NAME", player);
};

var changeImage = function(img) { //This transitions the images in the text adventure. 
  images.style.backgroundImage = ("url("   img   ")");
};

var changeButtons = function(buttonList) { //This transitions the buttons in the text adventure. 
  buttonBox.innerHTML = "";
  for (var i = 0; i < buttonList.length; i  ) {
    buttonBox.innerHTML  = "<button onClick=" buttonList[i][1] ">"   buttonList[i][0]   "</button>";
  }
};

var advanceTo = function(s) {
  changeImage(s.image);
  changeText(s.text);
  changeButtons(s.buttons);
  
};

//We've created multiple story arces with multiple endings for this game. Please note this can be easily extended and changed if needed by other people. This is pratically a template for any text adventure made in HTML5 and JS. The current setup has 4 different endings completely!
scenario = {};
var scenario = {
  one: {
    image: 'platzhalter.png', // IntroFirst situation, picture of teacher
    text: "Begib dich auf eine Reis zurück ins 14. Jahrhundert und stelle dein Wissen unter Beweis. Stelle dich einem Abendteuer! Verrätst du uns noch deinen Namen? Das Abenteuer beginnt, sobald du Enter drückst!",
  },
  two: {
    image: 'platzhalter.png', //This is the classroom. The first choice you will have to make in this game.
    text: "NAME, Stell’ dir vor, wir haben das Jahr 1348 und die Pest fängt gerade an, sich in Europa auszubreiten. Du kommst mit deiner Familie in Europa an, und versuchst deine Liebsten bestmöglich vor einer Infektion zu schützen. Ihr wollt euch hier sesshaft machen, doch es ist noch unklar, wo genau ihr eure neue Heimat wählt. Wo würdest du zur Zeit der Pest am liebsten leben?",
    buttons: [["In einer Hafenstadt", "advanceTo(scenario.twelve)"],["In einer Handelsstadt", "advanceTo(scenario.twenty)"],["Auf einem Schiff", "advanceTo(scenario.fourtytwo)"],["Abgelegen in den Bergen", "advanceTo(scenario.three)"]],
  },
  three: {
    image: 'platzhalter.png',
    text: "Abgelegen in den Bergen also? Das war eine kluge Wahl! Solange die Nahrungsmittel nicht ausgingen, war das sicher der Beste Ort, um zu Leben. Umso abgeschotteter der Wohnort, umso schwerer fand die Pest einen Weg dorthin. Bist du bereit weiter zu machen?",
    buttons: [["Ja", "advanceTo(scenario.four)"], ["Nein", "advanceTo(scenario.thirtynine)"]]
  },