超级玛丽发

一个包含三个关卡的Gameboy风格超级玛丽游戏,难度逐渐递增,第二关增加了更多敌人和移动平台,第三关包含飞行敌人、复杂的平台布局和更短的时间限制。

预览
源代码版本 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
...

评论 (0)

还没有评论,来写第一条吧!