Dateien nach "/" hochladen
This commit is contained in:
commit
cf1e7b9487
BIN
coffee.png
Normal file
BIN
coffee.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
95
game.js
Normal file
95
game.js
Normal file
@ -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();
|
||||
68
index.html
Normal file
68
index.html
Normal file
@ -0,0 +1,68 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Surf & Coffee Game</title>
|
||||
|
||||
<!-- Bootstrap CSS -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<!-- Custom CSS -->
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
|
||||
<!-- Google Font -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body class="bg-light">
|
||||
|
||||
<!-- Header -->
|
||||
<header class="bg-gradient shadow-sm">
|
||||
<nav class="navbar navbar-expand-lg navbar-dark container">
|
||||
<a class="navbar-brand fw-bold" href="#">Home</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav ms-auto">
|
||||
<li class="nav-item"><a class="nav-link" href="#">About</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
|
||||
<li class="nav-item dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown">Services</a>
|
||||
<ul class="dropdown-menu dropdown-menu-end">
|
||||
<li><a class="dropdown-item" href="#">Design</a></li>
|
||||
<li><a class="dropdown-item" href="#">Development</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="container mt-5">
|
||||
<div class="text-center mb-5">
|
||||
<h2 class="fw-bold">Lea's Game</h2>
|
||||
<p class="lead">Catch the coffee while surfing! ☕🏄♀️</p>
|
||||
</div>
|
||||
|
||||
<!-- Game -->
|
||||
<div class="game-container text-center mb-5">
|
||||
<canvas id="surfGame" width="800" height="400"></canvas>
|
||||
<p class="mt-2 text-muted">Move your mouse to surf and catch the coffee cups!</p>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-dark text-white p-3 mt-5 text-center">
|
||||
<p>© 2026 My Website. All rights reserved.</p>
|
||||
</footer>
|
||||
|
||||
<!-- Bootstrap JS -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
<!-- Game JS -->
|
||||
<script src="game.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
50
styles.css
Normal file
50
styles.css
Normal file
@ -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;
|
||||
}
|
||||
BIN
surfer.png
Normal file
BIN
surfer.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
Loading…
x
Reference in New Issue
Block a user