diff --git a/icons/envelope-solid.svg b/icons/envelope-solid.svg new file mode 100644 index 0000000..14e6f78 --- /dev/null +++ b/icons/envelope-solid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/icons/github-alt-brands.svg b/icons/github-alt-brands.svg new file mode 100644 index 0000000..bcd8bc2 --- /dev/null +++ b/icons/github-alt-brands.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/index.html b/index.html index 97ecc5d..1a44b0e 100644 --- a/index.html +++ b/index.html @@ -73,7 +73,7 @@ color: white; font-size: 1.5em; /* Textgröße anpassen */ } - + @@ -85,6 +85,8 @@ color="black" > +
+

@@ -92,6 +94,19 @@ Creative Crafter

Hey there! I'm Creative Crafter, your go-to gamer. On this website, I showcase my latest and greatest games.
Note: All games are available in German 🇩🇪 only. Enjoy the adventure!

+
+
+
+ + GitHub + + + E-Mail + +
+
+ +

Categories

@@ -107,7 +122,7 @@ - + + highscoreDisplay.textContent = highscore; - \ No newline at end of file + function getRandomPosition() { + return { + x: Math.floor(Math.random() * (canvas.width / gridSize)) * gridSize, + y: Math.floor(Math.random() * (canvas.height / gridSize)) * gridSize + }; + } + + function placeFood() { + food = getRandomPosition(); + while (snake.some(s => s.x === food.x && s.y === food.y)) { + food = getRandomPosition(); + } + } + + // Funktion zum Zeichnen eines abgerundeten Rechtecks (für die Snake) + function drawRoundedRect(x, y, width, height, radius, color) { + ctx.fillStyle = color; + ctx.beginPath(); + ctx.moveTo(x + radius, y); + ctx.lineTo(x + width - radius, y); + ctx.arcTo(x + width, y, x + width, y + height, radius); + ctx.lineTo(x + width, y + height - radius); + ctx.arcTo(x + width, y + height, x + width - radius, y + height, radius); + ctx.lineTo(x + radius, y + height); + ctx.arcTo(x, y + height, x, y + height - radius, radius); + ctx.lineTo(x, y + radius); + ctx.arcTo(x, y, x + radius, y, radius); + ctx.closePath(); + ctx.fill(); + } + + function update() { + direction = nextDirection; + + const head = { + x: snake[0].x + direction.x, + y: snake[0].y + direction.y + }; + + if ( + head.x < 0 || head.x >= canvas.width || + head.y < 0 || head.y >= canvas.height || + snake.some(segment => segment.x === head.x && segment.y === head.y) + ) { + endGame(); + return; + } + + snake.unshift(head); + + if (head.x === food.x && head.y === food.y) { + score++; + scoreDisplay.textContent = score; + placeFood(); + } else { + snake.pop(); + } + } + + function draw() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + // Snake als abgerundetes Rechteck zeichnen + snake.forEach((segment, index) => { + const color = index === 0 ? 'limegreen' : 'darkgreen'; // Kopf grün, Rest dunkelgrün + drawRoundedRect(segment.x, segment.y, gridSize, gridSize, 5, color); + }); + // Essen zeichnen + drawRoundedRect(food.x, food.y, gridSize, gridSize, 5, 'tomato'); + } + + function gameLoop() { + if (!gameRunning) return; + update(); + draw(); + timeoutId = setTimeout(gameLoop, speed); + } + + function startGame() { + snake = [{ x: 200, y: 200 }]; + direction = { x: 0, y: -gridSize }; + nextDirection = { x: 0, y: -gridSize }; + score = 0; + speed = 100; // Standard-Geschwindigkeit ohne Erhöhung + scoreDisplay.textContent = score; + gameOver = false; + gameRunning = true; + overlay.style.display = 'none'; + placeFood(); + gameLoop(); + } + + function endGame() { + gameRunning = false; + clearTimeout(timeoutId); + + if (score > highscore) { + highscore = score; + localStorage.setItem('snakeHighscore', highscore); + highscoreDisplay.textContent = highscore; + } + + overlay.innerHTML = '

Game Over

Press Space to Restart

'; + overlay.style.display = 'block'; + } + + window.addEventListener('keydown', e => { + switch (e.key) { + case 'ArrowUp': + case 'w': + if (direction.y === 0) nextDirection = { x: 0, y: -gridSize }; + break; + case 'ArrowDown': + case 's': + if (direction.y === 0) nextDirection = { x: 0, y: gridSize }; + break; + case 'ArrowLeft': + case 'a': + if (direction.x === 0) nextDirection = { x: -gridSize, y: 0 }; + break; + case 'ArrowRight': + case 'd': + if (direction.x === 0) nextDirection = { x: gridSize, y: 0 }; + break; + case ' ': + if (!gameRunning) startGame(); + break; + } + }); + + overlay.style.display = 'block'; + + + \ No newline at end of file