Da der Quellcode sicherlich eine gute Ausgangsbasis für die Programmierung ähnlicher Spiele oder für Verbesserungen darstellt:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Guess the Code</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
h1 {
margin-top: 50px;
}
form {
margin-top: 20px;
}
input[type="text"],
input[type="number"] {
padding: 8px;
font-size: 16px;
}
input[type="submit"] {
padding: 8px 16px;
font-size: 16px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #45a049;
}
#feedback {
margin-top: 20px;
font-size: 18px;
}
#revealButton {
margin-top: 20px;
font-size: 16px;
background-color: #008CBA;
color: white;
border: none;
cursor: pointer;
}
#startNewButton {
margin-top: 20px;
font-size: 16px;
background-color: #f44336;
color: white;
border: none;
cursor: pointer;
}
#guesses {
text-align: left;
font-size: 14px;
margin-top: 10px;
}
#guessForm {
display: inline-block;
}
#instructions {
margin-top: 20px;
font-style: italic;
}
#inputButtons {
margin-top: 10px;
}
</style>
</head>
<body>
<form id="inputButtons">
<label
for="mode">Modus:</label>
<select id="mode">
<option
value="numbers">Zahlen</option>
<option
value="letters">Buchstaben</option>
</select>
<label
for="codeLength">Codelänge:</label>
<input type="number"
id="codeLength" min="1">
<input type="submit"
value="Start">
</form>
<form
id="languageForm">
<label
for="language">Sprache:</label>
<select id="language">
<option value="de"
selected>Deutsch</option>
<option
value="en">English</option>
</select>
<input type="submit"
value="Change">
</form>
<div
id="instructions">
<p>Erlebe eine moderne Interpretation des klassischen Spiels
Super-Sonic Electronic Mastermind! Teste deine Fähigkeiten in diesem
aufregenden Zahlenspiel, das die traditionelle Codeknackerei auf ein neues
Level bringt. Mit der erweiterten Codelänge bietet dieses Spiel eine noch
größere Herausforderung für deine Denkfähigkeiten.</p>
<p>Tüftle an deinen Strategien, um den geheimen Code zu knacken
und deine mentale Stärke zu beweisen. Bei jedem Rätsel wirst du Feedback
erhalten, das dir hilft, deine nächsten Schritte zu planen. Ein 'richtiger'
Tipp bedeutet, dass ein Zeichen an der richtigen Position steht, während ein
'halbrichtiger' Tipp anzeigt, dass ein Zeichen im Code vorkommt, aber an einer
anderen Position ist.</p>
<p>Verbessere deine Logik und dein Problemlösungsvermögen, während
du dich durch die verschiedenen Schwierigkeitsstufen arbeitest. Fordere deine
Freunde heraus und sieh, wer am besten ist, wenn es darum geht, das ultimative
Geheimnis zu enthüllen. Genieße stundenlangen Spaß und Herausforderungen mit
diesem modernen Twist des zeitlosen Klassikers!</p>
</div>
<div
id="gameContainer" style="display: none;">
<form
id="guessForm">
<label for="guessInput" id="guessLabel">Enter
your guess:</label>
<input type="text"
id="guessInput" required>
<input type="submit"
value="Submit Guess">
</form>
<div
id="feedback"></div>
<button
id="revealButton" onclick="revealSolution()">Reveal
Solution</button>
<button
id="startNewButton" onclick="startNewGame()">Start
New</button>
<div
id="guesses"></div>
</div>
<script>
var secretCode;
var numDigits;
var guessCount = 1;
var language = 'de';
var mode = 'numbers';
document.getElementById("inputButtons").addEventListener("submit",
function(event) {
event.preventDefault();
numDigits =
document.getElementById("codeLength").value;
mode =
document.getElementById("mode").value;
startGame();
});
document.getElementById("languageForm").addEventListener("submit",
function(event) {
event.preventDefault();
language =
document.getElementById("language").value;
updateLanguage();
});
function startGame() {
document.getElementById("instructions").style.display =
"none";
document.getElementById("inputButtons").style.display
= "none";
document.getElementById("languageForm").style.display =
"none";
document.getElementById("gameContainer").style.display =
"block";
secretCode =
generateSecretCode(numDigits, mode);
updateLanguage(); //
Update language for game elements
}
function generateSecretCode(length,
mode) {
var code = "";
var characters = mode === 'numbers'
? '0123456789' : 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
for (var i = 0; i < length; i++) {
code +=
characters.charAt(Math.floor(Math.random() * characters.length));
}
return code;
}
function updateLanguage() {
var instructions = document.getElementById("instructions");
var guessLabel =
document.getElementById("guessLabel");
var guessSubmit =
document.querySelector("#guessForm input[type='submit']");
var revealButton =
document.getElementById("revealButton");
var startNewButton =
document.getElementById("startNewButton");
if
(language === 'de') {
instructions.innerHTML = "<p>Erlebe eine moderne
Interpretation des klassischen Spiels Super-Sonic Electronic Mastermind! Teste
deine Fähigkeiten in diesem aufregenden Zahlenspiel, das die traditionelle
Codeknackerei auf ein neues Level bringt. Mit der erweiterten Codelänge bietet
dieses Spiel eine noch größere Herausforderung für deine
Denkfähigkeiten.</p><p>Tüftle an deinen Strategien, um den geheimen
Code zu knacken und deine mentale Stärke zu beweisen. Bei jedem Rätsel wirst du
Feedback erhalten, das dir hilft, deine nächsten Schritte zu planen. Ein
'richtiger' Tipp bedeutet, dass ein Zeichen an der richtigen Position steht,
während ein 'halbrichtiger' Tipp anzeigt, dass ein Zeichen im Code vorkommt,
aber an einer anderen Position ist.</p><p>Verbessere deine Logik
und dein Problemlösungsvermögen, während du dich durch die verschiedenen
Schwierigkeitsstufen arbeitest. Fordere deine Freunde heraus und sieh, wer am
besten ist, wenn es darum geht, das ultimative Geheimnis zu enthüllen. Genieße
stundenlangen Spaß und Herausforderungen mit diesem modernen Twist des
zeitlosen Klassikers!</p>";
guessLabel.textContent = "Gib deinen Tipp ein:";
guessSubmit.value = "Tipp einreichen";
revealButton.textContent
= "Lösung anzeigen";
startNewButton.textContent = "Neues Spiel starten";
} else {
instructions.innerHTML =
"<p>Experience a modern interpretation of the classic game
Super-Sonic Electronic Mastermind! Test your skills in this exciting number
game that takes traditional code-breaking to a new level. With the extended
code length, this game offers an even greater challenge for your thinking
skills.</p><p>Tinker with your strategies to crack the secret code
and prove your mental strength. With each puzzle, you'll receive feedback to
help you plan your next moves. A 'correct' guess means a character is in the
right position, while a 'semi-correct' guess indicates a character is in the
code but in a different position.</p><p>Improve your logic and
problem-solving abilities as you work through the various difficulty levels.
Challenge your friends and see who's the best when it comes to revealing the
ultimate secret. Enjoy hours of fun and challenges with this modern twist on
the timeless classic!</p>";
guessLabel.textContent =
"Enter your guess:";
guessSubmit.value =
"Submit Guess";
revealButton.textContent =
"Reveal Solution";
startNewButton.textContent =
"Start New";
}
}
function playSuccessSound() {
var audioContext = new
(window.AudioContext || window.webkitAudioContext)();
var oscillator =
audioContext.createOscillator();
oscillator.type = 'sine';
oscillator.frequency.setValueAtTime(1000, audioContext.currentTime);
oscillator.connect(audioContext.destination);
oscillator.start();
setTimeout(function() {
oscillator.stop();
},
1500); // Der Ton wird für 1,5 Sekunden abgespielt
}
function
evaluateGuess() {
var
guess = document.getElementById("guessInput").value.toUpperCase();
if (guess.length !==
parseInt(numDigits)) {
alert(language === 'de' ? "Die Eingabe muss " + numDigits + "
Zeichen lang sein." : "The input must be " + numDigits + "
characters long.");
return;
}
var
correctCount = 0;
var
semiCorrectCount = 0;
var
secretCodeCharacters = Array.from(secretCode);
var
guessCharacters = Array.from(guess);
// Count correct
characters
for (var i = 0; i <
parseInt(numDigits); i++) {
if (guessCharacters[i] ===
secretCodeCharacters[i]) {
correctCount++;
// Mark the correct
character in both arrays as 'null' to avoid counting it again
secretCodeCharacters[i] =
null;
guessCharacters[i] = null;
}
}
// Count semi-correct characters
for (var i = 0; i <
parseInt(numDigits); i++) {
if (guessCharacters[i] !==
null) {
var index =
secretCodeCharacters.indexOf(guessCharacters[i]);
if (index !== -1) {
semiCorrectCount++;
// Mark the
semi-correct character in the secret code array as 'null' to avoid counting it
again
secretCodeCharacters[index] = null;
}
}
}
var feedback = (language === 'de' ?
"Tipp " : "Guess ") + (guessCount < 10 ? "0" :
"") + guessCount + ": " + guess +
" " + correctCount + " |
" + semiCorrectCount;
document.getElementById("feedback").innerHTML
= feedback;
guessCount++;
if (correctCount ===
parseInt(numDigits)) {
document.getElementById("feedback").innerHTML +=
"<br>" + (language === 'de' ? "Herzlichen Glückwunsch! Sie haben den richtigen Code
erraten." : "Congratulations! You guessed the correct code.");
playSuccessSound();
}
document.getElementById("guessInput").value = "";
document.getElementById("guesses").innerHTML += feedback +
"<br>";
}
function
revealSolution() {
document.getElementById("feedback").innerHTML = (language ===
'de' ? "Lösung: " : "Solution: ") + secretCode;
document.getElementById("guesses").innerHTML += (language ===
'de' ? "Lösung angezeigt" : "Solution Revealed") +
"<br>";
}
function
startNewGame() {
document.getElementById("instructions").style.display =
"block";
document.getElementById("inputButtons").style.display =
"block";
document.getElementById("languageForm").style.display =
"block";
document.getElementById("gameContainer").style.display =
"none";
document.getElementById("feedback").innerHTML = "";
document.getElementById("guesses").innerHTML = "";
guessCount = 1;
}
document.getElementById("guessForm").addEventListener("submit",
function(event) {
event.preventDefault();
evaluateGuess();
});
</script>
</body>
</html>
0 Kommentare:
Kommentar veröffentlichen
Kommentare verfassen ist hier sehr einfach, man kann sogar ohne Anmeldung anonym Kommentare hinterlassen. Also, zeig' uns deine Meinung ...