1超级玛丽-fork
A complex Super Mario adventure game featuring multiple power-ups, different enemy types, moving platforms, projectile attacks, time limits, pipes, particles effects, and enhanced pixel art graphics.
Preview
Source CodeVersion 2
export default {
async fetch(request, env) {
const url = new URL(request.url);
// API routes for high scores
if (url.pathname.startsWith('/api/')) {
if (url.pathname === '/api/scores' && request.method === 'GET') {
try {
const scores = await env.DB.prepare(`
SELECT name, score, created_at
FROM high_scores
ORDER BY score DESC
LIMIT 10
`).all();
return new Response(JSON.stringify({ data: scores.results || [] }), {
headers: { 'Content-Type': 'application/json' }
});
} catch (error) {
return new Response(JSON.stringify({ error: 'Failed to fetch scores' }), {
status: 500,
headers: { 'Content-Type': 'application/json' }
});
}
}
if (url.pathname === '/api/scores' && request.method === 'POST') {
try {
const { name, score } = await request.json();
await env.DB.prepare(`
INSERT INTO high_scores (id, name, score, created_at)
VALUES (?1, ?2, ?3, datetime('now'))
`).bind(crypto.randomUUID(), name, score).run();
return new Response(JSON.stringify({ ok: true }), {
headers: { 'Content-Type': 'application/json' }
});
} catch (error) {
return new Response(JSON.stringify({ error: 'Failed to save score' }), {
status: 500,
headers: { 'Content-Type': 'application/json' }
});
}
}
return new Response(JSON.stringify({ error: 'Not found' }), {
status: 404,
headers: { 'Content-Type': 'application/json' }
});
}
// Serve HTML
return new Response(getHTML(), {
headers: { 'Content-Type': 'text/html' }
});
}
};
function getHTML() {
return `<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>超级玛丽冒险 | Super Mario Adventure</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
body { font-family: 'Inter', sans-serif; }
canvas {
image-rendering: pixelated;
border: 3px solid rgba(255,255,255,0.1);
border-radius: 12px;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4);
}
.pixel-font {
font-family: 'Courier New', monospace;
font-weight: bold;
}
.power-up-glow {
animation: powerGlow 2s ease-in-out infinite alternate;
}
@keyframes powerGlow {
0% { box-shadow: 0 0 5px #FFD700; }
100% { box-shadow: 0 0 20px #FFD700, 0 0 30px #FFD700; }
}
</style>
</head>
<body class="bg-gradient-to-br from-violet-900 via-purple-900 to-blue-900 min-h-screen text-white">
<div class="container mx-auto px-4 py-8">
<!-- Header -->
<div class="text-center mb-8">
<h1 class="text-4xl md:text-6xl font-bold bg-gradient-to-r from-yellow-400 to-red-500 bg-clip-text text-transparent mb-4">
🍄 超级玛丽冒险 🍄
</h1>
<p class="text-lg text-purple-200">多元素复杂平台冒险游戏</p>
</div>
<!-- Game Container -->
<div class="max-w-5xl mx-auto">
<!-- Game Info -->
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
<div class="bg-white/10 backdrop-blur rounded-xl p-4 text-center">
<div class="pixel-font text-yellow-400">
<span class="text-sm">分数</span>
<div id="score" class="text-2xl font-bold">0</div>
</div>
</div>
<div class="bg-white/10 backdrop-blur rounded-xl p-4 text-center">
<div class="pixel-font text-green-400">
<span class="text-sm">生命</span>
<div id="lives" class="text-xl">❤️❤️❤️❤️❤️</div>
</div>
</div>
<div class="bg-white/10 backdrop-blur rounded-xl p-4 text-center">
<div class="pixel-font text-blue-400">
<span class="text-sm">等级</span>
<div id="level" class="text-2xl font-bold">1</div>
</div>
</div>
<div class="bg-white/10 backdrop-blur rounded-xl p-4 text-center">
<div class="pixel-font text-purple-400">
<span class="text-sm">时间</span>
<div id="timer" class="text-2xl font-bold">300</div>
</div>
</div>
</div>
<!-- Power-ups Status -->
<div class="flex justify-center mb-4">
<div class="bg-white/10 backdrop-blur rounded-xl p-4 flex space-x-4">
<div id="powerStatus" class="flex space-x-2 text-sm">
<span class="text-gray-400">状态: 普通</span>
</div>
</div>
</div>
<!-- Game Canvas -->
<div class="flex justify-center mb-6">
<canvas id="gameCanvas" width="900" height="500" class="max-w-full h-auto"></canvas>
</div>
<!-- Controls -->
<
...
No comments yet. Be the first!