Dokážeš odrazit všechny toxiny, které se řítí na tvé tělo? Ukaž svůj postřeh.
OVLÁDEJ HRU ŠIPKAMI, MYŠÍ nebo PRSTEM
/* Styly platí pouze uvnitř #bouncegame-container, aby nedocházelo ke kolizím s ostatními styly stránky */
#bouncegame-container {
max-width: 420px;
margin: 20px auto;
text-align: center;
font-family: Arial, sans-serif;
}
#bouncegame-container canvas {
background: #e0f7fa; /* světlá modrá – evokuje svěžest a zdraví */
border: 2px solid #00796b; /* tmavší odstín pro kontrast */
display: block;
margin: 0 auto;
touch-action: none; /* zabráníme výchozímu chování dotykového zařízení (scrollování) */
width: 100%;
height: auto;
}
#bouncegame-container .score-display {
font-size: 18px;
color: #00796b;
margin-top: 10px;
}
#bouncegame-container .game-over {
font-size: 24px;
color: #d32f2f;
margin-top: 10px;
}
#bouncegame-container button {
margin-top: 10px;
padding: 10px 20px;
font-size: 16px;
background-color: #4caf50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
#bouncegame-container button:hover {
background-color: #43a047;
}
document.addEventListener(„DOMContentLoaded“, function() {
var canvas = document.getElementById(„gameCanvas“);
var ctx = canvas.getContext(„2d“);
var scoreDisplay = document.getElementById(„score“);
var gameOverDisplay = document.getElementById(„gameOver“);
var restartBtn = document.getElementById(„restartBtn“);
var animationFrameId;
var isGameOver = false;
var score = 0;
// Definice hráčova „jezdeckého“ zařízení (pády)
var player = {
x: canvas.width / 2 – 40, // šířka pády nastavena na 80 px
y: canvas.height – 20, // původně těsně nad spodním okrajem
width: 80,
height: 10,
vx: 0,
speed: 5,
color: „#00796b“ // tmavě tyrkysová – symbol zdraví
};
// Pole cílů – padající kolečka, která představují nezdravé potraviny
var targets = [];
var targetSpawnInterval = 2000; // nový cíl každé 2000 ms
var targetSpeed = 2; // počáteční rychlost cílů
// Funkce pro vytvoření cíle (kolečka)
function spawnTarget() {
var radius = 15;
var x = Math.random() * (canvas.width – 2 * radius) + radius;
var y = -radius; // cíl se objeví nad plátnem
var vy = targetSpeed; // počáteční rychlost směrem dolů
var color = „#d32f2f“; // červená – symbol nezdravých potravin
targets.push({ x: x, y: y, radius: radius, vy: vy, color: color });
}
var targetSpawnTimer = setInterval(spawnTarget, targetSpawnInterval);
// Aktualizace stavu hry
function update() {
// Aktualizace pozice hráče
player.x += player.vx;
if (player.x canvas.width) player.x = canvas.width – player.width;
// Aktualizace pozic cílů
for (var i = 0; i 0) {
// Kontrola kolize s hráčovou pádou
if (target.y + target.radius >= player.y &&
target.x >= player.x &&
target.x canvas.height) {
endGame();
return;
}
}
// Pokud cíl míří nahoru
else {
// Po nárazu do horního okraje plátna změní směr a začne padat
if (target.y – target.radius <= 0) {
target.vy = targetSpeed;
}
}
}
}
// Vykreslení herních prvků
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Vykreslení hráčovy pády
ctx.fillStyle = player.color;
ctx.fillRect(player.x, player.y, player.width, player.height);
// Vykreslení cílů (koleček)
targets.forEach(function(target) {
ctx.fillStyle = target.color;
ctx.beginPath();
ctx.arc(target.x, target.y, target.radius, 0, Math.PI * 2);
ctx.fill();
});
}
// Hlavní herní smyčka
function gameLoop() {
if (!isGameOver) {
update();
draw();
animationFrameId = requestAnimationFrame(gameLoop);
}
}
// Ukončení hry – zastavení smyčky, zastavení spawnování cílů, zobrazení zprávy
function endGame() {
isGameOver = true;
clearInterval(targetSpawnTimer);
cancelAnimationFrame(animationFrameId);
gameOverDisplay.style.display = "block";
restartBtn.style.display = "inline-block";
}
// Ovládání hráče – desktopové ovládání pomocí šipek nebo kláves A/D
document.addEventListener("keydown", function(e) {
if (e.key === "ArrowLeft" || e.key === "a" || e.key === "A") {
player.vx = -player.speed;
} else if (e.key === "ArrowRight" || e.key === "d" || e.key === "D") {
player.vx = player.speed;
}
});
document.addEventListener("keyup", function(e) {
if (e.key === "ArrowLeft" || e.key === "a" || e.key === "A" ||
e.key === "ArrowRight" || e.key === "d" || e.key === "D") {
player.vx = 0;
}
});
// Ovládání hráče dotykem
if (window.PointerEvent) {
canvas.addEventListener("pointerdown", handleTouch, false);
canvas.addEventListener("pointermove", handleTouch, false);
canvas.addEventListener("pointerup", handleTouchEnd, false);
} else {
canvas.addEventListener("touchstart", handleTouch, {passive: false});
canvas.addEventListener("touchmove", handleTouch, {passive: false});
canvas.addEventListener("touchend", handleTouchEnd, {passive: false});
}
function handleTouch(e) {
e.preventDefault(); // zabráníme posouvání stránky
var touch;
if (e.clientX !== undefined) {
touch = e;
} else {
touch = e.touches[0];
}
var rect = canvas.getBoundingClientRect();
var touchX = touch.clientX – rect.left;
player.x = touchX – player.width / 2;
if (player.x canvas.width) player.x = canvas.width – player.width;
}
function handleTouchEnd(e) {
player.vx = 0;
}
// Restart hry po kliknutí na tlačítko
restartBtn.addEventListener(„click“, function() {
isGameOver = false;
score = 0;
scoreDisplay.textContent = score;
targets = [];
player.x = canvas.width / 2 – player.width / 2;
// Aktualizace pozice pády, aby byla správně umístěna u spodního okraje
player.y = canvas.height – player.height – 10;
gameOverDisplay.style.display = „none“;
restartBtn.style.display = „none“;
targetSpawnTimer = setInterval(spawnTarget, targetSpawnInterval);
gameLoop();
});
// Responzivní úprava velikosti plátna a aktualizace pozice pády
function resizeCanvas() {
// Získáme aktuální šířku kontejneru
var containerWidth = document.getElementById(„bouncegame-container“).clientWidth;
// Zachováme poměr stran 400:600 (šířka:výška)
var newWidth = containerWidth;
var newHeight = containerWidth * (600 / 400);
canvas.width = newWidth;
canvas.height = newHeight;
// Aktualizace pozice hráčovy pády, aby byla vždy u spodního okraje
player.y = canvas.height – player.height – 10;
// Pokud by hráč byl mimo vodorovné hranice, upravíme jeho x souřadnici
if (player.x + player.width > canvas.width) {
player.x = canvas.width – player.width;
}
}
window.addEventListener(„load“, resizeCanvas);
window.addEventListener(„resize“, resizeCanvas);
// Spuštění hlavní smyčky hry
gameLoop();
});
Skóre: 0
