Ukaž svůj postřeh a vyhni se všem hrozbám, které na tebe padají. Nezapomeň na to, že stejně jako tvé tělo má mechanismy, jak se dokáže bránit toxinům, virům a bakteriím, tak i lodička dokáže po kliknutí vystřelit neutralizující substanci.
/* Styly platí pouze uvnitř #spaceship-game-container, aby nedocházelo ke kolizím s ostatními styly stránky */
#spaceship-game-container {
max-width: 420px;
margin: 20px auto;
text-align: center;
font-family: Arial, sans-serif;
}
#spaceship-game-container canvas {
/* Pro vesmírnou atmosféru využijeme tmavé pozadí s gradientem */
background: radial-gradient(ellipse at center, #1b2735 0%, #090a0f 100%);
border: 2px solid #00796b;
display: block;
margin: 0 auto;
touch-action: none; /* zabráníme posouvání při dotyku */
width: 100%;
height: auto;
}
#spaceship-game-container .score-display {
font-size: 18px;
color: #00796b;
margin-top: 10px;
}
#spaceship-game-container .game-over {
font-size: 24px;
color: #d32f2f;
margin-top: 10px;
}
#spaceship-game-container button {
margin-top: 10px;
padding: 10px 20px;
font-size: 16px;
background-color: #4caf50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
#spaceship-game-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 lodičky – hráčova entita
var ship = {
x: canvas.width / 2 – 20,
y: canvas.height – 60,
width: 40,
height: 40,
speed: 4,
vx: 0,
vy: 0,
color: „#ffffff“ // bílá barva
};
// Pole padajících objektů (padající věci, které musíte míjet)
var obstacles = [];
var obstacleSpawnInterval = 1500; // nový objekt každých 1500 ms
var obstacleSpeed = 3;
// Pole aktivních projektilů
var projectiles = [];
var projectileSpeed = 6; // rychlost projektilu
var projectileRadius = 5;
// Funkce pro vytvoření padajícího objektu (kruh)
function spawnObstacle() {
var radius = 15;
var x = Math.random() * (canvas.width – 2 * radius) + radius;
var y = -radius; // začíná mimo plátno nahoře
var color = „#d32f2f“; // červená – varovná barva
obstacles.push({ x: x, y: y, radius: radius, vy: obstacleSpeed, color: color });
}
var obstacleSpawnTimer = setInterval(spawnObstacle, obstacleSpawnInterval);
// Funkce pro detekci kolize mezi kruhem a obdélníkem (lodičkou)
function circleRectCollision(circle, rect) {
// Najdeme nejbližší bod obdélníku ke středu kruhu
var distX = Math.abs(circle.x – (rect.x + rect.width / 2));
var distY = Math.abs(circle.y – (rect.y + rect.height / 2));
if (distX > (rect.width / 2 + circle.radius)) return false;
if (distY > (rect.height / 2 + circle.radius)) return false;
if (distX <= (rect.width / 2)) return true;
if (distY <= (rect.height / 2)) return true;
var dx = distX – rect.width / 2;
var dy = distY – rect.height / 2;
return (dx * dx + dy * dy <= (circle.radius * circle.radius));
}
// Funkce pro detekci kolize mezi dvěma kruhy (projektil a padající objekt)
function circleCollision(c1, c2) {
var dx = c1.x – c2.x;
var dy = c1.y – c2.y;
var distance = Math.sqrt(dx * dx + dy * dy);
return distance < (c1.radius + c2.radius);
}
// Funkce, která vytvoří nový projektil, vycházející ze špičky lodičky.
function shootProjectile(e) {
var rect = canvas.getBoundingClientRect();
var clickX = e.clientX – rect.left;
var clickY = e.clientY – rect.top;
// Na mobilních zařízeních vystřelíme pouze, pokud se kliknutí uskuteční přímo na lodičku.
if ('ontouchstart' in window) {
if (
clickX ship.x + ship.width ||
clickY ship.y + ship.height
) {
return;
}
}
// Projektil vychází ze středu špičky lodičky (špička se nachází uprostřed horní strany lodičky).
var projectile = {
x: ship.x + ship.width / 2,
y: ship.y, // špička lodičky
radius: projectileRadius,
vy: -projectileSpeed,
color: „#ffff00“ // žlutá
};
projectiles.push(projectile);
}
// Aktualizace stavu hry
function update() {
// Aktualizace pohybu lodičky (klávesové ovládání)
ship.vx = 0;
ship.vy = 0;
if (keys[„ArrowLeft“] || keys[„a“] || keys[„A“]) {
ship.vx = -ship.speed;
}
if (keys[„ArrowRight“] || keys[„d“] || keys[„D“]) {
ship.vx = ship.speed;
}
if (keys[„ArrowUp“] || keys[„w“] || keys[„W“]) {
ship.vy = -ship.speed;
}
if (keys[„ArrowDown“] || keys[„s“] || keys[„S“]) {
ship.vy = ship.speed;
}
ship.x += ship.vx;
ship.y += ship.vy;
// Zabráníme tomu, aby lodička vyletěla mimo plátno
if (ship.x canvas.width) ship.x = canvas.width – ship.width;
if (ship.y canvas.height) ship.y = canvas.height – ship.height;
// Aktualizace projektilů
for (var i = projectiles.length – 1; i >= 0; i–) {
var proj = projectiles[i];
proj.y += proj.vy;
// Odstraníme projektil, pokud opustí horní okraj plátna
if (proj.y + proj.radius = 0; i–) {
for (var j = obstacles.length – 1; j >= 0; j–) {
if (circleCollision(projectiles[i], obstacles[j])) {
// Při zásahu odstraníme oba – projektil i padající objekt – a zvýšíme skóre
projectiles.splice(i, 1);
obstacles.splice(j, 1);
score++;
scoreDisplay.textContent = score;
break; // daný projektil už neexistuje, přerušíme vnitřní smyčku
}
}
}
// Aktualizace pozice padajících objektů
for (var i = obstacles.length – 1; i >= 0; i–) {
var obs = obstacles[i];
obs.y += obs.vy;
// Kontrola kolize s lodičkou
var shipRect = { x: ship.x, y: ship.y, width: ship.width, height: ship.height };
if (circleRectCollision(obs, shipRect)) {
endGame();
return;
}
// Pokud objekt projde spodním okrajem plátna, odstraníme jej a zvýšíme skóre
if (obs.y – obs.radius > canvas.height) {
obstacles.splice(i, 1);
score++;
scoreDisplay.textContent = score;
}
}
}
// Vykreslení herních prvků
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Vykreslíme lodičku jako trojúhelník (směřující vzhůru)
ctx.fillStyle = ship.color;
ctx.beginPath();
ctx.moveTo(ship.x, ship.y + ship.height); // levý dolní roh
ctx.lineTo(ship.x + ship.width / 2, ship.y); // špička (střed nahoře)
ctx.lineTo(ship.x + ship.width, ship.y + ship.height); // pravý dolní roh
ctx.closePath();
ctx.fill();
// Vykreslíme padající objekty jako kruhy
obstacles.forEach(function(obs) {
ctx.fillStyle = obs.color;
ctx.beginPath();
ctx.arc(obs.x, obs.y, obs.radius, 0, Math.PI * 2);
ctx.fill();
});
// Vykreslíme projektily
projectiles.forEach(function(proj) {
ctx.fillStyle = proj.color;
ctx.beginPath();
ctx.arc(proj.x, proj.y, proj.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í a zobrazení zprávy
function endGame() {
isGameOver = true;
clearInterval(obstacleSpawnTimer);
cancelAnimationFrame(animationFrameId);
gameOverDisplay.style.display = „block“;
restartBtn.style.display = „inline-block“;
}
// Klávesové ovládání – zaznamenáme stisk a uvolnění kláves
var keys = {};
document.addEventListener(„keydown“, function(e) {
keys[e.key] = true;
});
document.addEventListener(„keyup“, function(e) {
keys[e.key] = false;
});
// Ovládání dotykem/pointerem pro pohyb lodičky
function handleTouch(e) {
e.preventDefault(); // zabráníme scrollování stránky
var touch = (e.clientX !== undefined) ? e : e.touches[0];
var rect = canvas.getBoundingClientRect();
// Nastavíme lodičku tak, aby její střed byl na pozici dotyku
ship.x = touch.clientX – rect.left – ship.width / 2;
ship.y = touch.clientY – rect.top – ship.height / 2;
// Omezíme lodičku uvnitř plátna
if (ship.x canvas.width) ship.x = canvas.width – ship.width;
if (ship.y canvas.height) ship.y = canvas.height – ship.height;
}
function handleTouchEnd(e) {
// Při uvolnění dotyku nemusíme nic dělat
}
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});
}
// Přidáme posluchač události pro kliknutí (vystřelení projektilu)
canvas.addEventListener(„click“, shootProjectile, false);
// Restart hry po kliknutí na tlačítko
restartBtn.addEventListener(„click“, function() {
isGameOver = false;
score = 0;
scoreDisplay.textContent = score;
obstacles = [];
projectiles = [];
// Resetujeme pozici lodičky
ship.x = canvas.width / 2 – ship.width / 2;
ship.y = canvas.height – 60;
gameOverDisplay.style.display = „none“;
restartBtn.style.display = „none“;
obstacleSpawnTimer = setInterval(spawnObstacle, obstacleSpawnInterval);
gameLoop();
});
// Responzivní úprava velikosti plátna
function resizeCanvas() {
var containerWidth = document.getElementById(„spaceship-game-container“).clientWidth;
// Zachováme poměr stran 400:600
var newWidth = containerWidth;
var newHeight = containerWidth * (600 / 400);
canvas.width = newWidth;
canvas.height = newHeight;
// Ujistíme se, že lodička zůstane uvnitř plátna
if (ship.x + ship.width > canvas.width) {
ship.x = canvas.width – ship.width;
}
if (ship.y + ship.height > canvas.height) {
ship.y = canvas.height – ship.height;
}
}
window.addEventListener(„load“, resizeCanvas);
window.addEventListener(„resize“, resizeCanvas);
// Spuštění hlavní herní smyčky
gameLoop();
});
Skóre: 0
