Я пытаюсь сделать игровой симулятор наподобие игры Voltage просто для удовольствия, он состоит из 4 основных компонентов, включая фон, изображение персонажа, имя персонажа и текст. Я хочу создать большую функцию startStory (), в которой есть меньшие функции для представления различных частей истории.
Как это работает, когда пользователь нажимает на игровой экран, текст / имя персонажа / изображение / фон будут меняться, чтобы создать историю для пользователей. Но когда я попытался создать функцию startStory () и попытался запустить в ней внутреннюю функцию, ничего не произошло.
Может кто-нибудь помочь мне объяснить, почему? И вы думаете, что делать разные части истории меньшим кодом - хорошая идея, или я должен сделать что-то еще? Вот мой код до сих пор
<style>
* {
margin: 0;
padding: 0;
font-family: 'Lora', serif;
}
.container {
top: 10px;
margin: 0 auto;
width: 70vw;
position: relative;
}
.background {
width: 70vw;
position:absolute;
top: 0px;
left: 0px;
z-index: 1;
border: 2px solid black;
}
.character {
width: 15vw;
position:absolute;
left: 400px;
top: 120px;
z-index: 2;
}
.label {
border: 2px solid black;
background-color: white;
padding: 30px;
position:absolute;
top: 400px;
left: 40px;
z-index: 2;
}
.text {
width: 60vw;
border: 2px solid black;
background-color: white;
padding: 30px;
position:absolute;
top: 470px;
left: 40px;
z-index: 2;
text-align: center;
}
</style>
<body>
<div class="container">
<img class="background" src="https://img.wallpapersafari.com/desktop/1920/1080/48/39/DtNh51.jpg">
<img class="character" src="https://www-en.voltage.co.jp/wp-content/uploads/sites/3/2019/07/190704_voltage_press2.jpg">
<div class="label">Leon</div>
<div class="text">Hi there</div>
</div>
</body>
<script>
var container = document.getElementsByClassName('container')[0];
var textHolder = document.getElementsByClassName('text')[0]
container.addEventListener('click', startStory)
function startStory() {
function introduceCharacter() {
textHolder.innerHTML = 'I\'m Leon. What\'s your name?';
}
}
</script>