预览
源代码版本 5
export default {
async fetch(request, env) {
const url = new URL(request.url);
// API routes
if (url.pathname.startsWith('/api/')) {
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>超级玛丽 - Mobile Edition</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
body { font-family: 'Inter', sans-serif; }
.game-canvas {
border: 3px solid #2d3748;
background: linear-gradient(135deg, #87CEEB 0%, #98FB98 50%, #87CEEB 100%);
image-rendering: pixelated;
image-rendering: -moz-crisp-edges;
image-rendering: crisp-edges;
}
.control-btn {
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
-webkit-touch-callout: none;
border: 3px solid #374151;
}
/* Gameboy-style D-pad */
.dpad {
position: relative;
width: 120px;
height: 120px;
}
.dpad-horizontal {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 120px;
height: 40px;
background: #4b5563;
border: 3px solid #374151;
border-radius: 8px;
}
.dpad-vertical {
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
width: 40px;
height: 120px;
background: #4b5563;
border: 3px solid #374151;
border-radius: 8px;
}
.dpad-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
background: #6b7280;
border: 3px solid #374151;
border-radius: 6px;
}
.dpad-btn {
position: absolute;
width: 36px;
height: 36px;
background: #9ca3af;
border: 2px solid #6b7280;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 14px;
color: #1f2937;
transition: all 0.1s ease;
}
.dpad-btn:active {
background: #d1d5db;
border-color: #9ca3af;
transform: scale(0.95);
}
.dpad-up {
top: 2px;
left: 50%;
transform: translateX(-50%);
}
.dpad-down {
bottom: 2px;
left: 50%;
transform: translateX(-50%);
}
.dpad-left {
left: 2px;
top: 50%;
transform: translateY(-50%);
}
.dpad-right {
right: 2px;
top: 50%;
transform: translateY(-50%);
}
/* Gameboy-style action buttons */
.action-btn {
width: 60px;
height: 60px;
border-radius: 50%;
background: #ef4444;
border: 4px solid #dc2626;
color: white;
font-weight: bold;
font-size: 12px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 0 #991b1b, inset 0 -2px 0 #dc2626;
transition: all 0.1s ease;
}
.action-btn:active {
transform: translateY(2px);
box-shadow: 0 2px 0 #991b1b, inset 0 -1px 0 #dc2626;
}
.action-btn.green {
background: #10b981;
border-color: #059669;
box-shadow: 0 4px 0 #047857, inset 0 -2px 0 #059669;
}
.action-btn.green:active {
box-shadow: 0 2px 0 #047857, inset 0 -1px 0 #059669;
}
/* Gameboy console styling */
.gameboy-console {
background: linear-gradient(145deg, #d1d5db, #9ca3af);
border: 4px solid #6b7280;
border-radius: 20px;
box-shadow: inset 0 2px 0 #f3f4f6, inset 0 -2px 0 #4b5563;
}
/* Level indicator */
.level-indicator {
animation: pulse 2s infinite;
}
</style>
</head>
<body class="bg-gray-800 text-white min-h-screen overflow-hidden">
<div class="flex flex-col h-screen">
<!-- Header -->
<div class="bg-gradient-to-r from-violet-500 to-blue-500 p-3 text-center border-b-4 border-violet-600">
<h1 class="text-xl font-bold">🍄 SUPER MARIO</h1>
<div class="flex justify-center gap-6 mt-1 text-xs font-mono">
<span class="level-indicator">LEVEL: <span id="level" class="text-green-300">1</span></span>
<span>SCORE: <span id="score" class="text-yellow-300">000000</span></span>
<span>LIVES: <span id="lives" class="text-red-300">3</span></span>
<span>TIME: <span id="time" class="text-blue-300">300</span></span>
</div>
</div>
<!-- Game Screen -->
<div class="flex-1 flex item
...
还没有评论,来写第一条吧!