Frogger-Stil: Spieler springt auf Baumstämme im Wasser
This commit is contained in:
128
index.html
128
index.html
@@ -120,18 +120,17 @@
|
||||
|
||||
// Schildkröte (Spieler)
|
||||
const player = {
|
||||
x: canvas.width / 2 - 25,
|
||||
y: canvas.height - 70,
|
||||
width: 50,
|
||||
height: 50,
|
||||
x: canvas.width / 2 - 20,
|
||||
y: canvas.height - 60,
|
||||
width: 40,
|
||||
height: 40,
|
||||
speed: 5,
|
||||
dx: 0,
|
||||
dy: 0
|
||||
onLog: false
|
||||
};
|
||||
|
||||
// Flusslinien (Bäume)
|
||||
const rivers = [];
|
||||
const numRivers = 5;
|
||||
// Flusslinien (Bäume zum draufspringen)
|
||||
const logs = [];
|
||||
const numLogs = 5;
|
||||
|
||||
// Bäume (Hindernisse)
|
||||
const trees = [];
|
||||
@@ -153,24 +152,23 @@
|
||||
items: []
|
||||
});
|
||||
|
||||
// Bäume pro Fluss
|
||||
const numTreesInRiver = 2 + Math.floor(Math.random() * 3);
|
||||
for (let j = 0; j < numTreesInRiver; j++) {
|
||||
rivers[i].items.push({
|
||||
x: Math.random() * (canvas.width - 60),
|
||||
width: 40 + Math.random() * 30,
|
||||
type: 'tree'
|
||||
for (let i = 0; i < numLogs; i++) {
|
||||
logs.push({
|
||||
y: canvas.height - 150 - (i * 60),
|
||||
width: 80 + Math.random() * 60,
|
||||
speed: 1 + Math.random() * 1.5,
|
||||
direction: i % 2 === 0 ? 1 : -1
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Bäume (Hindernisse im Gras)
|
||||
trees.length = 0;
|
||||
for (let i = 0; i < numTrees; i++) {
|
||||
trees.push({
|
||||
x: Math.random() * (canvas.width - 50),
|
||||
y: 150 + Math.random() * (canvas.height - 300),
|
||||
width: 50,
|
||||
height: 60
|
||||
y: canvas.height - 120 - Math.random() * 300,
|
||||
width: 30,
|
||||
height: 30
|
||||
});
|
||||
}
|
||||
|
||||
@@ -283,6 +281,15 @@
|
||||
if (player.y > canvas.height - player.height) player.y = canvas.height - player.height;
|
||||
}
|
||||
|
||||
// Bäume bewegen
|
||||
function moveLogs() {
|
||||
logs.forEach(log => {
|
||||
log.x += log.speed * log.direction;
|
||||
if (log.x < -200) log.x = canvas.width;
|
||||
if (log.x > canvas.width) log.x = -200;
|
||||
});
|
||||
}
|
||||
|
||||
// Aligatoren bewegen
|
||||
function moveAlligators() {
|
||||
alligators.forEach(alligator => {
|
||||
@@ -295,13 +302,11 @@
|
||||
}
|
||||
|
||||
// Bäume bewegen
|
||||
function moveRivers() {
|
||||
rivers.forEach(river => {
|
||||
river.items.forEach(item => {
|
||||
item.x += river.speed * river.direction;
|
||||
if (item.x < -100) item.x = canvas.width;
|
||||
if (item.x > canvas.width) item.x = -100;
|
||||
});
|
||||
function moveLogs() {
|
||||
logs.forEach(log => {
|
||||
log.x += log.speed * log.direction;
|
||||
if (log.x < -200) log.x = canvas.width;
|
||||
if (log.x > canvas.width) log.x = -200;
|
||||
});
|
||||
}
|
||||
|
||||
@@ -317,24 +322,39 @@
|
||||
}
|
||||
});
|
||||
|
||||
// Bäume (Flüsse)
|
||||
rivers.forEach(river => {
|
||||
if (player.y > 150 && player.y < canvas.height - 150) {
|
||||
river.items.forEach(item => {
|
||||
if (player.x < item.x + item.width &&
|
||||
player.x + player.width > item.x &&
|
||||
player.y < river.y &&
|
||||
player.y + player.height > river.y - 40) {
|
||||
// Bäume (Hindernisse im Gras)
|
||||
trees.forEach(tree => {
|
||||
if (player.x < tree.x + tree.width &&
|
||||
player.x + player.width > tree.x &&
|
||||
player.y < tree.y + tree.height &&
|
||||
player.y + player.height > tree.y) {
|
||||
loseLife();
|
||||
}
|
||||
});
|
||||
|
||||
// Bäume im Wasser (Logs) - Spieler bewegt sich mit
|
||||
player.onLog = false;
|
||||
logs.forEach(log => {
|
||||
if (player.y > 100 && player.y < 450) {
|
||||
if (player.x < log.x + log.width &&
|
||||
player.x + player.width > log.x &&
|
||||
player.y + player.height > log.y - 20 &&
|
||||
player.y < log.y) {
|
||||
player.x += log.speed * log.direction;
|
||||
player.onLog = true;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Ziel erreicht?
|
||||
if (player.y < 50) {
|
||||
if (player.y < 60) {
|
||||
levelUp();
|
||||
}
|
||||
|
||||
// Ins Wasser fallen?
|
||||
if (player.y > 100 && player.y < 450 && !player.onLog) {
|
||||
loseLife();
|
||||
}
|
||||
}
|
||||
|
||||
function loseLife() {
|
||||
@@ -395,40 +415,30 @@
|
||||
|
||||
// Flüsse
|
||||
ctx.fillStyle = '#2196F3';
|
||||
rivers.forEach(river => {
|
||||
ctx.fillRect(0, river.y - 40, canvas.width, 40);
|
||||
logs.forEach(log => {
|
||||
ctx.fillRect(0, log.y - 40, canvas.width, 40);
|
||||
// Welleneffekt
|
||||
ctx.fillStyle = '#42A5F5';
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(0, river.y - 20);
|
||||
ctx.moveTo(0, log.y - 20);
|
||||
for (let x = 0; x < canvas.width; x += 20) {
|
||||
ctx.lineTo(x, river.y - 20 + Math.sin(x + Date.now()/200 + river.y)*5);
|
||||
ctx.lineTo(x, log.y - 20 + Math.sin(x + Date.now()/200 + log.y)*5);
|
||||
}
|
||||
ctx.lineTo(canvas.width, river.y - 10);
|
||||
ctx.lineTo(0, river.y - 10);
|
||||
ctx.lineTo(canvas.width, log.y - 10);
|
||||
ctx.lineTo(0, log.y - 10);
|
||||
ctx.fill();
|
||||
ctx.fillStyle = '#2196F3';
|
||||
});
|
||||
|
||||
// Bäume
|
||||
rivers.forEach(river => {
|
||||
river.items.forEach(item => {
|
||||
// Logs (Baumstämme im Wasser)
|
||||
logs.forEach(log => {
|
||||
// Baumstamm
|
||||
ctx.fillStyle = '#795548';
|
||||
ctx.fillRect(item.x + item.width/2 - 5, river.y - 50, 10, 40);
|
||||
// Blätter (Kreise)
|
||||
ctx.fillStyle = '#2E7D32';
|
||||
ctx.beginPath();
|
||||
ctx.arc(item.x + item.width/2, river.y - 70, 25, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
ctx.fillStyle = '#388E3C';
|
||||
ctx.beginPath();
|
||||
ctx.arc(item.x + item.width/2 - 10, river.y - 75, 15, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
ctx.beginPath();
|
||||
ctx.arc(item.x + item.width/2 + 10, river.y - 75, 15, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
});
|
||||
ctx.fillRect(log.x, log.y - 20, log.width, 20);
|
||||
// Details
|
||||
ctx.fillStyle = '#5D4037';
|
||||
ctx.fillRect(log.x + 5, log.y - 18, 5, 16);
|
||||
ctx.fillRect(log.x + log.width - 10, log.y - 18, 5, 16);
|
||||
});
|
||||
|
||||
// Aligatoren
|
||||
|
||||
Reference in New Issue
Block a user