<div class="simpleparch">
Wilkommen bei der Fan-Rätselqueste zur Ratcon 2024. Dieses Werk ist Teil des Scriptorium Aventuris ( [[rechtliche Hinweise]] ).
<h2> [[Beginne das Abenteuer->Intro Text]] </h2>
Falls die Rätsel auf deinem Gerät garnicht funktionieren, kannst du die
<a href="https://glumbosch.github.io/queste24/queste_fallback.pdf"> minimale PDF Version</a> verwenden. Dieses Rätselabenteuer wurde von Glumbosch erstellt. Falls etwas schief geht bitte wende Dich an ihn (glumbosch@gmail.com oder Glumbosch auf discord) und behellige nicht das Orgateam der Ratcon oder Ulisses damit. Sie haben nichts damit zu tun und können nicht helfen. </div>
<style>
img {
max-width: 1024px;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
}
</style>
<div class="styled-box">
<h2>Was bereits geschehen ist</h2>
Man hat Dir eine alte Schriftrolle aufgeschwatzt. Naja gut, also ehrlich gesagt suchst du nach jedem noch so kleinen Hinweis auf verlorene echsische Heiligtümer. Alle im Umkreis eines Tagesmarsches von Selem wissen - wenn man alten echsischen Kram hat, kann man ihn Dir für gutes Geld verkaufen
<img src='https://glumbosch.github.io/queste24/bilder/g24.webp'>
Doch bei dieser Schriftrolle hast Du ein gutes Gefühl. Sie ist in der alten Echsenschrift Chuchas verfasst. Nur die Besten auf dem Gebiet der Achazforschung, so wie Du, können diese lesen. Sie besteht aus tausenden von Pictogrammen, die sich über die Jahrhunderte auch noch verändert haben. Die Zeichen auf der Schriftrolle sind über tausend Jahre alt.
Sinngemäß entzifferst du folgendes auf der Schriftrolle:
</div>
<div class="embedded-parchment">
<div class="parch">
<div id="parchment"></div>
<div id="contain"><p> $koenigname ünscht seiner Großartigkeit und der Schönheit des Volkes der Völker zur Ehre eine Pyramide zu errichten. Dazu werden 5000 beschlagene Stelen … zum Preis von… Wer beschlagene Stelen nachmacht oder nachgemachte Stelen in Umlauf bringt … mit dem Tod
… zu spät geliefert … Tod …
</p> <br> </div>
<p></p>
</div>
</div>
<div class="styled-box">
Neben dem Vertragswerk, das hauptsächlich daraus besteht, dass man einen Vertragsbruch nicht überlebt, wird auch die Anfahrt zur Baustelle beschrieben! Eine Sensation! Du machst die sofort auf die Socken!
<<button"Los gehts!">>
<<goto "Wegweiser Rätsel">>
[[Wegweiser Rätsel]]
<</button>>
</div>
<<script>>
function ScrollHeight() {
var content = document.querySelector('.embedded-parchment #parchment');
var container = document.querySelector('.embedded-parchment #contain');
if (content && container) {
content.style.height = container.offsetHeight + 'px';
}
console.log("external");
}
setTimeout(ScrollHeight, 200);
setTimeout(ScrollHeight, 1000);
setTimeout(ScrollHeight, 3000);
<</script>><<set $correctDoor to "Eagle">>
<<set $koenigname to "Xssicho'Tze">>
<<set $hafenname to "Uru'Achen">>
<<script>>
Config.ui.stowBarInitially = true;
<</script>><div class="embedded-parchment">
<div class="parch">
<div id="parchment"></div>
<div id="contain">
<p>
Du hast Selem im Westen hinter Dir gelassen und bist auf dem Weg nach Srschzz.</p>
<p><br/></p>
<img src="https://glumbosch.github.io/queste24/bilder/roadsign.jpg" >
<p>Doch Du bemerkst an einer Kreuzung, dass der Avesweiser abgerissen im Sumpf liegt. Du kannst jedoch die Beschriftung noch lesen:
* Geradeaus: Abszint
* Rechts: Selem
* Links: Srschzz
* Zurück: Chag
Noch kurzem Überlegen setzt Du Deine Reise nach Srschzz fort. Denn es liegt logischerweise im:
</p>
</div>
</div>
</div><div class="buttonflex">
<<button "Norden">>
<<script>>
UI.alert("Du denkst nochmal nach, Norden ist es nicht.");
<</script>>
<</button>>
<<button "Süden">>
<<script>>
UI.alert("Ins offene Meer willst du heute nicht wandern.");
<</script>>
<</button>>
<<button "Westen">>
<<script>>
UI.alert("Du schaust Dich nach hinten um. Selem im Westen. Da komme ich doch her.");
<</script>>
<</button>>
<<button"Osten">><<script>>
UI.alert(" Klar, Selem liegt im Westen also ist rechts Westen und Du musst nach Osten.");<</script>>
<<goto "frosch Rätsel">>
[[frosch Rätsel]]
<</button>>
</div>
<<script>>
function ScrollHeight() {
var content = document.querySelector('.embedded-parchment #parchment');
var container = document.querySelector('.embedded-parchment #contain');
if (!!content) {
content.style.height = container.offsetHeight + 'px';}
}
setTimeout(ScrollHeight, 200);
setTimeout(ScrollHeight, 1000);
setTimeout(ScrollHeight, 3000);
<</script>><style>
img{max-width:50%}
</style>
<script>
function toggleVisibility(id) {
const element = document.getElementById(id);
const button = document.getElementById('btn' + id.charAt(0).toUpperCase() + id.slice(1));
element.style.display = element.style.display === 'none' ? 'block' : 'none';
button.classList.toggle('active', element.style.display === 'block');
checkHiddenMessage();
}
function selectPupil(id) {
const pupils = ['pupilDownLeft', 'pupilDownRight', 'pupilDown', 'pupilLeft', 'pupilRight', 'pupilUpLeft', 'pupilUpRight', 'pupilUp'];
pupils.forEach(pupil => document.getElementById(pupil).style.display = 'none');
document.getElementById(id).style.display = 'block';
checkHiddenMessage();
}
function toggleTongueFlame(option) {
const tongue = document.getElementById('tongue');
const flame = document.getElementById('flame');
// Reset both to hidden initially
tongue.style.display = 'none';
flame.style.display = 'none';
// Show the selected option
if (option === 'tongue') {
tongue.style.display = 'block';
} else if (option === 'flame') {
flame.style.display = 'block';
}
checkHiddenMessage(); // Check for the hidden message condition
}
function checkHiddenMessage() {
const horn1Visible = document.getElementById('horn1').style.display === 'block';
const horn2hidden = document.getElementById('horn2').style.display === 'none';
const horn4hidden = document.getElementById('horn4').style.display === 'none';
const horn3Visible = document.getElementById('horn3').style.display === 'block';
const flameVisible = document.getElementById('flame').style.display === 'block';
const pupilUpVisible = document.getElementById('pupilUp').style.display === 'block';
const teeth1Visible = document.getElementById('teeth1').style.display === 'block';
const teeth2Visible = document.getElementById('teeth2').style.display === 'block';
const teeth3Visible = document.getElementById('teeth3').style.display === 'block';
const teeth4Vhidden = document.getElementById('teeth4').style.display === 'none';
if (horn1Visible && horn3Visible && flameVisible && pupilUpVisible && teeth1Visible && teeth2Visible && teeth3Visible && teeth4Vhidden&&horn2hidden&&horn4hidden) {
document.getElementById('hiddenMessage').style.display = 'block';
} else {
document.getElementById('hiddenMessage').style.display = 'none';
}
}
</script>
<script>
function toggleVisibility(id) {
const element = document.getElementById(id);
const button = document.getElementById('btn' + id.charAt(0).toUpperCase() + id.slice(1));
element.style.display = element.style.display === 'none' ? 'block' : 'none';
button.classList.toggle('active', element.style.display === 'block');
checkHiddenMessage();
}
function selectPupil(id) {
const pupils = ['pupilDownLeft', 'pupilDownRight', 'pupilDown', 'pupilLeft', 'pupilRight', 'pupilUpLeft', 'pupilUpRight', 'pupilUp'];
pupils.forEach(pupil => document.getElementById(pupil).style.display = 'none');
document.getElementById(id).style.display = 'block';
checkHiddenMessage();
}
function toggleTongueFlame(option) {
const tongue = document.getElementById('tongue');
const flame = document.getElementById('flame');
// Reset both to hidden initially
tongue.style.display = 'none';
flame.style.display = 'none';
// Show the selected option
if (option === 'tongue') {
tongue.style.display = 'block';
} else if (option === 'flame') {
flame.style.display = 'block';
}
checkHiddenMessage(); // Check for the hidden message condition
}
</script>
<style>
.parent-container {
display: flex;
flex-direction: column;
align-items: center;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
.avatar-container {
margin-top: -10vw;
position: relative;
width: 100%;
height: 27vw;
aspect-ratio: 1 / 1;
margin-bottom: 0vw;
overflow: hidden; /* Ensure content outside the container is hidden */
}
.avatar-container img {
position: absolute;
top: 0;
left: 0;
width: 50vw;
height: 40vw;;
}
.controls {
display: flex;
flex-direction: row;
align-items: center;
width: 100%;
max-width: 80vw;
}
.toggle, .radio {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
margin: 10px 0;
}
.toggle button, .radio label {
margin: 5px;
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: #007BFF;
color: white;
cursor: pointer;
transition: background-color 0.3s, transform 0.3s;
flex: 1 1 calc(50% - 10px);
text-align: center;
z-index: 10;
}
.toggle button:hover, .radio label:hover {
background-color: #0056b3;
}
.radio label {
z-index: 10
background-color: #fffef0;
max-width: fit-content;
font-family: 'Pirata One', cursive;
font-size: 1.5em;
color: #7F3300;
background-color: #fffef0;
border: 3px solid #8f5922;
padding: 10px 20px;
margin: 10px;
text-align: center;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5), inset 0 0 10px rgba(255, 255, 255, 0.3);
border-radius: 10px;
height: fit-content;
background-size: cover;
cursor: pointer;
}
.radio label:hover {
background-color: #5a6268;
}
.radio input[type="radio"] {
display: none;
}
.radio input[type="radio"]:checked + label {
background-color: #28a745;
transform: scale(1.05);
}
.toggle button.active {
background-color: #28a745;
transform: scale(1.05);
}
.hidden-message {
display: none;
color: green;
font-weight: bold;
margin-top: 20px;
}
@media (max-width: 1000px) {
#passages,#story {
font-size: 1.0em;
}
.radio label {
font-size: 1em;
}
.radio label, .toggle, .radio { font-size: 1em;}
}
@media (max-width: 480px) {
font-size: 0.8em;
.toggle button, .radio label {
flex: 1 1 100%;
font-size: 1em;
}
.radio label, .toggle, .radio { font-size: 0.8em;}
}
@media (max-width: 700px) {
#passages,#story {
font-size: 0.8em;
}
.radio label {
font-size: 1em;
}
.radio label, .toggle, .radio { font-size: 1em;}
}
@media (max-width: 480px) {
font-size: 0.8em;
.toggle button, .radio label {
flex: 1 1 100%;
font-size: 0.8em;
}
.radio label, .toggle, .radio { font-size: 0.8em;}
}
</style>
<div class="styled-box">
Durch durch Löcher in der Decke fällt fahles Licht. Sofort springt dir der mit Echsenglyphen verzierte Sarkophag ins Auge.
<img src="https://glumbosch.github.io/queste24/bilder/sarg.jpg">
Am Deckel sind 3 Reihen aus Kacheln zu sehen. Eine scheint in der Letzten scheint eine zu fehlen. Der Sarg scheint verriegelt zu sein.
<img src="https://glumbosch.github.io/queste24/bilder/tiles.jpg">
Auf dem Boden sind unzählige Kacheln mit ähnlichen Abbildungen verteilt. Sie unterscheiden sich in der Anzahl der Hörner und Zähne sowie in Blickrichtung. Einige spaien Feuer oder strecken die Zunge heraus. Du fertigst eine Skizze der Köpfe an und machst dich auf der Suche nach der logisch passenden Kachel.
<img src="https://glumbosch.github.io/queste24/bilder/echsen_heads_skizze.jpg">
</div>
<div class="avatar-container">
<img src="https://glumbosch.github.io/queste24/bilder/Head.png" alt="Head" class="head"><img src="https://glumbosch.github.io/queste24/bilder/Horn%201.png" alt="Horn 1" id="horn1" style="display: none;"> <img src="https://glumbosch.github.io/queste24/bilder/Horn%202.png" alt="Horn 2" id="horn2" style="display: none;"><img src="https://glumbosch.github.io/queste24/bilder/Horn%203.png" alt="Horn 3" id="horn3" style="display: none;"><img src="https://glumbosch.github.io/queste24/bilder/Horn%204.png" alt="Horn 4" id="horn4" style="display: none;"><img src="https://glumbosch.github.io/queste24/bilder/Pupil%20Down%20Left.png" alt="Pupil Down Left" id="pupilDownLeft" style="display: none;"> <img src="https://glumbosch.github.io/queste24/bilder/Pupil%20Down%20Right.png" alt="Pupil Down Right" id="pupilDownRight" style="display: none;">
<img src="https://glumbosch.github.io/queste24/bilder/Pupil%20Down.png" alt="Pupil Down" id="pupilDown" style="display: none;"> <img src="https://glumbosch.github.io/queste24/bilder/Pupil%20Left.png" alt="Pupil Left" id="pupilLeft" style="display: none;">
<img src="https://glumbosch.github.io/queste24/bilder/Pupil%20Right.png" alt="Pupil Right" id="pupilRight" style="display: none;"> <img src="https://glumbosch.github.io/queste24/bilder/Pupil%20Up%20Left.png" alt="Pupil Up Left" id="pupilUpLeft" style="display: none;"> <img src="https://glumbosch.github.io/queste24/bilder/Pupil%20Up%20Right.png" alt="Pupil Up Right" id="pupilUpRight" style="display: none;"> <img src="https://glumbosch.github.io/queste24/bilder/Pupil%20Up.png" alt="Pupil Up" id="pupilUp" style="display: none;"> <img src="https://glumbosch.github.io/queste24/bilder/Teeth%201.png" alt="Teeth 1" id="teeth1" style="display: none;"> <img src="https://glumbosch.github.io/queste24/bilder/Teeth%202.png" alt="Teeth 2" id="teeth2" style="display: none;"> <img src="https://glumbosch.github.io/queste24/bilder/Teeth%203.png" alt="Teeth 3" id="teeth3" style="display: none;"> <img src="https://glumbosch.github.io/queste24/bilder/Teeth%204.png" alt="Teeth 4" id="teeth4" style="display: none;"> <img src="https://glumbosch.github.io/queste24/bilder/Tongue.png" alt="Tongue" id="tongue" style="display: none;"> <img src="https://glumbosch.github.io/queste24/bilder/Flame.png" alt="Flame" id="flame" style="display: none;">
</div>
<div class="hidden-message" id="hiddenMessage">
Du hast die richtige Kachel gefunden und kannst den Sarkophag öffnen.
<<button"weiter">>
<<goto "finale">>
[[finale]]
<</button>>
</div><div class="parent-container"><div class="controls">
<div class="toggle,buttonflex"> <button onclick="toggleVisibility('horn1')" id="btnHorn1">👹 1</button> <button onclick="toggleVisibility('horn2')" id="btnHorn2">👹 2</button> <button onclick="toggleVisibility('horn3')" id="btnHorn3">👹 3</button> <button onclick="toggleVisibility('horn4')" id="btnHorn4">👹 4</button>
</div> <div class="toggle"> <button onclick="toggleVisibility('teeth1')" id="btnTeeth1">🦷 1</button> <button onclick="toggleVisibility('teeth2')" id="btnTeeth2">🦷 2</button> <button onclick="toggleVisibility('teeth3')" id="btnTeeth3">🦷 3</button> <button onclick="toggleVisibility('teeth4')" id="btnTeeth4">🦷 4</button>
</div>
<div class="radio"> <label><input type="radio" name="pupil" onclick="selectPupil('pupilDownLeft')"> ↙️ 👁️</label> <label><input type="radio" name="pupil" onclick="selectPupil('pupilDownRight')">↘️ 👁️</label> <label><input type="radio" name="pupil" onclick="selectPupil('pupilDown')"> ⬇️ 👁️</label> <label><input type="radio" name="pupil" onclick="selectPupil('pupilLeft')"> ⬅️ 👁️</label> <label><input type="radio" name="pupil" onclick="selectPupil('pupilRight')"> ➡️ 👁️</label> <label><input type="radio" name="pupil" onclick="selectPupil('pupilUpLeft')"> ↖️👁️</label> <label><input type="radio" name="pupil" onclick="selectPupil('pupilUpRight')"> ↗️ 👁️</label> <label><input type="radio" name="pupil" onclick="selectPupil('pupilUp')">⬆️ 👁️</label>
</div>
<div class="radio"> <label><input type="radio" name="tongueFlame" onclick="toggleTongueFlame('nothing')"> 🚫</label> <label><input type="radio" name="tongueFlame" onclick="toggleTongueFlame('tongue')"> 👅</label> <label><input type="radio" name="tongueFlame" onclick="toggleTongueFlame('flame')"> 🔥</label>
</div>
</div>
</div>
<div class="styled-box">
Du hast den Regenbogenstein geborgen. Herzlichen Glückwunsch!
<img src="https://glumbosch.github.io/queste24/bilder/regenbogenstein.jpg" style="max-width: 500px;">
Um am Gewinnspiel teil zu nehmen schreibe eine email mit dem Betreff "queste24"
an <a href="mailto:glumbosch+queste@gmail.com?subject=queste24">glumbosch+queste@gmail.com</a>
</div><div class="styled-box">
Kaum hast Du den fehlenden Wegweiser überwunden, stehen Dir nun Froschmenschen im Weg. Zwei Gruppen sogenannter Krakonier stehen sich unversöhnlich gegenüber. Sie weigern sich einfach aneinander vorbei zu gehen. Zurück gehen sei unehrenhaft und deshalb blockieren sie jetzt den Steg.
Über genau einen anderen Krakonier aus der anderen Gruppe springen dagegen sei ehrenhaft. Einen Satz nach vorne zu machen sei auch in Ordnung.
Es gibt definitiv eine Abfolge von Sprüngen die hier den Weg frei macht. Aber welche? (Klicke/Tippe auf den Frosch der springen soll)
</div>
<style>
.game-container {
position: relative;
height: min-content;
overflow: hidden;
display: flex;
margin:auto;
flex-direction: column;
align-items: center;
justify-content: center;
}
#bgimg {
width: 100%;
height: 100%;
object-fit: cover;
}
.flex-container {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
justify-content: space-evenly;
align-items: stretch; /* default */
gap: 3px; /* minimal gap */
position: absolute;
top: 56%; /* from the top of the image */
width: 95%; /* Adjust as needed */
}
.output {
text-align: center;
font-size: 5pt;
display:none;
margin-top: 10px; /* Add some space above the output */
}
.buttonflex {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px; /* Add some space above the buttons */
}
.buttonflex button {
font-size: 1.5em; /* Increase the font size to make the buttons bigger */
padding: 10px 20px; /* Add padding to make the buttons bigger */
margin: 0 10px; /* Add some space between the buttons */
}
.spot {
display: flex;
background-size: cover;
background-position: 0px center;
justify-content: center;
align-items: center;
flex: 1; /* Ensure all spots take equal space */
}
.frog, .toad, .empty {
width: 100%;
}
@keyframes moveFrog {
0% { transform: translate(var(--start-x), var(--start-y)); }
50% { transform: translate(-100%, -200%) scale(0.8,1.5); }
100% { transform: translate(var(--end-x), var(--end-y)) scale(0.8,1.2); }
}
@keyframes moveToad {
0% { transform: translate(var(--start-x), var(--start-y)) ; }
50% { transform: translate(100%, -200%) scale(0.8,1.5); }
100% { transform: translate(var(--end-x), var(--end-y)) scale(0.8,1.2); }
}
@media (max-width: 600px) {
.spot {
flex: 1 1 30px; /* Ensure spots can shrink and grow */
}
}
</style>
<div class="game-container">
<img id="bgimg" src="https://i.imgur.com/cBlOfsR.jpeg" alt="background">
<div class="flex-container" id="flex-container">
<!-- filled via js -->
</div>
</div>
<p class="output" id="moves">Total Moves: 0</p>
<div class="buttonflex">
<button id="undo">Rückgängig</button>
<button id="restart">Neustart</button>
<div id="puzzlesolved" style='display:none'>
<button data-passage="dreitür rätsel" class="link-internal,buttonlook" role="link" tabindex="0">weiter</button>
</div>
</div>
<<done>>
<<script>>
const numFrogsToads = 4; // Set the number of frogs and toads here
let empty = numFrogsToads + 1;
let moves = 0;
let frogimg= "https://i.imgur.com/u2gw5w4.jpeg";
let toadurl="https://glumbosch.github.io/queste24/bilder/brown_jump_toad.png";
let frogurl="https://glumbosch.github.io/queste24/bilder/green_jump_frog.png";
let turns = new Array();
turns.push( [ "n/a", 0, 0, 0 ] );
function getElementByIdSafe(id) {
const element = document.getElementById(id);
if (!element) {
console.error(`Element with ID ${id} not found.`);
}
return element;
}
function createBoard() {
const container = getElementByIdSafe('flex-container');
container.innerHTML = '';
const output = document.createElement('p');
output.className = 'output';
output.id = 'moves';
output.textContent = 'Total Moves: 0';
output.style.display = "none";
document.querySelector('.game-container').appendChild(output);
for (let i = 1; i <= numFrogsToads; i++) {
createSpot(container, `frog${i}`, 'frog', `b${i}`, frogurl);
}
createSpot(container, 'empty', 'empty', `b${empty}`, "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==");
for (let i = 1; i <= numFrogsToads; i++) {
createSpot(container, `toad${i}`, 'toad', `b${empty + i}`, toadurl);
}
}
function createSpot(container, id, className, spotId, imageSrc) {
const spot = document.createElement('div');
spot.className = `spot ${spotId}`;
spot.id = spotId;
spot.onclick = () => swap(spotId);
const img = document.createElement('img');
img.className = className;
img.src = imageSrc;
img.id = id;
img.alt = id;
spot.appendChild(img);
container.appendChild(spot);
}
function swapElements(target, goal) {
let temp1 = getElementByIdSafe(target).removeChild(getElementByIdSafe(target).children[0]);
let temp2 = getElementByIdSafe(goal).removeChild(getElementByIdSafe(goal).children[0]);
getElementByIdSafe(goal).appendChild(temp1);
getElementByIdSafe(target).appendChild(temp2);
}
function swap(target) {
let x = Number(target.replace('b', ''));
let y = empty;
let goal = `b${y}`;
let imgnode = getElementByIdSafe(target).children[0];
let imgcl = imgnode.className;
let goodmove = false;
if (imgcl === "frog" && (y === x + 1 || (y === x + 2 && getElementByIdSafe(`b${x + 1}`).children[0].className === "toad"))) {
goodmove = true;
empty = x;
} else if (imgcl === "toad" && (y === x - 1 || (y === x - 2 && getElementByIdSafe(`b${x - 1}`).children[0].className === "frog"))) {
goodmove = true;
empty = x;
}
if (goodmove) {
swapElements(target, goal);
/*#######*/
moves += 1;
turns.push([target, x, y, moves]);
getElementByIdSafe("moves").textContent = `Total Moves: ${moves}`;
animateMove(imgnode, target, goal, imgcl);
if (checkWin()) {
setTimeout(() => {
getElementByIdSafe("puzzlesolved").style.display = "flex";
UI.alert("Der Weg ist nun frei");
}, 1000);
}
} else {
UI.alert("So wollen die Frösche nicht. Sie hüpfen ein Feld voran oder über einen anderen Krakonier hinweg 2 Felder.");
}
}
function animateMove(frogToad, target, goal, imgcl) {
let targetElement = getElementByIdSafe(target);
let goalElement = getElementByIdSafe(goal);
let startX = targetElement.offsetLeft - goalElement.offsetLeft;
let startY = targetElement.offsetTop - goalElement.offsetTop;
frogToad.style.setProperty('--start-x', `${startX}px`);
frogToad.style.setProperty('--start-y', `${startY}px`);
frogToad.style.setProperty('--end-x', `0px`);
frogToad.style.setProperty('--end-y', `0px`);
frogToad.style.animation = imgcl === "frog" ? 'moveFrog 1.0s linear' : 'moveToad 1.0s linear';
setTimeout(() => {
frogToad.style.animation = '';
}, 1000);
}
function checkWin() {
console.log("checkWin called");
// Check if all toads are in the correct positions
for (let i = 1; i <= numFrogsToads; i++) {
const element = getElementByIdSafe(`b${i}`);
if (!element || element.children[0].className !== 'toad') {
console.log(`Toad check failed at b${i}`);
return false;
}
}
// Check if the empty spot is in the correct position
const emptyElement = getElementByIdSafe(`b${empty}`);
if (!emptyElement || emptyElement.children[0].className !== 'empty') {
console.log(`Empty check failed at b${empty}`);
return false;
}
// Check if all frogs are in the correct positions
const frogsCheck = Array.from({ length: numFrogsToads }, (_, i) => i + empty + 1)
.every(i => {
const element = getElementByIdSafe(`b${i}`);
if (!element || element.children[0].className !== 'frog') {
console.log(`Frog check failed at b${i}`);
return false;
}
return true;
});
return frogsCheck;
}
function checkDeadEnd() {
return !(
(getElementByIdSafe("b1").children[0].className === "frog" &&
getElementByIdSafe("b2").children[0].className === "frog" &&
getElementByIdSafe("b3").children[0].className === "frog") ||
(getElementByIdSafe(`b${numFrogsToads * 2 + 1}`).children[0].className === "toad" &&
getElementByIdSafe(`b${numFrogsToads * 2}`).children[0].className === "toad" &&
getElementByIdSafe(`b${numFrogsToads * 2 - 1}`).children[0].className === "toad")
);
}
createBoard();
let undobutton = getElementByIdSafe("undo");
undobutton.onclick = function () {
if (turns.length > 1) {
let lastClick = turns.pop();
let [target, x, y, movesCount] = lastClick;
let goal = `b${y}`;
swapElements(target, goal);
empty = y;
moves = movesCount - 1;
getElementByIdSafe("moves").textContent = `Total Moves: ${moves}`;
} else {
alert("There are no more moves to undo!");
}
};
function resetBoard() {
moves = 0;
getElementByIdSafe("moves").textContent = `Total Moves: ${moves}`;
turns = new Array();
turns.push(["n/a", 0, 0, 0]);
for (let i = 1; i <= numFrogsToads; i++) {
getElementByIdSafe(`b${i}`).children[0].className = 'frog';
getElementByIdSafe(`b${i}`).children[0].src = frogurl;
}
empty = numFrogsToads + 1;
getElementByIdSafe(`b${empty}`).children[0].className = 'empty';
getElementByIdSafe(`b${empty}`).children[0].src = "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==";
for (let i = empty + 1; i <= 2 * numFrogsToads + 1; i++) {
getElementByIdSafe(`b${i}`).children[0].className = 'toad';
getElementByIdSafe(`b${i}`).children[0].src = toadurl;;
}
}
getElementByIdSafe("restart").onclick = resetBoard;
<</script>>
<</done>><style>
img {
max-width: 1024px;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
}
</style>
<div class="styled-box" style="width:'100%'">
Endlich hast du die Pyramide von Xssicho'Tze ausfindig machen können. Sein Grab soll so prächtig wie gefährlich sein. Du besteigst die Pyramide und trittst durch die große Schwelle einige Stufen hinab.
</div>
<img src= https://glumbosch.github.io/queste24/bilder/pyramide.jpg>
<div class="styled-box" style="width:'100%'">
Du findest dich vor drei aus Stein gehauenen Tierköpfen, die jeweils über einen Türbogen wachen. Die Wand und Türen sind mit Glyphen übersäht. Die Übersetzung lautet:
</div>
<img src="https://glumbosch.github.io/queste24/bilder/threedoors.webp">
<div class="embedded-parchment">
<div class="parch">
<div id="parchment"></div>
<div id="contain"><p>
Die Hornechse mit vielen Hörnern, das Krokodil mit vielen Zähnen und das Chamäleon mit vielen Farben sollten Wache vor der Schatzkammer halten. In der ersten Nacht wurde etwas gestohlen, ebenso in der zweiten - nur in der dritten Nacht bemerkte die Wache den Dieb und wacht nun über den Eingang zu dieser Stätte.
* Wenn das Chamäleon unachtsam war, dann hat die Hornechse den Dieb bemerkt.
* Wenn die Hornechse nichts bemerkte, dann hat das Krokodil den Eindringling ertappt.
* Wenn das Chamäleon den Einbruch verhinderte, dann hat das Krokodil es nicht getan.
<br>
</p>
</div>
</div>
</div>
<div class="styled-box"> Das Schicksal der anderen beiden Wachen war den Echsen keine weitere Erwähnung wert, die gerechte Strafe war für sie offensichtlich.
Besser gehst Du nur durch die Tür der guten Wache. Welche Tür ist das?
</div>
<div class="buttonflex">
<<button "Chamäleon">>
<<script>>
UI.alert("Du stämmst dich gegen die Tür die schlagartig nachgibt, nur mit Glück fällst Du nicht in das Loch, dass hinter der Tür des bodenlosen Raums gähnt.")
<</script>>
<</button>>
<<button "Krokodil">>
<<run UI.alert("Du öffnest die Tür. Sie beherbergt eine kleine Kammer. Du blickst in eine Batterie von Pfeilen, Du hörst nur das Knarzen und Reißen eines alten Seils. Glück gehabt, diese Fallen wurden zu lange nicht gewartet!")>>
<</button>>
<<button"Hornechse">>
<<script>>
UI.alert("Die Tür ist überraschend leichtgängig und führt in eine weiträumige Halle");<</script>>
<<goto "pfade">>
[[pfade]]
<</button>>
</div>
<<script>>
function ScrollHeight() {
var content = document.querySelector('.embedded-parchment #parchment');
var container = document.querySelector('.embedded-parchment #contain');
if (content && container) {
content.style.height = container.offsetHeight + 'px';
}
console.log("internal");
}
setTimeout(ScrollHeight, 200);
setTimeout(ScrollHeight, 1000);
setTimeout(ScrollHeight, 3000);
<</script>> <div class="styled-box">
<p>Du gelangst in eine weitere Kammer der Gruft von $koenigname.</p> <p>Dieser Raum enthält zwei mächtige Statuen und acht imposante Tore, die auf einem weiten Feld aus 8 mal 8 Bodenplatten verteilt sind. Die Wände sind mit kunstvollen Malereien verziert, welche die rituelle Prozession zur Thronbesteigung von $koenigname beschreiben.</p>
</div>
<div class="embedded-parchment"><div id="parchment"></div><div class="parch"><div id="contain">
<p>Die heilige Zeremonie führte den König durch alle acht Tore der Stadt. Jedes Tor wurde in Ehrerbietung durchschritten, stets in gerader Linie, ohne auch nur einen Schritt zur Seite zu machen, denn der Weg durch die Tore war ein Symbol der Klarheit und Entschlossenheit, die den König auf seinen Thron führten.</p> <p>Auf seinem Weg ehrte der König auch die Statuen seiner ehrwürdigen Vorgängerinnen. Es war ein Zeichen des tiefsten Respekts, dass er sich ihnen auf einem geraden Pfad näherte, stets mindestens zwei Schritte, bevor er in tiefer Andacht eine sanfte Drehung um ein Viertel vollzog. Nachdem die Drehung vollzogen war, entfernte sich der König wieder auf geradem Wege, mindestens zwei Schritte, bevor er seinen Weg fortsetzte.</p> <p>Der Pfad des Königs war stets von Sorgfalt geprägt. Kein Weg, den er einschlug, durfte sich mit einem vorherigen kreuzen. In dem Raum war die Ordnung der Schritte heilig, der ungestörte Fluss seines Weges spiegelte die ungebrochene Linie seiner Abstammung und Autorität wider.</p> <p>So muss auch der Suchende, der den Pfad des Königs nachahmt, den Raum durch die Tore stets auf gerader Linie durchqueren und den Statuen mit der gebührenden Ehre begegnen, indem er sich ihnen geradlinig nähert, um dann die rituelle Kurve zu vollziehen. Kein Schritt darf zurückweichen, kein Pfad darf sich kreuzen, so wie es in der Prozession des Königs niedergeschrieben steht.</p>
</div></div></div>
<div class="styled-box">
Durch Tippen/Klicken auf die Grenzen zwischen zwei Felder kann ein Wegstück eingezeichnet werden. Ebenso kann man durch ziehen einen Pfad einzeichnen.
</div>
<<done>>
<<timed 100ms>>
<<script>> var content = document.querySelector('.embedded-parchment #parchment');
var container = document.querySelector('.embedded-parchment #contain');
content.style.height = container.offsetHeight + 'px';
resizeCanvas();
<</script>>
<</timed>>
<</done>>
<style>
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
flex-direction: column;
canvas {
background-color: #f0f0f0;
width: 90vw;
min-width:50vw;
height: 90vw;
margin:0 50%;
max-width: 90%;
max-height: 90vw;
}
textarea {
display:none;
margin-top: 20px;
width: 90vw;
max-width: 400px;
height: 200px;
}
.pathpuzzle{
display:flex;
flex-direction: row;
flex-wrap: wrap;
background-color: #f0f0f0;
align-items:center;}
.canvas-container {
min-width: 25%;
margin: 24px auto;
max-width: 85vw;
max-height: 85vw;
width:800px;
height:800px;
}
.button-container {
display: flex;
margin: 29px auto;
flex-direction: row;
flex-wrap: wrap;
}
button{
width: max-content;}
@media only screen and (max-width: 630px) {
.button-container {
display: block;
}}
.button-container button {
display:flex;
margin:20px;
padding:20px;
min-width:10%;}
#result{
margin: 10px auto;
padding: 18px;
display:none;
}
</style>
<div style="margin: -4em;"></div><div class="pathpuzzle">
<div class="canvas-container"><canvas id="masyuCanvas" ></canvas></div><div id="result" >
</div><div id="foo" style="display:none"><<button"weiter">><<goto "statuen">>
[[statuen]]
<</button>>
</div>
<div class="button-container">
<button id="checkPathButton">Pfad prüfen</button>
<button id="resetButton">Zurücksetzen</button>
<<button"schwere Version">>
<<goto "pfade_schwer">>
[[pfade_schwer]]
<</button>>
<<button"Tip">>
<<script>>
UI.alert(' <p> Es handelt sich um ein Masyu Puzzle.</p><img src="https://glumbosch.github.io/queste24/bilder/path_rules.png" alt="Path Rules">')
<</script>>
<</button>>
</div>
</div>
<textarea id="gameStateText" display=none></textarea>
<<timed 50ms>>
<script>{
const canvas = document.getElementById('masyuCanvas');
const ctx = canvas.getContext('2d');
const gameStateText = document.getElementById('gameStateText');
const checkPathButton = document.getElementById('checkPathButton');
const resultDiv = document.getElementById('result');
/*puzzle setup*/
const board = [
[0, 0, 0, 2, 0, 0],
[3, 0, 3, 0, 0, 3],
[0, 0, 0, 0, 0, 0],
[0, 0, 3, 0, 3, 0],
[0, 0, 3, 0, 0, 0],
[2, 3, 0, 0, 3, 0]
];
/*number can be extracted from ttextare, if display is set to value other none.*/
const solution = [
[6, 10, 12, 6, 10, 12],
[5, 0, 5, 5, 0, 5],
[5, 0, 3, 9, 0, 5],
[5, 6, 10, 10, 10, 9],
[5, 3, 10, 10, 10, 12],
[3, 10, 10, 10, 10, 9]
];
const gameState = Array.from({ length: board.length }, () => Array(board[0].length).fill(0));
const imageRotations = Array.from({ length: board.length }, () => Array(board[0].length).fill(null));
const imageUrl1 = 'https://glumbosch.github.io/queste24/bilder/echsenstatue2.png'; /*echsenstature*/
const imageUrl2 = 'https://glumbosch.github.io/queste24/bilder/gate.png';
let image1 = new Image();
let image2 = new Image();
image1.src = imageUrl1;
image2.src = imageUrl2;
function resizeCanvas() {
var container = document.querySelector('.canvas-container');
if (!container) {
console.error('Container element with class "canvas-container" not found.');
return;
}
const maxWidth = container.clientWidth;
const maxHeight = container.clientHeight;
if (!board || !board[0] || !board.length) {
console.error('Board is not defined or is empty.');
return;
}
const cellSize = Math.min(maxWidth / board[0].length, maxHeight / board.length);
if (!canvas) {
console.error('Canvas element is not defined.');
return;
}
canvas.width = cellSize * board[0].length;
canvas.height = cellSize * board.length;
if (typeof drawBoard === 'function') {
drawBoard(cellSize);
} else {
console.error('drawBoard function is not defined.');
}
if (typeof drawGameState === 'function') {
drawGameState(cellSize);
} else {
console.error('drawGameState function is not defined.');
}
}
var container = document.querySelector('.canvas-container');
container.clientWidth="50%";
container.clientHeigth="70vw";
resizeCanvas();
function drawBoard(cellSize) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.lineWidth = 1;
ctx.strokeStyle = 'black';
for (let row = 0; row < board.length; row++) {
for (let col = 0; col < board[row].length; col++) {
ctx.strokeRect(col * cellSize, row * cellSize, cellSize, cellSize);
if (board[row][col] === 1) {
ctx.beginPath();
ctx.arc(col * cellSize + cellSize / 2, row * cellSize + cellSize / 2, cellSize / 4, 0, 2 * Math.PI);
ctx.fillStyle = 'black';
ctx.fill();
} else if (board[row][col] === 2) {
const rotation = imageRotations[row][col] !== null ? imageRotations[row][col] : 0* 360;
if (imageRotations[row][col] === null) {
imageRotations[row][col] = rotation;
}
drawRotatedImage(ctx, image1, col * cellSize + cellSize / 2, row * cellSize + cellSize / 2, cellSize / 2, rotation);
} else if (board[row][col] === 3) {
drawImage(ctx, image2, col * cellSize + cellSize / 2, row * cellSize + cellSize / 2, cellSize / 2);
}
}
}
}
function drawGameState(cellSize) {
ctx.lineWidth = cellSize / 5;
ctx.strokeStyle = 'rgba(0, 0, 255, 1)';
for (let row = 0; row < gameState.length; row++) {
for (let col = 0; col < gameState[row].length; col++) {
const cellState = gameState[row][col];
if (cellState & 1) {
ctx.beginPath();
ctx.moveTo(col * cellSize + cellSize / 2, row * cellSize - ctx.lineWidth / 2);
ctx.lineTo(col * cellSize + cellSize / 2, row * cellSize + cellSize / 2 + ctx.lineWidth / 2);
ctx.stroke();
}
if (cellState & 2) {
ctx.beginPath();
ctx.moveTo(col * cellSize + cellSize / 2 - ctx.lineWidth / 2, row * cellSize + cellSize / 2);
ctx.lineTo(col * cellSize + cellSize + ctx.lineWidth / 2, row * cellSize + cellSize / 2);
ctx.stroke();
}
if (cellState & 4) {
ctx.beginPath();
ctx.moveTo(col * cellSize + cellSize / 2, row * cellSize + cellSize / 2 - ctx.lineWidth / 2);
ctx.lineTo(col * cellSize + cellSize / 2, row * cellSize + cellSize + ctx.lineWidth / 2);
ctx.stroke();
}
if (cellState & 8) {
ctx.beginPath();
ctx.moveTo(col * cellSize, row * cellSize + cellSize / 2);
ctx.lineTo(col * cellSize + cellSize / 2, row * cellSize + cellSize / 2);
ctx.stroke();
}
}
}
}
function updateGameStateText() {
gameStateText.value = "[" + gameState.map(row => row.join(',')).join('],\n[') + "]";
}
function toggleLine(row, col, line) {
if (line === 1 && row > 0) gameState[row - 1][col] ^= 4;
if (line === 2 && col < board[0].length - 1) gameState[row][col + 1] ^= 8;
if (line === 4 && row < board.length - 1) gameState[row + 1][col] ^= 1;
if (line === 8 && col > 0) gameState[row][col - 1] ^= 2;
gameState[row][col] ^= line;
}
function drawRotatedImage(ctx, image, x, y, size, rotation) {
let scale = 0.8;
ctx.save();
ctx.translate(x, y);
ctx.scale(scale, scale);
ctx.rotate((rotation * Math.PI) / 180);
ctx.drawImage(image, -size, -size, size * 2, size * 2);
ctx.restore();
}
function drawImage(ctx, image, x, y, size) {
ctx.drawImage(image, x - size, y - size, size * 2, size * 2);
}
let tries = 0;
checkPathButton.addEventListener('click', () => {
tries++;
let isSolved = true;
for (let row = 0; row < gameState.length; row++) {
for (let col = 0; col < gameState[row].length; col++) {
if (gameState[row][col] !== solution[row][col]) {
isSolved = false;
break;
}
}
if (!isSolved) break;
}
if (isSolved) {
let text =`<p>Du gehst den Pfad der Zeromonie nach, wie es in der Inschrift beschrieben ist. Als du den Rundlauf abschließt fällt eine der massiven Wandplatten krachend herunter. Eine versteckte Tür! </p>`;
resultDiv.innerHTML=text;
resultDiv.style.display="block";
document.getElementById("foo").style.display="block";
} else {
if (tries <= 2) {
resultDiv.style.display = "block";
let tip = "<div class='simpleparch'> Du folgst dem Weg gemäß der historischen Beschreibung - Oder doch nicht? Es tut sich zumindest nichts.</div>";
resultDiv.innerHTML += tip;
};
if (tries > 2) {
resultDiv.style.display = "block";
let tip2 = "Leider falsch. Hast du daran gedacht, das man direkt nach und vor einer Statue nicht nochmals abbiegen darf? ";
tip2+='<a data-passage="Intro Text" class="link-internal" role="link" tabindex="0">beginne das Abenteuer</a>'
resultDiv.innerHTML = tip2;
}
}
});
canvas.addEventListener('click', (event) => {
const rect = canvas.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;
const col = Math.floor(x / (canvas.width / board[0].length));
const row = Math.floor(y / (canvas.height / board.length));
if (row >= 0 && row < board.length && col >= 0 && col < board[0].length) {
const cellX = (x % (canvas.width / board[0].length)) / (canvas.width / board[0].length);
const cellY = (y % (canvas.height / board.length)) / (canvas.height / board.length);
let line = 0;
if (cellY < 0.25 && cellX > 0.25 && cellX < 0.75) line = 1;
else if (cellX > 0.75 && cellY > 0.25 && cellY < 0.75) line = 2;
else if (cellY > 0.75 && cellX > 0.25 && cellX < 0.75) line = 4;
else if (cellX < 0.25 && cellY > 0.25 && cellY < 0.75) line = 8;
if (line === 1 && row === 0) return;
if (line === 2 && col === board[0].length - 1) return;
if (line === 4 && row === board.length - 1) return;
if (line === 8 && col === 0) return;
toggleLine(row, col, line);
drawBoard(canvas.width / board[0].length);
drawGameState(canvas.width / board[0].length);
updateGameStateText();
}
});
image1.onload = image2.onload = () => {
resizeCanvas();
updateGameStateText();
};
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
let isDrawing = false;
let lastRow = null;
let lastCol = null;
canvas.addEventListener('mousedown', (event) => {
isDrawing = true;
handleInteraction(event);
});
canvas.addEventListener('mouseup', () => {
isDrawing = false;
lastRow = null;
lastCol = null;
});
canvas.addEventListener('mousemove', (event) => {
if (isDrawing) {
handleInteraction(event);
}
});
canvas.addEventListener('touchstart', (event) => {
isDrawing = true;
handleInteraction(event.touches[0]);
});
canvas.addEventListener('touchend', () => {
isDrawing = false;
lastRow = null;
lastCol = null;
});
canvas.addEventListener('touchmove', (event) => {
if (isDrawing) {
handleInteraction(event.touches[0]);
}
event.preventDefault();
});
function handleInteraction(event) {
resizeCanvas();
const rect = canvas.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;
const col = Math.floor(x / (canvas.width / board[0].length));
const row = Math.floor(y / (canvas.height / board.length));
if (row >= 0 && row < board.length && col >= 0 && col < board[0].length) {
if (lastRow !== null && lastCol !== null) {
if (row === lastRow && col === lastCol - 1) {
toggleLine(row, col, 2);
} else if (row === lastRow && col === lastCol + 1) {
toggleLine(lastRow, lastCol, 2);
} else if (row === lastRow - 1 && col === lastCol) {
toggleLine(row, col, 4);
} else if (row === lastRow + 1 && col === lastCol) {
toggleLine(lastRow, lastCol, 4);
}
}
lastRow = row;
lastCol = col;
drawBoard(canvas.width / board[0].length);
drawGameState(canvas.width / board[0].length);
updateGameStateText();
}
}
// Add this function to reset the game state
function resetGameState() {
for (let row = 0; row < gameState.length; row++) {
for (let col = 0; col < gameState[row].length; col++) {
gameState[row][col] = 0;
}
}
drawBoard(canvas.width / board[0].length);
drawGameState(canvas.width / board[0].length);
updateGameStateText();
}
// Add an event listener for the reset button
const resetButton = document.getElementById('resetButton');
resetButton.addEventListener('click', resetGameState);
} </script>
<</timed>>
<<done>>
<<script>> window.dispatchEvent(new Event('resize'));
<</script>>
<</done>>
!!Scriptorium
Dieses Produkt wurde unter Lizenz erstellt. Das Schwarze Auge und sein Logo sowie Aventuria, Dere, Myranor, Riesland, Tharun, Uthuria, The Dark Eye und ihre Logos sind eingetragene Marken vonUlisses Medien und Spiele Distribution GmbH in Deutschland, den U.S.A. und anderen Ländern. Ulisses Spiele und sein Logo sind eingetragene Marken der Ulisses Medien und Spiele Distribution GmbH.
Dieses Werk enthält Material, das durch Ulisses Spiele und/oder andere Autoren urheberrechtlich geschützt ist. Solches Material wird mit Erlaubnis im Rahmen der Vereinbarung über Gemeinschaftsinhalte für SCRIPTORIUM AVENTURIS verwendet.
Alle anderen Originalmaterialien in diesem Werk sind Copyright 2024 von Glumbosch und werden im Rahmen der Vereinbarung über Gemeinschaftsinhalte für SCRIPTORIUM AVENTURIS veröffentlicht.
!! Teilnahmebedingungen Gewinnspiel
Das Gewinnspiel wird privat durchgeführt. Der Rechtsweg ist ausgeschlossen.
Teilnehmer*in kann jede natürliche Person sein, die das 18. Lebensjahr vollendet hat. Die Teilnahme am Gewinnspiel erfolgt durch das Versenden einer Email an die angebene Email-Adresse. Die Email-Adresse wird nur dazu verwendet, Gewinner*innen zu benachrichtigen. Die Ziehung der Gewinner*in findet am 4. September 2024 statt. Die Gewinner müssen sich bis spätestens 10. September zurück melden, sonst verfällt der Gewinn. Das Gewinnspiel beginnt am 30. August und die Teilnahmefrist endet am 1. September um 24.00. Der Veranstalter haftet auch nicht für etwaige Übertragungsfehler. Der Veranstalter behält sich vor, das Gewinnspiel jederzeit, auch ohne Einhaltung von Fristen, ganz oder teilweise vorzeitig zu beenden oder in seinem Verlauf abzuändern, sofern es aus technischen (z.B. Computervirus, Manipulation von oder Fehler in Software und Hardware) oder rechtlichen Gründen nicht möglich ist, das Gewinnspiel ordnungsgemäß durchzuführen. Das Lösen der Rätsel ist nicht Teilnahmebedingung. Die Gewinne werden nicht bar ausgezahlt. Die Gutscheine werden über https://www.ulisses-ebooks.de/ bzw. https://www.drivethrurpg.com an die Gewinner*innen durch eine Email übertragen. Dazu wird drivethrurpg die Email-Adresse der Gewinner*innen erhalten. Die Datenschutzbestimmungen von https://legacy.drivethrurpg.com/privacy.php müssen dazu akzeptiert werden.
!!Datenschutzerklärung
!!!Hosting
Der Hoster erhebt in sog. Logfiles folgende Daten, die Ihr Browser übermittelt:
IP-Adresse, die Adresse der vorher besuchten Website (Referer Anfrage-Header), Datum und Uhrzeit der Anfrage, Zeitzonendifferenz zur Greenwich Mean Time, Inhalt der Anforderung, HTTP-Statuscode, übertragene Datenmenge, Website, von der die Anforderung kommt und Informationen zu Browser und Betriebssystem.
Das ist erforderlich, um unsere Website anzuzeigen und die Stabilität und Sicherheit zu gewährleisten. Dies entspricht unserem berechtigten Interesse im Sinne des Art. 6 Abs. 1 S. 1 lit. f DSGVO.
Es erfolgt kein Tracking und wir haben auf diese Daten keinen direkten Zugriff.
Wir setzen für die Zurverfügungstellung unserer Website folgenden Hoster ein:
GitHub Inc.
88 Colin P Kelly Jr St
San Francisco, CA 94107
United States
Dieser ist Empfänger Ihrer personenbezogenen Daten. Dies entspricht unserem berechtigten Interesse im Sinne des Art. 6 Abs. 1 S. 1 lit. f DSGVO, selbst keinen Server in unseren Räumlichkeiten vorhalten zu müssen. Serverstandort ist USA.
Weitere Informationen zu Widerspruchs- und Beseitigungsmöglichkeiten gegenüber GitHub finden Sie unter: https://docs.github.com/en/free-pro-team@latest/github/site-policy/github-privacy-statement#github-pages
Sie haben das Recht der Verarbeitung zu widersprechen. Ob der Widerspruch erfolgreich ist, ist im Rahmen einer Interessenabwägung zu ermitteln.
Die Daten werden gelöscht, sobald der Zweck der Verarbeitung entfällt.
Die Verarbeitung der unter diesem Abschnitt angegebenen Daten ist weder gesetzlich noch vertraglich vorgeschrieben. Die Funktionsfähigkeit der Website ist ohne die Verarbeitung nicht gewährleistet.
GitHub hat Compliance-Maßnahmen für internationale Datenübermittlungen umgesetzt. Diese gelten für alle weltweiten Aktivitäten, bei denen GitHub personenbezogene Daten von natürlichen Personen in der EU verarbeitet. Diese Maßnahmen basieren auf den EU-Standardvertragsklauseln (SCCs). Weitere Informationen finden Sie unter: https://docs.github.com/en/free-pro-team@latest/github/site-policy/github-data-protection-addendum#attachment-1–the-standard-contractual-clauses-processors <div class="styled-box">
<p>Dieser Raum gedenkt der Schlacht von Krrz'Cha die Xssicho'Tze durch seine großartige Heereskunst für sich entscheiden konnte.</p>
</div>
<div class="embedded-parchment"><div id="parchment"></div><div class="parch"><div id="contain">
<p>Seine besondere Weißheit zeigte unser Herrscher durch eine geschickte Aufstellung seiner Truppen. In jeder Schlachtreihe stand nur eine Einheit. Auch die Sicht nach vorne und nach hinten war für alle Truppen frei. Um den Geschickten Einsatz des Speeres zu ermöglichen wurden auch die diagonalen Bewegungsmöglichkeiten in dieser genialen Aufstellung nicht beschränkt. </p>
</div></div></div>
<div class="styled-box">
Durch tippen/klicken auf ein Feld kann eine Statue platziert/entfernt werden.
<<button"schwere Version">>
<<goto "statuen_schwer">>
[[statuen_schwer]]
<</button>>
</div>
<div id="chessboard"></div>
<div id="successMessage" class="hidden">
<p>Als Du die letzte Statue an den richtigen Ort schiebst, vernimmst du das inzwischen vertraute Krachen welches den neuen Pfad verkündet</p>
<<button"weiter">>
<<goto "dino Köpfe">>
[[dino Köpfe]]
<</button>>
</p>
</div>
<style>
.nqueens-container {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
max-width: vh90%;
margin: auto;
}
h1 {
font-size: 24px;
margin-bottom: 10px;
}
#chessboard {
display: grid;
gap: 2px;
max-height:90vh;
max-width: 90vh;;
margin: 20px auto;
}
.square {
width: 100%;
padding-bottom: 100%;
position: relative;
cursor: pointer;
background-color: #fff;
border: 1px solid #000;
margin-bottom: -2px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' viewBox='0 0 700 700' width='700' height='700' opacity='0.4'%3E%3Cdefs%3E%3Cfilter id='nnnoise-filter' x='-20%25' y='-20%25' width='140%25' height='140%25' filterUnits='objectBoundingBox' primitiveUnits='userSpaceOnUse' color-interpolation-filters='linearRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.067' numOctaves='4' seed='15' stitchTiles='stitch' x='0%25' y='0%25' width='100%25' height='100%25' result='turbulence'%3E%3C/feTurbulence%3E%3CfeSpecularLighting surfaceScale='6' specularConstant='0.9' specularExponent='20' lighting-color='%237f796f' x='0%25' y='0%25' width='100%25' height='100%25' in='turbulence' result='specularLighting'%3E%3CfeDistantLight azimuth='3' elevation='90'%3E%3C/feDistantLight%3E%3C/feSpecularLighting%3E%3C/filter%3E%3C/defs%3E%3Crect width='700' height='700' fill='%23a9a097ff'%3E%3C/rect%3E%3Crect width='700' height='700' fill='%237f796f' filter='url(%23nnnoise-filter)'%3E%3C/rect%3E%3C/svg%3E");
}
.queen,
.queen-red {
position: absolute;
top: 50%;
left: 50%;
width: 140%;
height: auto;
transform: translate(-50%, -60%);
font-size: 2em;
pointer-events: none;
animation: drop 0.5s ease-in-out;
}
.queen-red {
filter: brightness(100%) contrast(22.3%) sepia(100%) saturate(172.6%) hue-rotate(309.6deg);
animation: none;
}
.queen-remove {
animation: lift 0.5s ease-in-out forwards;
}
@keyframes lift {
from {
transform: translateY(0) translate(-50%, -60%);
opacity: 1;
}
to {
transform: translateY(-100%) translate(-50%, -60%);
opacity: 0;
}
}
.collision {
background-color: rgba(255, 0, 0, 0.5);
animation: blink 0.6s forwards;
}
@keyframes drop {
from {
transform: translateY(-100%) translate(-50%, -60%);
opacity: 0;
}
to {
transform: translateY(0) translate(-50%, -60%);
opacity: 1;
}
}
@keyframes blink {
0% {
background-color: rgba(255, 0, 0, 0.5);
}
50% {
background-color: rgba(255, 0, 0, 0.8);
}
100% {
background-color: rgba(255, 0, 0, 0.5);
}
}
.hidden {
display: none;
}
#successMessage {
margin-top: 2px;
font-size: 18px;
}
@keyframes pop {
0% {
transform: scale(1);
}
50% {
transform: scale(0.7);
}
100% {
transform: scale(1);
}
}
.square:focus {
animation: pop 1.3s;
}
.square:hover {
filter: brightness(50%);
background-color: white;
transform: translateY(-4px);
transition: transform 250ms cubic-bezier(.3, .7, .4, 1.5);
}
</style>
<<timed 200ms>>
<<script >>
const nQueens = 5; // Set the number of queens (and board size)
const chessboard = document.getElementById('chessboard');
const successMessage = document.getElementById('successMessage');
let queens = [];
// Set the chessboard grid based on the number of queens
chessboard.style.gridTemplateColumns = `repeat(${nQueens}, 1fr)`;
chessboard.style.gridTemplateRows = `repeat(${nQueens}, 1fr)`;
// Initialize the chessboard
for (let row = 0; row < nQueens; row++) {
for (let col = 0; col < nQueens; col++) {
const square = document.createElement('div');
square.classList.add('square');
square.dataset.row = row;
square.dataset.col = col;
square.addEventListener('click', handleSquareClick);
chessboard.appendChild(square);
}
}
function handleSquareClick(e) {
const row = parseInt(e.target.dataset.row);
const col = parseInt(e.target.dataset.col);
const queenIndex = queens.findIndex(q => q.row === row && q.col === col);
if (queenIndex >= 0) {
// Remove queen
queens.splice(queenIndex, 1);
const queenImg = e.target.querySelector('.queen');
queenImg.classList.add('queen-remove');
setTimeout(() => {
e.target.innerHTML = '';
}, 500); //
} else if (queens.length < nQueens) {
const collisions = getCollisionSquares(row, col);
if (collisions.length === 0) {
// Place queen
e.target.innerHTML = '<img class="queen" src="https://glumbosch.github.io/queste24/bilder/echsenstatue2.png">';
queens.push({ row, col });
if (queens.length === nQueens) {
// Unhide success message if all queens are placed without collisions
successMessage.classList.remove('hidden');
UI.alert("Als Du die Letzte Statue an den richtigen Ort schiebst, vernimmst du das inzwischen vertraute Krachen welchen den neuen Pfad verkündet.")
}
} else {
e.target.innerHTML = '<img class="queen-red" src="https://glumbosch.github.io/queste24/bilder/echsenstatue2.png">';
// Highlight only the collision squares
collisions.forEach(square => {
square.classList.add('collision');
setTimeout(() => {
square.classList.remove('collision');
e.target.innerHTML = '';
}, 600);
});
}
}
}
function getCollisionSquares(row, col) {
const collisions = [];
const boardSize = 8; // Assuming an 8x8 chessboard
queens.forEach(q => {
// Horizontal and Vertical paths
if (q.row === row) {
const startCol = Math.min(col, q.col);
const endCol = Math.max(col, q.col);
for (let c = startCol; c <= endCol; c++) {
const square = document.querySelector(`.square[data-row='${row}'][data-col='${c}']`);
collisions.push(square);
}
}
if (q.col === col) {
const startRow = Math.min(row, q.row);
const endRow = Math.max(row, q.row);
for (let r = startRow; r <= endRow; r++) {
const square = document.querySelector(`.square[data-row='${r}'][data-col='${col}']`);
collisions.push(square);
}
}
// Diagonal paths
if (Math.abs(q.row - row) === Math.abs(q.col - col)) {
const rowStep = q.row > row ? 1 : -1;
const colStep = q.col > col ? 1 : -1;
let r = row;
let c = col;
while (r >= 0 && r < boardSize && c >= 0 && c < boardSize) {
const square = document.querySelector(`.square[data-row='${r}'][data-col='${c}']`);
collisions.push(square);
if (r === q.row && c === q.col) break;
r += rowStep;
c += colStep;
}
}
});
return collisions;
}
<</script>>
<</timed>>
<<script>>
function ScrollHeight() {
var content = document.querySelector('.embedded-parchment #parchment');
var container = document.querySelector('.embedded-parchment #contain');
if (content && container) {
content.style.height = container.offsetHeight + 'px';
}
console.log("external");
}
setTimeout(ScrollHeight, 200);
setTimeout(ScrollHeight, 1000);
setTimeout(ScrollHeight, 3000);
<</script>> <div class="styled-box">
<p>Dieser Raum gedenkt der Schlacht von Krrz'Cha die $koenigname. durch seine großaritge Heereskunst für sich entscheiden konnte.</p>
</div>
<div class="embedded-parchment"><div id="parchment"></div><div class="parch"><div id="contain">
<p>Seine besondere Weißheit zeigte unser Herrscher durch eine geschickte Aufstellung seiner Truppen. In jeder Schlachtreihe stand nur eine Einheit. Auch die sicht nach vorne und nach hinten war für alle Truppen frei. Um den Geschickten Einsatz des Speeres zu ermöglichen wurden auch die diagnoalen Bewegungsmöglichkeiten in dieser genialen Aufstellung nicht beschränkt.</p>
</div></div></div>
<div class="styled-box">
Durch tippen/klicken auf ein Feld kann eine Statue platziert/entfernt werden.
<<button"normale Version">>
<<goto "statuen">>
[[statuen]]
<</button>>
</div>
<div id="chessboard"></div>
<div id="successMessage" class="hidden">
<p>Als Du die Letzte Statue an den richtigen Ort schiebst, vernimmst du das inzwischen vertraute Krachen, das den neuen Pfad verkündet.</p>
<<button"weiter">>
<<goto "dino Köpfe">>
[[dino Köpfe]]
<</button>>
</p>
</div>
<style>
.nqueens-container {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
max-width: vh90%;
margin: auto;
}
h1 {
font-size: 24px;
margin-bottom: 10px;
}
#chessboard {
display: grid;
gap: 2px;
max-height:90vh;
max-width: 90vh;;
margin: 20px auto;
}
.square {
width: 100%;
padding-bottom: 100%;
position: relative;
cursor: pointer;
background-color: #fff;
border: 1px solid #000;
margin-bottom: -2px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' viewBox='0 0 700 700' width='700' height='700' opacity='0.4'%3E%3Cdefs%3E%3Cfilter id='nnnoise-filter' x='-20%25' y='-20%25' width='140%25' height='140%25' filterUnits='objectBoundingBox' primitiveUnits='userSpaceOnUse' color-interpolation-filters='linearRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.067' numOctaves='4' seed='15' stitchTiles='stitch' x='0%25' y='0%25' width='100%25' height='100%25' result='turbulence'%3E%3C/feTurbulence%3E%3CfeSpecularLighting surfaceScale='6' specularConstant='0.9' specularExponent='20' lighting-color='%237f796f' x='0%25' y='0%25' width='100%25' height='100%25' in='turbulence' result='specularLighting'%3E%3CfeDistantLight azimuth='3' elevation='90'%3E%3C/feDistantLight%3E%3C/feSpecularLighting%3E%3C/filter%3E%3C/defs%3E%3Crect width='700' height='700' fill='%23a9a097ff'%3E%3C/rect%3E%3Crect width='700' height='700' fill='%237f796f' filter='url(%23nnnoise-filter)'%3E%3C/rect%3E%3C/svg%3E");
}
.queen,
.queen-red {
position: absolute;
top: 50%;
left: 50%;
width: 140%;
height: auto;
transform: translate(-50%, -60%);
font-size: 2em;
pointer-events: none;
animation: drop 0.5s ease-in-out;
}
.queen-red {
filter: brightness(100%) contrast(22.3%) sepia(100%) saturate(172.6%) hue-rotate(309.6deg);
animation: none;
}
.queen-remove {
animation: lift 0.5s ease-in-out forwards;
}
@keyframes lift {
from {
transform: translateY(0) translate(-50%, -60%);
opacity: 1;
}
to {
transform: translateY(-100%) translate(-50%, -60%);
opacity: 0;
}
}
.collision {
background-color: rgba(255, 0, 0, 0.5);
animation: blink 0.6s forwards;
}
@keyframes drop {
from {
transform: translateY(-100%) translate(-50%, -60%);
opacity: 0;
}
to {
transform: translateY(0) translate(-50%, -60%);
opacity: 1;
}
}
@keyframes blink {
0% {
background-color: rgba(255, 0, 0, 0.5);
}
50% {
background-color: rgba(255, 0, 0, 0.8);
}
100% {
background-color: rgba(255, 0, 0, 0.5);
}
}
.hidden {
display: none;
}
#successMessage {
margin-top: 2px;
font-size: 18px;
}
@keyframes pop {
0% {
transform: scale(1);
}
50% {
transform: scale(0.7);
}
100% {
transform: scale(1);
}
}
.square:focus {
animation: pop 1.3s;
}
.square:hover {
filter: brightness(50%);
background-color: white;
transform: translateY(-4px);
transition: transform 250ms cubic-bezier(.3, .7, .4, 1.5);
}
</style>
<<timed 200ms>>
<<script >>
const nQueens = 6; // Set the number of queens (and board size)
const chessboard = document.getElementById('chessboard');
const successMessage = document.getElementById('successMessage');
let queens = [];
// Set the chessboard grid based on the number of queens
chessboard.style.gridTemplateColumns = `repeat(${nQueens}, 1fr)`;
chessboard.style.gridTemplateRows = `repeat(${nQueens}, 1fr)`;
// Initialize the chessboard
for (let row = 0; row < nQueens; row++) {
for (let col = 0; col < nQueens; col++) {
const square = document.createElement('div');
square.classList.add('square');
square.dataset.row = row;
square.dataset.col = col;
square.addEventListener('click', handleSquareClick);
chessboard.appendChild(square);
}
}
function handleSquareClick(e) {
const row = parseInt(e.target.dataset.row);
const col = parseInt(e.target.dataset.col);
const queenIndex = queens.findIndex(q => q.row === row && q.col === col);
if (queenIndex >= 0) {
// Remove queen
queens.splice(queenIndex, 1);
const queenImg = e.target.querySelector('.queen');
queenImg.classList.add('queen-remove');
setTimeout(() => {
e.target.innerHTML = '';
}, 500); //
} else if (queens.length < nQueens) {
const collisions = getCollisionSquares(row, col);
if (collisions.length === 0) {
// Place queen
e.target.innerHTML = '<img class="queen" src="https://glumbosch.github.io/queste24/bilder/echsenstatue2.png">';
queens.push({ row, col });
if (queens.length === nQueens) {
// Unhide success message if all queens are placed without collisions
successMessage.classList.remove('hidden');
UI.alert("Als Du die Letzte Statue an den richtigen Ort schiebst, vernimmst du das inzwischen vertraute Krachen welchen den neuen Pfad verkündet.")
}
} else {
e.target.innerHTML = '<img class="queen-red" src="https://glumbosch.github.io/queste24/bilder/echsenstatue2.png">';
// Highlight only the collision squares
collisions.forEach(square => {
square.classList.add('collision');
setTimeout(() => {
square.classList.remove('collision');
e.target.innerHTML = '';
}, 600);
});
}
}
}
function getCollisionSquares(row, col) {
const collisions = [];
const boardSize = 8; // Assuming an 8x8 chessboard
queens.forEach(q => {
// Horizontal and Vertical paths
if (q.row === row) {
const startCol = Math.min(col, q.col);
const endCol = Math.max(col, q.col);
for (let c = startCol; c <= endCol; c++) {
const square = document.querySelector(`.square[data-row='${row}'][data-col='${c}']`);
collisions.push(square);
}
}
if (q.col === col) {
const startRow = Math.min(row, q.row);
const endRow = Math.max(row, q.row);
for (let r = startRow; r <= endRow; r++) {
const square = document.querySelector(`.square[data-row='${r}'][data-col='${col}']`);
collisions.push(square);
}
}
// Diagonal paths
if (Math.abs(q.row - row) === Math.abs(q.col - col)) {
const rowStep = q.row > row ? 1 : -1;
const colStep = q.col > col ? 1 : -1;
let r = row;
let c = col;
while (r >= 0 && r < boardSize && c >= 0 && c < boardSize) {
const square = document.querySelector(`.square[data-row='${r}'][data-col='${c}']`);
collisions.push(square);
if (r === q.row && c === q.col) break;
r += rowStep;
c += colStep;
}
}
});
return collisions;
}
<</script>>
<</timed>>
<<script>>
function ScrollHeight() {
var content = document.querySelector('.embedded-parchment #parchment');
var container = document.querySelector('.embedded-parchment #contain');
if (content && container) {
content.style.height = container.offsetHeight + 'px';
}
console.log("external");
}
setTimeout(ScrollHeight, 200);
setTimeout(ScrollHeight, 1000);
setTimeout(ScrollHeight, 3000);
<</script>> <div class="styled-box">
<p>Du gelangst in eine weitere Kammer der Gruft von $koenigname.</p> <p>Dieser Raum enthält zwei mächtige Statuen und acht imposante Tore, die auf einem weiten Feld aus 8 mal 8 Bodenplatten verteilt sind. Die Wände sind mit kunstvollen Malereien verziert, welche die rituelle Prozession zur Thronbesteigung von $koenigname beschreiben.</p>
</div>
<div class="embedded-parchment"><div id="parchment"></div><div class="parch"><div id="contain">
<p>Die heilige Zeremonie führte den König durch alle acht Tore der Stadt. Jedes Tor wurde in Ehrerbietung durchschritten, stets in gerader Linie, ohne auch nur einen Schritt zur Seite zu machen, denn der Weg durch die Tore war ein Symbol der Klarheit und Entschlossenheit, die den König auf seinen Thron führten.</p> <p>Auf seinem Weg ehrte der König auch die Statuen seiner ehrwürdigen Vorgängerinnen. Es war ein Zeichen des tiefsten Respekts, dass er sich ihnen auf einem geraden Pfad näherte, stets mindestens zwei Schritte, bevor er in tiefer Andacht eine sanfte Drehung um ein Viertel vollzog. Nachdem die Drehung vollzogen war, entfernte sich der König wieder auf geradem Wege, mindestens zwei Schritte, bevor er seinen Weg fortsetzte.</p> <p>Der Pfad des Königs war stets von Sorgfalt geprägt. Kein Weg, den er einschlug, durfte sich mit einem vorherigen kreuzen. In dem Raum war die Ordnung der Schritte heilig, der ungestörte Fluss seines Weges spiegelte die ungebrochene Linie seiner Abstammung und Autorität wider.</p> <p>So muss auch der Suchende, der den Pfad des Königs nachahmt, den Raum durch die Tore stets auf gerader Linie durchqueren und den Statuen mit der gebührenden Ehre begegnen, indem er sich ihnen geradlinig nähert, um dann die rituelle Kurve zu vollziehen. Vor oder nach jedem Tor muss eine Viertel Drehung als 2. Schritt nach beziehungsweise vor dem Tor vollzogen werden. Kein Schritt darf zurückweichen, kein Pfad darf sich kreuzen, so wie es in niedergeschrieben steht.</p>
</div></div></div>
<div class="styled-box">
Durch tippen/klicken auf die Grenzen ziwschen Zwie felden kann ein Wegstück eingezeichnet werden. Ebenso kann man durch ziehen einen Pfad einzeichnen.
</div>
<<done>>
<<timed 100ms>>
<<script>> var content = document.querySelector('.embedded-parchment #parchment');
var container = document.querySelector('.embedded-parchment #contain');
content.style.height = container.offsetHeight + 'px';
resizeCanvas();
<</script>>
<</timed>>
<</done>>
<style>
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
flex-direction: column;
canvas {
background-color: #f0f0f0;
width: 90vw;
min-width:50vw;
height: 90vw;
margin:0 50%;
max-width: 90%;
max-height: 90vw;
}
textarea {
display:none;
margin-top: 20px;
width: 90vw;
max-width: 400px;
height: 200px;
}
.pathpuzzle{
display:flex;
flex-direction: row;
flex-wrap: wrap;
background-color: #f0f0f0;
align-items:center;}
.canvas-container {
min-width: 25%;
margin: 24px auto;
max-width: 85vw;
max-height: 85vw;
width:800px;
height:800px;
}
.button-container {
display: flex;
margin: 29px auto;
}
@media only screen and (max-width: 630px) {
.button-container {
display: block;
}}
.button-container button {
display:flex;
margin:20px;
padding:20px;
min-width:10%;}
#result{
margin: 10px auto;
padding: 18px;
display:none;
}
</style>
<div style="margin: -4em;"></div><div class="pathpuzzle">
<div class="canvas-container"><canvas id="masyuCanvas" ></canvas></div><div id="result" >
</div><div id="foo" style="display:none"><<button"weiter">><<goto "statuen">>
[[statuen]]
<</button>>
</div>
<div class="button-container">
<button id="checkPathButton">Pfad prüfen</button>
<button id="resetButton">Zurücksetzen</button>
<<button"normale Version">>
<<goto "pfade">>
[[pfade]]
<</button>>
</div>
</div>
<<button"Tip">>
<<script>>
UI.alert(' <p> Es handelt sich um ein Masyu Puzzle.</p><img src="https://glumbosch.github.io/queste24/bilder/path_rules.png" alt="Path Rules">')
<</script>>
<</button>>
<textarea id="gameStateText" display=block></textarea>
<<timed 50ms>>
<script>{
const canvas = document.getElementById('masyuCanvas');
const ctx = canvas.getContext('2d');
const gameStateText = document.getElementById('gameStateText');
const checkPathButton = document.getElementById('checkPathButton');
const resultDiv = document.getElementById('result');
/*puzzle setup*/
/*statue 2*/
/*white gate 3*/
const board = [
[0, 0, 3,0, 0, 0 ,0, 0],
[3, 0, 0, 0, 0, 0, 3, 3],
[0, 0, 3, 3, 0, 0, 3, 0],
[0, 0, 0, 0, 0, 0, 0, 0],
[0, 3, 0, 0, 3, 3, 0, 3],
[0, 3, 0, 2, 0, 0, 0, 0],
[3, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 3, 0, 0, 0, 2, 0]
];
/*number can be extracted from ttextare, if display is set to value other none.*/
const solution = [
[6,10,10,12,0,0,6,12],
[5,6,10,9,0,0,5,5],
[5,3,10,10,12,0,5,5],
[5,0,6,12,5,6,9,5],
[3,10,9,5,5,5,0,5],
[6,10,10,9,3,9,6,9],
[5,0,0,6,12,0,5,0],
[3,10,10,9,3,10,9,0]
];
const gameState = Array.from({ length: board.length }, () => Array(board[0].length).fill(0));
const imageRotations = Array.from({ length: board.length }, () => Array(board[0].length).fill(null));
const imageUrl1 = 'https://glumbosch.github.io/queste24/bilder/echsenstatue2.png'; /*echsenstature*/
const imageUrl2 = 'https://glumbosch.github.io/queste24/bilder/gate.png';
let image1 = new Image();
let image2 = new Image();
image1.src = imageUrl1;
image2.src = imageUrl2;
function resizeCanvas() {
var container = document.querySelector('.canvas-container');
if (!container) {
console.error('Container element with class "canvas-container" not found.');
return;
}
const maxWidth = container.clientWidth;
const maxHeight = container.clientHeight;
if (!board || !board[0] || !board.length) {
console.error('Board is not defined or is empty.');
return;
}
const cellSize = Math.min(maxWidth / board[0].length, maxHeight / board.length);
if (!canvas) {
console.error('Canvas element is not defined.');
return;
}
canvas.width = cellSize * board[0].length;
canvas.height = cellSize * board.length;
if (typeof drawBoard === 'function') {
drawBoard(cellSize);
} else {
console.error('drawBoard function is not defined.');
}
if (typeof drawGameState === 'function') {
drawGameState(cellSize);
} else {
console.error('drawGameState function is not defined.');
}
}
var container = document.querySelector('.canvas-container');
container.clientWidth="50%";
container.clientHeigth="70vw";
resizeCanvas();
function drawBoard(cellSize) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.lineWidth = 1;
ctx.strokeStyle = 'black';
for (let row = 0; row < board.length; row++) {
for (let col = 0; col < board[row].length; col++) {
ctx.strokeRect(col * cellSize, row * cellSize, cellSize, cellSize);
if (board[row][col] === 1) {
ctx.beginPath();
ctx.arc(col * cellSize + cellSize / 2, row * cellSize + cellSize / 2, cellSize / 4, 0, 2 * Math.PI);
ctx.fillStyle = 'black';
ctx.fill();
} else if (board[row][col] === 2) {
const rotation = imageRotations[row][col] !== null ? imageRotations[row][col] : 0* 360;
if (imageRotations[row][col] === null) {
imageRotations[row][col] = rotation;
}
drawRotatedImage(ctx, image1, col * cellSize + cellSize / 2, row * cellSize + cellSize / 2, cellSize / 2, rotation);
} else if (board[row][col] === 3) {
drawImage(ctx, image2, col * cellSize + cellSize / 2, row * cellSize + cellSize / 2, cellSize / 2);
}
}
}
}
function drawGameState(cellSize) {
ctx.lineWidth = cellSize / 5;
ctx.strokeStyle = 'rgba(0, 0, 255, 1)';
for (let row = 0; row < gameState.length; row++) {
for (let col = 0; col < gameState[row].length; col++) {
const cellState = gameState[row][col];
if (cellState & 1) {
ctx.beginPath();
ctx.moveTo(col * cellSize + cellSize / 2, row * cellSize - ctx.lineWidth / 2);
ctx.lineTo(col * cellSize + cellSize / 2, row * cellSize + cellSize / 2 + ctx.lineWidth / 2);
ctx.stroke();
}
if (cellState & 2) {
ctx.beginPath();
ctx.moveTo(col * cellSize + cellSize / 2 - ctx.lineWidth / 2, row * cellSize + cellSize / 2);
ctx.lineTo(col * cellSize + cellSize + ctx.lineWidth / 2, row * cellSize + cellSize / 2);
ctx.stroke();
}
if (cellState & 4) {
ctx.beginPath();
ctx.moveTo(col * cellSize + cellSize / 2, row * cellSize + cellSize / 2 - ctx.lineWidth / 2);
ctx.lineTo(col * cellSize + cellSize / 2, row * cellSize + cellSize + ctx.lineWidth / 2);
ctx.stroke();
}
if (cellState & 8) {
ctx.beginPath();
ctx.moveTo(col * cellSize, row * cellSize + cellSize / 2);
ctx.lineTo(col * cellSize + cellSize / 2, row * cellSize + cellSize / 2);
ctx.stroke();
}
}
}
}
function updateGameStateText() {
gameStateText.value = "[" + gameState.map(row => row.join(',')).join('],\n[') + "]";
}
function toggleLine(row, col, line) {
if (line === 1 && row > 0) gameState[row - 1][col] ^= 4;
if (line === 2 && col < board[0].length - 1) gameState[row][col + 1] ^= 8;
if (line === 4 && row < board.length - 1) gameState[row + 1][col] ^= 1;
if (line === 8 && col > 0) gameState[row][col - 1] ^= 2;
gameState[row][col] ^= line;
}
function drawRotatedImage(ctx, image, x, y, size, rotation) {
let scale = 0.8;
ctx.save();
ctx.translate(x, y);
ctx.scale(scale, scale);
ctx.rotate((rotation * Math.PI) / 180);
ctx.drawImage(image, -size, -size, size * 2, size * 2);
ctx.restore();
}
function drawImage(ctx, image, x, y, size) {
ctx.drawImage(image, x - size, y - size, size * 2, size * 2);
}
let tries = 0;
checkPathButton.addEventListener('click', () => {
tries++;
let isSolved = true;
for (let row = 0; row < gameState.length; row++) {
for (let col = 0; col < gameState[row].length; col++) {
if (gameState[row][col] !== solution[row][col]) {
isSolved = false;
break;
}
}
if (!isSolved) break;
}
if (isSolved) {
let text =`<p>Du gehst den Pfad der Zeromonie nach, wie es in der Inschrift beschrieben ist. Als du den Rundlauf abschließt fällt eine der massiven Wandplatten krachend herunter. Eine versteckte Tür! </p>`;
resultDiv.innerHTML=text;
resultDiv.style.display="block";
document.getElementById("foo").style.display="block";
} else {
if (tries <= 2) {
resultDiv.style.display = "block";
let tip = "<div class='simpleparch'> Du folgst dem Weg gemäß der historischen Beschreibung - Oder doch nicht? Es tut sich zumindest nichts..</div>";
resultDiv.innerHTML += tip;
};
if (tries > 2) {
resultDiv.style.display = "block";
let tip2 = "Leider falsch. Hast du daran gedacht, das man direkt nach und vor einer Statue nicht nochmals abbiegen darf? ";
tip2+='<a data-passage="Intro Text" class="link-internal" role="link" tabindex="0">beginne das Abenteuer</a>'
resultDiv.innerHTML = tip2;
}
}
});
canvas.addEventListener('click', (event) => {
const rect = canvas.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;
const col = Math.floor(x / (canvas.width / board[0].length));
const row = Math.floor(y / (canvas.height / board.length));
if (row >= 0 && row < board.length && col >= 0 && col < board[0].length) {
const cellX = (x % (canvas.width / board[0].length)) / (canvas.width / board[0].length);
const cellY = (y % (canvas.height / board.length)) / (canvas.height / board.length);
let line = 0;
if (cellY < 0.25 && cellX > 0.25 && cellX < 0.75) line = 1;
else if (cellX > 0.75 && cellY > 0.25 && cellY < 0.75) line = 2;
else if (cellY > 0.75 && cellX > 0.25 && cellX < 0.75) line = 4;
else if (cellX < 0.25 && cellY > 0.25 && cellY < 0.75) line = 8;
if (line === 1 && row === 0) return;
if (line === 2 && col === board[0].length - 1) return;
if (line === 4 && row === board.length - 1) return;
if (line === 8 && col === 0) return;
toggleLine(row, col, line);
drawBoard(canvas.width / board[0].length);
drawGameState(canvas.width / board[0].length);
updateGameStateText();
}
});
image1.onload = image2.onload = () => {
resizeCanvas();
updateGameStateText();
};
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
let isDrawing = false;
let lastRow = null;
let lastCol = null;
canvas.addEventListener('mousedown', (event) => {
isDrawing = true;
handleInteraction(event);
});
canvas.addEventListener('mouseup', () => {
isDrawing = false;
lastRow = null;
lastCol = null;
});
canvas.addEventListener('mousemove', (event) => {
if (isDrawing) {
handleInteraction(event);
}
});
canvas.addEventListener('touchstart', (event) => {
isDrawing = true;
handleInteraction(event.touches[0]);
});
canvas.addEventListener('touchend', () => {
isDrawing = false;
lastRow = null;
lastCol = null;
});
canvas.addEventListener('touchmove', (event) => {
if (isDrawing) {
handleInteraction(event.touches[0]);
}
event.preventDefault();
});
function handleInteraction(event) {
resizeCanvas();
const rect = canvas.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;
const col = Math.floor(x / (canvas.width / board[0].length));
const row = Math.floor(y / (canvas.height / board.length));
if (row >= 0 && row < board.length && col >= 0 && col < board[0].length) {
if (lastRow !== null && lastCol !== null) {
if (row === lastRow && col === lastCol - 1) {
toggleLine(row, col, 2);
} else if (row === lastRow && col === lastCol + 1) {
toggleLine(lastRow, lastCol, 2);
} else if (row === lastRow - 1 && col === lastCol) {
toggleLine(row, col, 4);
} else if (row === lastRow + 1 && col === lastCol) {
toggleLine(lastRow, lastCol, 4);
}
}
lastRow = row;
lastCol = col;
drawBoard(canvas.width / board[0].length);
drawGameState(canvas.width / board[0].length);
updateGameStateText();
}
}
// Add this function to reset the game state
function resetGameState() {
for (let row = 0; row < gameState.length; row++) {
for (let col = 0; col < gameState[row].length; col++) {
gameState[row][col] = 0;
}
}
drawBoard(canvas.width / board[0].length);
drawGameState(canvas.width / board[0].length);
updateGameStateText();
}
// Add an event listener for the reset button
const resetButton = document.getElementById('resetButton');
resetButton.addEventListener('click', resetGameState);
}
</script>
<</timed>>
<<done>>
<<script>> window.dispatchEvent(new Event('resize'));
<</script>>
<</done>>