adnjoo/index.css

## index.css
#maintext {
  font-family: Helvetica;
  font-size: 32px;
}

## index.html
<!DOCTYPE html>
<html>
  <head>
    <link href="index.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div id='maintext'>You wake up groggy in a dark room.</div>
    <img id ='image' src=''>
    <br><br>
    <button onclick='myFunction()'>Click me!</button>
    <script src="index.js"></script>
  </body>
</html>

## index.js
var counter = 0;
var responses = ['You find a key on the desk','And open the door with it','Holy s*$& it\'s an ugly @$$ monster', 'You slay the monster', 'Good Job GG','','','','','','What do you want you win already']

function myFunction (){
  console.log(counter)
  document.getElementById('maintext').innerHTML=responses[counter]
  if (counter==2) {
  document.getElementById('image').src='https://i.imgur.com/CSnJ3jv.png'
  }
  else if (counter ==3) {
    document.getElementById('image').src=''
  }
  else if(counter==5) {
    window.alert('ok you win')
  }
  else if(counter==20) {
    counter=-1;
  }
  counter++
}
	<!DOCTYPE html>
	<html>
	<head>
	<link href="index.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
	<div id='maintext'>You wake up groggy in a dark room.</div>
	<img id ='image' src=''>
	<br><br>
	<button onclick='myFunction()'>Click me!</button>
	<script src="index.js"></script>
	</body>
	</html>
	var counter = 0;
	var responses = ['You find a key on the desk','And open the door with it','Holy s*$& it\'s an ugly @$$ monster', 'You slay the monster', 'Good Job GG','','','','','','What do you want you win already']

	function myFunction (){
	console.log(counter)
	document.getElementById('maintext').innerHTML=responses[counter]
	if (counter==2) {
	document.getElementById('image').src='https://i.imgur.com/CSnJ3jv.png'
	}
	else if (counter ==3) {
	document.getElementById('image').src=''
	}
	else if(counter==5) {
	window.alert('ok you win')
	}
	else if(counter==20) {
	counter=-1;
	}
	counter++
	}