pytanie – blok lalara puki mniukacz nie wróci

Witam. Mam tutaj kod do swojej gry zrobiony przez sztuczną inteligencję. ale nie wiem jak dodać dźwięki radarów i kroków. i jak potem dodać na stronie. Ktoś ma pomysł?
Oto kod.
<html lang="pl"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Magiczny Warsztat</title>
<meta name="description" content="Uratuj warsztat czarodzieja przed powiększonymi chowańcami w tej dostępnej, magicznej przygodzie!">
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
font-family: Arial, sans-serif;
background-color: #1a1a2e;
color: #ffffff;
overflow: hidden;
}
#gameArea {
width: 100%;
height: 100%;
position: relative;
}
#startMenu, #gameOverMenu, #instructionsMenu {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
background-color: rgba(0,0,0,0.7);
padding: 20px;
border-radius: 10px;
max-width: 80%;
max-height: 80%;
overflow-y: auto;
}
button {
font-size: 1.2em;
padding: 10px 20px;
margin: 10px;
cursor: pointer;
background-color: #4a4e69;
color: #ffffff;
border: none;
border-radius: 5px;
}
#player, .creature, .item {
position: absolute;
transition: all 0.3s ease;
}
#score, #timer, #health, #mana {
position: absolute;
top: 10px;
font-size: 1.2em;
}
#score { left: 10px; }
#timer { right: 10px; }
#health { left: 10px; top: 40px; }
#mana { left: 10px; top: 70px; }
.visually-hidden {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px);
clip: rect(1px, 1px, 1px, 1px);
white-space: nowrap;
}
#spells {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 10px;
}
.spell {
padding: 5px 10px;
background-color: #4a4e69;
border-radius: 5px;
cursor: pointer;
}
#narratorToggle, #instructionsButton {
position: absolute;
top: 10px;
z-index: 1000;
}
#narratorToggle { right: 10px; }
#instructionsButton { right: 150px; }
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><style>
body, html {
touch-action: manipulation;
user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
</style></head>
<body>
<div id="gameArea" role="application" aria-label="Magiczny Warsztat">
<div id="startMenu">
<h1>Magiczny Warsztat</h1>
<p>Pomóż czarodziejowi pozbyć się powiększonych chowańców!</p>
<button id="startButton">Rozpocznij grę</button>
<button id="narratorToggle">Włącz/Wyłącz narrację</button>
<button id="instructionsButton">Instrukcje</button>
</div>
<div id="gameOverMenu" style="display: none;">
<h2>Koniec gry!</h2>
<p>Twój wynik: <span id="finalScore"></span></p>
<button id="restartButton">Zagraj ponownie</button>
</div>
<div id="instructionsMenu" style="display: none;">
<h2>Instrukcje</h2>
<p>Dla graczy widzących:</p>
<ul>
<li>Użyj strzałek lub przeciągnij palcem, aby się poruszać</li>
<li>Spacja lub dotknij ekranu, aby strzelać</li>
<li>Użyj klawiszy 1-4, aby rzucać zaklęcia</li>
</ul>
<p>Dla graczy niewidomych:</p>
<ul>
<li>Użyj klawiszy W, A, S, D do poruszania się</li>
<li>Enter, aby strzelać</li>
<li>Klawisze 1, 2, 3, 4 do rzucania zaklęć</li>
</ul>
<button id="closeInstructions">Zamknij instrukcje</button>
</div>
<div id="score" aria-live="polite">Wynik: 0</div>
<div id="timer" aria-live="polite">Czas: 60</div>
<div id="health" aria-live="polite">Życie: 100</div>
<div id="mana" aria-live="polite">Mana: 100</div>
<div id="player" role="img" aria-label="Gracz"></div>
<div id="spells">
<div class="spell" data-spell="fireball">1: Kula ognia</div>
<div class="spell" data-spell="wind">2: Dmący wicher</div>
<div class="spell" data-spell="heal">3: Leczenie zdrowia</div>
<div class="spell" data-spell="firewave">4: Fala ognia</div>
</div>
</div>

let score = 0;
let timeLeft = 60;
let health = 100;
let mana = 100;
let gameInterval;
let creatures = [];
let items = [];
let isGameActive = false;
let isShieldActive = false;
let isNarratorEnabled = false;
let radarInterval;
let lastMove = 0;

function startGame() {
startMenu.style.display = 'none’;
instructionsMenu.style.display = 'none’;
isGameActive = true;
score = 0;
timeLeft = 60;
health = 100;
mana = 100;
updateScore();
updateTimer();
updateHealth();
updateMana();
spawnPlayer();
gameInterval = setInterval(gameLoop, 1000);
radarInterval = setInterval(playRadarSound, 2000);
backgroundMusic.play();
if (isNarratorEnabled) {
speak("Gra rozpoczęta. Powodzenia!");
}
}

function gameLoop() {
if (timeLeft > 0) {
timeLeft–;
updateTimer();
if (Math.random() < 0.3) spawnCreature();
if (Math.random() < 0.1) spawnItem();
} else {
endGame();
}
}

function spawnPlayer() {
player.style.left = '50%’;
player.style.top = '90%’;
player.innerHTML = `
<svg width="40" height="40" viewBox="0 0 40 40">
<rect x="10" y="10" width="20" height="30" fill="#4a4e69" />
<circle cx="20" cy="15" r="10" fill="#9a8c98" />
</svg>
`;
}

function spawnCreature() {
const creature = document.createElement(’div’);
creature.className = 'creature’;
creature.role = 'img’;
creature.ariaLabel = 'Chowaniec’;
creature.style.left = Math.random() * (gameArea.clientWidth – 40) + 'px’;
creature.style.top = '0px’;
creature.innerHTML = `
<svg width="40" height="40" viewBox="0 0 40 40">
<circle cx="20" cy="20" r="20" fill="#c9ada7" />
<circle cx="15" cy="15" r="5" fill="#22223b" />
<circle cx="25" cy="15" r="5" fill="#22223b" />
</svg>
`;
gameArea.appendChild(creature);
creatures.push(creature);
moveCreature(creature);
if (isNarratorEnabled) {
speak("Nowy chowaniec pojawił się!");
}
}

function shoot(x, y) {
const bullet = document.createElement(’div’);
bullet.style.position = 'absolute’;
bullet.style.left = x + 'px’;
bullet.style.top = y + 'px’;
bullet.innerHTML = `
<svg width="10" height="10" viewBox="0 0 10 10">
<circle cx="5" cy="5" r="5" fill="#f2e9e4" />
</svg>
`;
gameArea.appendChild(bullet);
shootSound.play();

function castSpell(spellType) {
if (mana < 20) {
if (isNarratorEnabled) {
speak("Niewystarczająca ilość many!");
}
return;
}
mana -= 20;
updateMana();
spellSound.play();

switch (spellType) {
case 'fireball’:
castFireball();
if (isNarratorEnabled) speak("Rzucono kulę ognia!");
break;
case 'wind’:
castWind();
if (isNarratorEnabled) speak("Rzucono dmący wicher!");
break;
case 'heal’:
castHeal();
if (isNarratorEnabled) speak("Rzucono leczenie zdrowia!");
break;
case 'firewave’:
castFireWave();
if (isNarratorEnabled) speak("Rzucono falę ognia!");
break;
}
}

function castFireball() {
const playerRect = player.getBoundingClientRect();
const fireball = document.createElement(’div’);
fireball.style.position = 'absolute’;
fireball.style.left = (playerRect.left + playerRect.width / 2) + 'px’;
fireball.style.top = playerRect.top + 'px’;
fireball.innerHTML = `
<svg width="20" height="20" viewBox="0 0 20 20">
<circle cx="10" cy="10" r="10" fill="#ff4500" />
</svg>
`;
gameArea.appendChild(fireball);
fireballSound.play();

function castWind() {
windSound.play();
creatures.forEach(creature => {
const creatureRect = creature.getBoundingClientRect();
let newY = creatureRect.top – 100;
if (newY < 0) newY = 0;
creature.style.top = newY + 'px’;
});
}

function castHeal() {
healSound.play();
health = Math.min(health + 30, 100);
updateHealth();
if (isNarratorEnabled) speak("Uleczono 30 punktów zdrowia!");
}

function castFireWave() {
firewaveSound.play();
const playerRect = player.getBoundingClientRect();
const fireWave = document.createElement(’div’);
fireWave.style.position = 'absolute’;
fireWave.style.left = '0px’;
fireWave.style.top = (playerRect.top – 20) + 'px’;
fireWave.style.width = '100%’;
fireWave.style.height = ’20px’;
fireWave.style.backgroundColor = 'rgba(255, 69, 0, 0.7)’;
gameArea.appendChild(fireWave);

setTimeout(() => {
if (gameArea.contains(fireWave)) {
gameArea.removeChild(fireWave);
}
}, 1000);

creatures.forEach(creature => {
const creatureRect = creature.getBoundingClientRect();
if (creatureRect.top < playerRect.top && creatureRect.top > playerRect.top – 100) {
removeCreature(creature);
score += 10;
updateScore();
}
});
}

function removeCreature(creature) {
if (gameArea.contains(creature)) {
gameArea.removeChild(creature);
creatures = creatures.filter(c => c !== creature);
creatureDeathSound.play();
}
}

function updateScore() {
scoreElement.textContent = `Wynik: ${score}`;
scoreElement.setAttribute(’aria-label’, `Aktualny wynik to ${score} punktów`);
}

function updateTimer() {
timerElement.textContent = `Czas: ${timeLeft}`;
timerElement.setAttribute(’aria-label’, `Pozostało ${timeLeft} sekund`);
}

function updateHealth() {
healthElement.textContent = `Życie: ${health}`;
healthElement.setAttribute(’aria-label’, `Pozostało ${health} punktów życia`);
}

function updateMana() {
manaElement.textContent = `Mana: ${mana}`;
manaElement.setAttribute(’aria-label’, `Pozostało ${mana} punktów many`);
}

function speak(text) {
if (’speechSynthesis’ in window) {
const utterance = new SpeechSynthesisUtterance(text);
utterance.lang = 'pl-PL’;
speechSynthesis.speak(utterance);
}
}

function playRadarSound() {
if (isGameActive && creatures.length > 0) {
radarSound.play();
}
}

function playFootstepSound() {
footstepSound.currentTime = 0;
footstepSound.play();
}

startButton.addEventListener(’click’, startGame);
restartButton.addEventListener(’click’, startGame);

narratorToggle.addEventListener(’click’, () => {
isNarratorEnabled = !isNarratorEnabled;
if (isNarratorEnabled) {
speak("Narracja włączona");
} else {
speak("Narracja wyłączona");
}
});

instructionsButton.addEventListener(’click’, () => {
instructionsMenu.style.display = 'block’;
});

closeInstructionsButton.addEventListener(’click’, () => {
instructionsMenu.style.display = 'none’;
});

let touchStartX, touchStartY;

gameArea.addEventListener(’touchstart’, (e) => {
if (!isGameActive) return;
touchStartX = e.touches[0].clientX;
touchStartY = e.touches[0].clientY;
});

gameArea.addEventListener(’touchmove’, (e) => {
if (!isGameActive) return;
const touchEndX = e.touches[0].clientX;
const touchEndY = e.touches[0].clientY;
const deltaX = touchEndX – touchStartX;
const deltaY = touchEndY – touchStartY;

const playerRect = player.getBoundingClientRect();
const newLeft = Math.min(Math.max(0, playerRect.left + deltaX), gameArea.clientWidth – playerRect.width);
const newTop = Math.min(Math.max(0, playerRect.top + deltaY), gameArea.clientHeight – playerRect.height);

player.style.left = newLeft + 'px’;
player.style.top = newTop + 'px’;

const now = Date.now();
if (now – lastMove > 300) {
playFootstepSound();
lastMove = now;
}

touchStartX = touchEndX;
touchStartY = touchEndY;
});

gameArea.addEventListener(’touchend’, (e) => {
if (!isGameActive) return;
const playerRect = player.getBoundingClientRect();
shoot(playerRect.left + playerRect.width / 2, playerRect.top);
});

document.querySelectorAll(’.spell’).forEach(spellElement => {
spellElement.addEventListener(’click’, () => {
if (isGameActive) {
castSpell(spellElement.dataset.spell);
}
});
});

footstepSound.volume = 1.0; // Increase volume to maximum
</script>
<script>
(function() {
var originalConsoleError = console.error;
console.error = function() {
window.parent.postMessage({
type: 'error’,
message: Array.from(arguments).join(’ ’)
}, '*’);
originalConsoleError.apply(console, arguments);
};

window.addEventListener(’error’, function(event) {
window.parent.postMessage({
type: 'error’,
message: event.message,
source: event.filename,
lineno: event.lineno,
colno: event.colno,
error: event.error ? event.error.stack : null
}, '*’);
});

document.addEventListener(’touchstart’, function(e) {
if (e.touches.length > 1) {
e.preventDefault();
}
}, { passive: false });

document.addEventListener(’touchend’, function(e) {
const now = (new Date()).getTime();
if (now – lastTouchEnd <= 300) {
e.preventDefault();
}
lastTouchEnd = now;
}, false);

document.addEventListener(’touchmove’, function(e) {
if (e.touches.length > 1) {
e.preventDefault();
}
}, { passive: false });
</script></body></html>

Dodaj komentarz Anuluj pisanie odpowiedzi