95 lines
3.0 KiB
JavaScript
95 lines
3.0 KiB
JavaScript
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(); |