Mystery Game: HTML Interactive Puzzle
<html>
<head>
<title>Mystery Game: HTML Interactive Puzzle</title>
</head>
<body>
<h1>Mystery Game</h1>
<p> Welcome to Mystery Game! </p>
<p> Your goal is to solve the mystery. </p>
<p> Click on the buttons below to investigate different parts of the mystery. </p>
<p><button id='area1'>Area 1</button>
<button id='area2'>Area 2</button>
<button id='area3'>Area 3</button>
<button id='area4'>Area 4</button></p>
<div id='area1-content' style='display:none;'>
<h2>Area 1</h2>
<p>You find a clue in this area.</p>
</div>
<div id='area2-content' style='display:none;'>
<h2>Area 2</h2>
<p>You find another clue in this area.</p>
</div>
<div id='area3-content' style='display:none;'>
<h2>Area 3</h2>
<p>You find yet another clue in this area.</p>
</div>
<div id='area4-content' style='display:none;'>
<h2>Area 4</h2>
<p>You find the final clue in this area.</p>
</div>
<script>
document.getElementById('area1').onclick = function() {
document.getElementById('area1-content').style.display = 'block';
};
document.getElementById('area2').onclick = function() {
document.getElementById('area2-content').style.display = 'block';
};
document.getElementById('area3').onclick = function() {
document.getElementById('area3-content').style.display = 'block';
};
document.getElementById('area4').onclick = function() {
document.getElementById('area4-content').style.display = 'block';
};
</script>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/lniU 著作权归作者所有。请勿转载和采集!