&html lang="en"&
&head&
&meta charset="UTF-8" /&
&meta name="viewport" content="width=device-width, initial-scale=1.0" /&
&link rel="icon" type="image/svg+xml" href="favicon.svg" /&
&title& spread the plague! &/title&
&style&
*{
box-sizing: boder-box;
padding: 0;
margin: 0;
}
h1{
margin:50px;
font-size:3.5em;
}
h2{
margin:50px;
font-size:1.7em;
}
h1, h2, h3{
text-align:center;
}
button{
padding: 10px 30px;
cursor: pointer;
}
html, body{
background: #f9e79f;
height: 100%;
height:100vw;
width:100vw;
margin:0 auto;
justify-content: center;
align-items: center;
}
canvas{
cursor: url("data:image/svg+xml;utf8,") 16 0,auto;
}
&/style&
&/head&
&header&
&h1& Spread the Plague! &/h1&
&h2&Beiße jeden Käsekrümel an bevor es zu spät ist!&/h2&
&style& /*hätte auch in js und css*/
canvas { /*käseteller*/
border: 5px solid #f2ba38;
background:#f2ba38;
display: block;
margin: 20px auto;
}
#popup {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
padding: 20px;
border: 2px solid black;
text-align: center;
}
#popup img { /*bildchen für popup*/
width: 150px; /* bildgröße anpassen */
height: auto;
margin-top: 20px;
}
&/style&
&/header&
&body&
&canvas id="gameCanvas" width="500" height="500"&/&canvas&
&div id="popup"&
&p&Willst du mehr Käse?&/p&
&img id="popupImage" src="" alt="" /&
&button onclick="generateCheese()"&JA BITTE!&/button&
&/div&
&script&
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const popup = document.getElementById('popup');
const popupImage = document.getElementById('popupImage');
let cheeseCount = 5;
let timer;
let timeLeft = 5; //sekunden
let cheesePositions = []; // array für käsekrümel position - speichert position
function drawCheese(x, y) {
ctx.fillStyle = '#ffd663';
ctx.beginPath();
ctx.arc(x, y, 20, 0, Math.PI * 2);
ctx.fill();
cheesePositions.push({ x, y });
}
function startTimer() {
timeLeft = 8;
const timerElement = document.createElement('div');
timerElement.id = 'timer';
timerElement.style.position = 'absolute';
timerElement.style.top = '10px';
timerElement.style.right = '10px';
timerElement.style.backgroundColor = '#ffc72b';
timerElement.style.border = '2px solid black';
timerElement.style.padding = '15px 30px';
document.body.appendChild(timerElement);
timer = setInterval(() => {
timeLeft--;
timerElement.textContent = `Zeit:${timeLeft}s`;
if (timeLeft <= 0) {
clearInterval(timer);
if (cheeseCount > 0) {
endGame(false);
}
document.body.removeChild(timerElement);
}
}, 1000);
}
function generateCheese() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
cheeseCount = 7;
cheesePositions = [];
for (let i = 0; i < cheeseCount; i++) {
const x = Math.random() * canvas.width;
const y = Math.random() * canvas.height;
drawCheese(x, y);
}
popup.style.display = 'none';
startTimer();
}
canvas.addEventListener('click', (event) => {
const rect = canvas.getBoundingClientRect();
const mouseX = event.clientX - rect.left;
const mouseY = event.clientY - rect.top;
for (let i = 0; i < cheesePositions.length; i++) {
const cheese = cheesePositions[i];
const distance = Math.sqrt(Math.pow(mouseX - cheese.x, 2) + Math.pow(mouseY - cheese.y, 2));
if (distance <= 20) {
ctx.clearRect(cheese.x - 20, cheese.y - 20, 40, 40);
cheesePositions.splice(i, 1);
cheeseCount--;
if (cheeseCount === 0) {
endGame(true);
}
break;
}
}
});
function endGame(won) {
clearInterval(timer);
popup.style.display = 'block';
popup.querySelector('p').textContent = won
? "Jeder Käse wurde angebissen! Mehr Käse?"
: "Zeit abgelaufen! Du bist verhungert! Neuer Versuch?";
if (won) {
popupImage.src = "https://i.pinimg.com/736x/c4/3a/5b/c43a5b2295d3b95753230a76aeedcf13b.jpg";
} else {
popupImage.src = "https://i.pinimg.com/736x/de/f1/a3/def1a341afcb1a2818168e6a69b8d53b.jpg";
}
}
generateCheese();
&/script&
&h3&&/h3&
&/body&
&/html&