Welcome to Riddle Escape!
You find yourself in a room with no apparent way out. However, there seems to be a series of clues hidden in the source code of this page...
以下は、JavaScriptのevalや他のサイトへの遷移、リダイレクトなどのセキュリティ脆弱性がない、1つのHTMLファイルで実装した謎解き脱出ゲームの例です。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Riddle Escape</title>
</head>
<body>
<div id="game">
<h1>Welcome to Riddle Escape!</h1>
<p>You find yourself in a room with no apparent way out. However, there seems to be a series of clues hidden in the source code of this page...</p>
</div>
<script>
// Set up initial variables
var currentRiddle = 0;
var numRiddles = 3;
var riddles = [
{
clue: "What has a head, a tail, is brown, and has no legs?",
answer: "a penny"
},
{
clue: "I am not alive, but I grow; I don't have lungs, but I need air; I don't have a mouth, but I need water to live. What am I?",
answer: "fire"
},
{
clue: "What is blue and smells like red paint?",
answer: "blue paint"
}
];
// Start the game
showRiddle();
// Define functions for showing and checking riddles
function showRiddle() {
if (currentRiddle < numRiddles) {
document.getElementById("game").innerHTML += "<p>Riddle #" + (currentRiddle + 1) + ": " + riddles[currentRiddle].clue + "</p>";
document.getElementById("game").innerHTML += "<input type='text' id='answer'>";
document.getElementById("game").innerHTML += "<button onclick='checkAnswer()'>Submit Answer</button>";
} else {
document.getElementById("game").innerHTML += "<h2>Congratulations! You solved all the riddles and escaped!</h2>";
}
}
function checkAnswer() {
var playerAnswer = document.getElementById("answer").value.toLowerCase();
if (playerAnswer == riddles[currentRiddle].answer) {
document.getElementById("game").innerHTML += "<p>Correct!</p>";
currentRiddle += 1;
showRiddle();
} else {
document.getElementById("game").innerHTML += "<p>Sorry, that's incorrect. Try again!</p>";
}
}
// Hide the source code from being viewed by curious players
console.log("I'm sorry, but viewing the source code won't help you solve the riddles. Keep playing!");
console.log("Although, if you really want a hint, try looking in your browser's developer tools for clues...");
</script>
</body>
</html>
```
この脱出ゲームは、3つの謎を解いて進んでいくものです。最初に、プレイヤーはriddles配列内の最初の謎を表示されます。プレイヤーが回答を入力し、回答が正解であれば、次の謎が表示されます。すべての謎が正解であれば、プレイヤーは脱出できたことになります。
このゲームは、evalや他のサイトへの遷移、リダイレクトなどのセキュリティ脆弱性がありません。また、alertを使用せず、セキュリティを維持しています。ゲームの進行状況を隠すために、console.logが使用されています。
このゲームには、ジョーク的な要素も含まれています。プレイヤーには明示的なヒントやサポートは与えられませんが、彼らが自分自身で見つけたヒントを使用して謎を解く必要があります。同時に、プレイヤーの好奇心を刺激するため、開発者はブラウザ開発ツールにヒントが隠されていることを示唆しています。