commit cf1e7b9487e22cd7c7f415aac6a7ba7f658da559 Author: Lea Jael Gübeli Date: Fri Mar 6 17:14:07 2026 +0100 Dateien nach "/" hochladen diff --git a/coffee.png b/coffee.png new file mode 100644 index 0000000..22ad753 Binary files /dev/null and b/coffee.png differ diff --git a/game.js b/game.js new file mode 100644 index 0000000..ad4da70 --- /dev/null +++ b/game.js @@ -0,0 +1,95 @@ +const canvas = document.getElementById("surfGame"); +const ctx = canvas.getContext("2d"); + +// Images +const surferImg = new Image(); +surferImg.src = "surfer.png"; // Surfer auf Board (PNG) +const coffeeImg = new Image(); +coffeeImg.src = "coffee.png"; // Kaffee-Tasse (PNG) + +// Player & Coffee +let player = {x: 370, y: 350, width: 60, height: 30}; +let coffee = {x: Math.random() * 770, y: 0, width: 40, height: 40, speed: 4, angle: 0}; +let score = 0; + +// Mouse control +let mouseX = player.x + player.width/2; +canvas.addEventListener('mousemove', (e) => { + const rect = canvas.getBoundingClientRect(); + mouseX = e.clientX - rect.left; +}); + +// Draw game +function draw() { + ctx.clearRect(0, 0, canvas.width, canvas.height); + + // Background water + ctx.fillStyle = "#7ec0ee"; + ctx.fillRect(0, 0, canvas.width, canvas.height); + + // Animated waves + ctx.fillStyle = "rgba(255,255,255,0.3)"; + for (let i = 0; i < canvas.width; i += 50) { + ctx.beginPath(); + ctx.arc(i + (Date.now()/50 % 50), 380 + Math.sin(Date.now()/500 + i)*5, 15, 0, Math.PI, true); + ctx.fill(); + } + + // Surfer tilt based on mouse + let tilt = (mouseX - (player.x + player.width/2)) / 50; + player.x += (mouseX - (player.x + player.width/2)) * 0.1; // smooth follow + if (player.x < 0) player.x = 0; + if (player.x > canvas.width - player.width) player.x = canvas.width - player.width; + + if(surferImg.complete) { + ctx.save(); + ctx.translate(player.x + player.width/2, player.y + player.height/2); + ctx.rotate(tilt); + ctx.drawImage(surferImg, -player.width/2, -player.height/2, player.width, player.height); + ctx.restore(); + } else { + ctx.fillStyle = "#ff4d6d"; + ctx.fillRect(player.x, player.y, player.width, player.height); + } + + // Coffee animation + coffee.y += coffee.speed; + coffee.angle += 0.1; + + if(coffeeImg.complete) { + ctx.save(); + ctx.translate(coffee.x + coffee.width/2, coffee.y + coffee.height/2); + ctx.rotate(coffee.angle); + ctx.drawImage(coffeeImg, -coffee.width/2, -coffee.height/2, coffee.width, coffee.height); + ctx.restore(); + } else { + ctx.fillStyle = "#fff"; + ctx.fillRect(coffee.x, coffee.y, coffee.width, coffee.height); + ctx.strokeStyle = "#ff4d6d"; + ctx.strokeRect(coffee.x, coffee.y, coffee.width, coffee.height); + } + + // Collision + if(coffee.y + coffee.height >= player.y && + coffee.x + coffee.width >= player.x && + coffee.x <= player.x + player.width) { + score++; + coffee.y = 0; + coffee.x = Math.random() * (canvas.width - coffee.width); + } + + // Reset if missed + if(coffee.y > canvas.height) { + coffee.y = 0; + coffee.x = Math.random() * (canvas.width - coffee.width); + } + + // Score + ctx.fillStyle = "#ff4d6d"; + ctx.font = "22px Arial"; + ctx.fillText("Score: " + score, 10, 30); + + requestAnimationFrame(draw); +} + +draw(); \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..24e090f --- /dev/null +++ b/index.html @@ -0,0 +1,68 @@ + + + + + +Surf & Coffee Game + + + + + + + + + + + + + +
+ +
+ + +
+
+

Lea's Game

+

Catch the coffee while surfing! ☕🏄‍♀️

+
+ + +
+ +

Move your mouse to surf and catch the coffee cups!

+
+
+ + + + + + + + + + + + \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..9915af5 --- /dev/null +++ b/styles.css @@ -0,0 +1,50 @@ +body, html { + font-family: 'Roboto', sans-serif; + margin: 0; + padding: 0; +} + +/* Header gradient */ +.bg-gradient { + background: linear-gradient(90deg, #e63950, #c2185b); +} + +/* Navbar links hover */ +.navbar .nav-link:hover { + color: #ffd6e0; +} + +/* Buttons */ +.btn-pink { + background-color: #ff4d6d; + color: white; + border-radius: 25px; + transition: 0.3s; +} +.btn-pink:hover { + background-color: #ff1e50; +} + +/* Main content */ +main { + background-color: #fff0f6; + padding: 20px; + border-radius: 10px; +} + +/* Canvas */ +canvas { + border: 2px solid #ff4d6d; + border-radius: 10px; + box-shadow: 2px 2px 15px rgba(0,0,0,0.3); + background-color: #aee1f9; /* light blue for water */ +} + +/* Footer */ +footer { + background-color: #ff4d6d; +} +footer p { + font-size: 0.9rem; + margin: 0; +} \ No newline at end of file diff --git a/surfer.png b/surfer.png new file mode 100644 index 0000000..6e2d619 Binary files /dev/null and b/surfer.png differ