<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>功夫 (Kung Fu Hustle) - 电影分析图表</title>
<!-- Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<!-- Custom Palette & Styling -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
'kfh-dark': '#0f172a', // Midnight Blue (Background)
'kfh-gold': '#fbbf24', // Gold (Accents/Buddha's Palm)
'kfh-red': '#dc2626', // Axe Gang Red
'kfh-cream': '#fef3c7', // Text Light
'kfh-teal': '#2dd4bf', // Secondary Accent
'kfh-slate': '#1e293b', // Card Background
},
fontFamily: {
sans: ['Helvetica', 'Arial', 'sans-serif'],
serif: ['Georgia', 'serif'],
}
}
}
}
</script>
<style>
/* Chart Container Styling - Mandatory per instructions */
.chart-container {
position: relative;
width: 100%;
max-width: 100%; /* Responsive within grid */
margin-left: auto;
margin-right: auto;
height: 350px; /* Base height */
max-height: 450px;
}
@media (min-width: 768px) {
.chart-container {
height: 400px;
}
}
body {
background-color: #0f172a; /* kfh-dark */
color: #fef3c7; /* kfh-cream */
}
.glass-card {
background: rgba(30, 41, 59, 0.95);
border: 1px solid rgba(251, 191, 36, 0.2);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}
.section-title {
border-bottom: 2px solid #fbbf24;
display: inline-block;
padding-bottom: 0.5rem;
margin-bottom: 1.5rem;
}
</style>
<!--
SOURCE MATERIAL ANALYSIS & PLAN (Embedded per instructions)
1. Theme: Transformation, Wuxia, Comedy.
2. Visuals:
- Pig Sty Alley: Warm, chaotic, earthy, human.
- Axe Gang: Cold, black suit, top lighting, sharp shadows.
- Climax: Ethereal, Golden, High-Key lighting.
3. Narrative:
- Introduction: The Rule of Gangs.
- Inciting Incident: Sing's fake Axe Gang attempt.
- Rising Action: The Masters reveal themselves.
- Midpoint: The Harpists vs. The Masters.
- Climax: The Beast vs. The Couple -> Sing's Rebirth.
- Resolution: Butterfly, Peace.
VISUALIZATION CHOICES:
1. Radar Chart: "Combat Stats" (Compare). Comparing Sing, Landlady, Beast, etc.
2. Bar Chart (Stacked): "Scene Lighting & Tone" (Compare). Contrast warm vs cold scenes.
3. Line Chart: "Narrative Tension Arc" (Change). Tracking the story beats.
4. Doughnut Chart: "Martial Arts Style Distribution" (Inform). Breakdown of techniques.
5. HTML/CSS Flow: "Character Relationships" (Relationships).
NO SVG USED. NO MERMAID USED.
PALETTE: "Energetic & Playful" (High Contrast Gold/Red/Dark Blue).
-->
</head>
<body class="font-sans antialiased selection:bg-kfh-red selection:text-white pb-20">
<!-- Header / Hero -->
<header class="w-full bg-gradient-to-b from-kfh-slate to-kfh-dark border-b border-kfh-gold/30 pt-12 pb-8 px-4 text-center">
<h1 class="text-5xl md:text-6xl font-serif font-bold text-kfh-gold mb-2 tracking-wider">功夫</h1>
<h2 class="text-2xl md:text-3xl text-white font-light uppercase tracking-widest">Kung Fu Hustle</h2>
<p class="mt-4 text-kfh-teal text-lg max-w-2xl mx-auto">
一场关于光影、色彩与救赎的视觉解构<br>
<span class="text-sm text-gray-400">Analysis of Infrastructure, Scenes, Lens Language, and Narrative Structure</span>
</p>
</header>
<!-- Main Content Grid -->
<main class="container mx-auto px-4 mt-12 grid grid-cols-1 md:grid-cols-2 gap-8 lg:gap-12">
<!-- Section 1: Introduction & Context -->
<section class="col-span-1 md:col-span-2 glass-card rounded-xl p-6 md:p-8">
<h3 class="text-2xl font-bold text-kfh-gold section-title">🎬 影片概览 (Overview)</h3>
<p class="mb-4 text-lg leading-relaxed">
周星驰的《功夫》(2004) 不仅仅是一部动作喜剧，它是一次对经典武侠和黑色电影的致敬与重构。影片通过强烈的<strong>视觉对比</strong>（猪笼城寨的市井气 vs 斧头帮的冷酷秩序）构建了独特的叙事空间。本分析将通过数据可视化，深入探讨其场景构建、人物战力体系以及镜头语言的运用。
</p>
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mt-6 text-center">
<div class="bg-kfh-dark p-4 rounded-lg border border-gray-700">
<div class="text-3xl mb-1">🏙️</div>
<div class="font-bold text-kfh-gold">猪笼城寨</div>
<div class="text-xs text-gray-400">混乱中的秩序 (Warm/Earth)</div>
</div>
<div class="bg-kfh-dark p-4 rounded-lg border border-gray-700">
<div class="text-3xl mb-1">🪓</div>
<div class="font-bold text-kfh-red">斧头帮</div>
<div class="text-xs text-gray-400">死亡的舞蹈 (Cold/Black)</div>
</div>
<div class="bg-kfh-dark p-4 rounded-lg border border-gray-700">
<div class="text-3xl mb-1">✋</div>
<div class="font-bold text-white">如来神掌</div>
<div class="text-xs text-gray-400">涅槃重生 (Gold/White)</div>
</div>
</div>
</section>
<!-- Section 2: Narrative Structure (Line Chart) -->
<section class="col-span-1 md:col-span-2 glass-card rounded-xl p-6">
<h3 class="text-2xl font-bold text-kfh-teal section-title">📈 叙事张力与镜头节奏 (Narrative Arc)</h3>
<p class="mb-6 text-gray-300 text-sm">
此折线图展示了影片的<strong>叙事张力 (Tension)</strong> 与 <strong>喜剧元素 (Comedy)</strong> 的消长关系。影片前半段以喜剧为主，随着天残地缺（琴魔）的登场，张力急剧上升，喜剧元素逐渐让位于严肃的生死对决，最终在阿星“化蝶”重生时达到高潮。
</p>
<div class="chart-container">
<canvas id="narrativeChart"></canvas>
</div>
</section>
<!-- Section 3: Visual Infrastructure (Stacked Bar) -->
<section class="col-span-1 glass-card rounded-xl p-6">
<h3 class="text-2xl font-bold text-kfh-red section-title">🎨 场景光影与色调分析 (Scene & Tone)</h3>
<p class="mb-4 text-gray-300 text-sm">
《功夫》的场景设计具有极强的功能性。<strong>猪笼城寨</strong>多使用暖黄、土褐色，代表生命力与市井；<strong>斧头帮总部/赌场</strong>则由冷黑、霓虹红和惨白构成，代表压抑与暴力。图表对比了主要场景的色彩构成比例。
</p>
<div class="chart-container">
<canvas id="colorChart"></canvas>
</div>
<div class="mt-4 text-xs text-gray-400 italic text-center">
*数据基于关键帧色彩采样估算
</div>
</section>
<!-- Section 4: Martial Arts Breakdown (Doughnut) -->
<section class="col-span-1 glass-card rounded-xl p-6">
<h3 class="text-2xl font-bold text-kfh-gold section-title">🥋 武学风格分布 (Styles)</h3>
<p class="mb-4 text-gray-300 text-sm">
影片融合了多种夸张的武术风格。从写实的十二路谭腿，到魔幻的音波功，再到神话般的如来神掌。图表展示了不同武学流派在动作场面中的<strong>视觉占比 (Visual Impact)</strong>。
</p>
<div class="chart-container">
<canvas id="styleChart"></canvas>
</div>
</section>
<!-- Section 5: Character Power Analysis (Radar) -->
<section class="col-span-1 md:col-span-2 glass-card rounded-xl p-6">
<h3 class="text-2xl font-bold text-white section-title">⚡ 角色战力六维图 (Character Stats)</h3>
<p class="mb-6 text-gray-300 text-sm">
对比核心角色的综合能力。<strong>阿星 (Awakened)</strong> 在觉醒后各项数值爆表；<strong>火云邪神 (The Beast)</strong> 拥有极高的速度与防御；而<strong>包租婆 (Landlady)</strong> 则以其独特的大范围声波攻击（狮子吼）占据一席之地。
</p>
<div class="chart-container">
<canvas id="radarChart"></canvas>
</div>
</section>
<!-- Section 6: Infrastructure & Details List -->
<section class="col-span-1 md:col-span-2 glass-card rounded-xl p-6">
<h3 class="text-2xl font-bold text-kfh-teal section-title">🧱 基础设施与镜头语言细节 (Details)</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Column 1 -->
<div class="bg-kfh-slate/50 p-4 rounded border-l-4 border-kfh-gold">
<h4 class="font-bold text-lg text-white mb-2">基础设施 (Infrastructure)</h4>
<ul class="list-none space-y-2 text-sm text-gray-300">
<li><span class="text-kfh-gold font-bold">猪笼城寨:</span> 参考九龙城寨，由于层层叠叠的阳台、晾衣杆、公共水龙头构成，空间拥挤但富有人情味。光线多为自然光或暖色灯泡。</li>
<li><span class="text-kfh-red font-bold">斧头帮赌场:</span> 装饰艺术 (Art Deco) 风格，巨大的黑色斧头标志，大理石地面，冷酷的顶光照明，强调阴影和轮廓。</li>
<li><span class="text-kfh-teal font-bold">精神病院:</span> 阴森、潮湿、地下结构。绿色滤镜的使用增加了不适感和诡异氛围。</li>
</ul>
</div>
<!-- Column 2 -->
<div class="bg-kfh-slate/50 p-4 rounded border-l-4 border-kfh-red">
<h4 class="font-bold text-lg text-white mb-2">镜头与叙事 (Lens & Narrative)</h4>
<ul class="list-none space-y-2 text-sm text-gray-300">
<li><span class="text-kfh-gold font-bold">极速推拉 (Zoom):</span> 模仿70年代功夫片风格，用于强调人物表情或瞬间的动作冲击（如包租婆追逐戏）。</li>
<li><span class="text-kfh-red font-bold">子弹时间 (Bullet Time):</span> 用于展现高手的速度差（火云邪神接子弹），将时间具象化。</li>
<li><span class="text-kfh-teal font-bold">CG与实拍结合:</span> 独特的“卡通现实主义”。如踩脚趾变扁、琴声化作骷髅武士，打破物理规则以服务喜剧效果。</li>
</ul>
</div>
</div>
</section>
</main>
<footer class="text-center py-10 text-gray-500 text-xs">
<p>Generated by Canvas Infographics AI | No SVG | No Mermaid</p>
</footer>
<!-- JavaScript Logic for Charts -->
<script>
// --- UTILITY: Label Wrapping (Mandatory) ---
function wrapLabels(label) {
const limit = 16;
if (label.length <= limit) return label;
const words = label.split(' ');
const lines = [];
let currentLine = words[0];
for (let i = 1; i < words.length; i++) {
if ((currentLine + " " + words[i]).length <= limit) {
currentLine += " " + words[i];
} else {
lines.push(currentLine);
currentLine = words[i];
}
}
lines.push(currentLine);
return lines;
}
// --- UTILITY: Tooltip Configuration (Mandatory) ---
const commonTooltipOptions = {
callbacks: {
title: function(tooltipItems) {
const item = tooltipItems[0];
let label = item.chart.data.labels[item.dataIndex];
if (Array.isArray(label)) {
return label.join(' ');
} else {
return label;
}
}
}
};
// --- CHART 1: Narrative Tension (Line Chart) ---
const narrativeCtx = document.getElementById('narrativeChart').getContext('2d');
const narrativeLabels = [
"警察局开场 (Opening)",
"猪笼城寨勒索 (Blackmail)",
"三大高手显威 (Masters Reveal)",
"琴魔大战 (Harpists Fight)",
"阿星释放邪神 (Beast Released)",
"赌场对决 (Casino Fight)",
"如来神掌 (Buddha's Palm)"
].map(wrapLabels);
new Chart(narrativeCtx, {
type: 'line',
data: {
labels: narrativeLabels,
datasets: [
{
label: '剧情张力 (Tension)',
data: [20, 30, 60, 85, 75, 90, 100],
borderColor: '#dc2626', // Red
backgroundColor: 'rgba(220, 38, 38, 0.2)',
tension: 0.4,
fill: true,
pointBackgroundColor: '#fbbf24',
pointRadius: 5
},
{
label: '喜剧元素 (Comedy)',
data: [90, 85, 60, 20, 40, 10, 5],
borderColor: '#2dd4bf', // Teal
backgroundColor: 'rgba(45, 212, 191, 0.1)',
tension: 0.4,
borderDash: [5, 5],
fill: false,
pointRadius: 0
}
]
},
options: {
maintainAspectRatio: false,
responsive: true,
plugins: {
legend: { labels: { color: '#fef3c7' } },
tooltip: commonTooltipOptions
},
scales: {
y: {
grid: { color: 'rgba(255,255,255,0.1)' },
ticks: { color: '#94a3b8' }
},
x: {
grid: { color: 'rgba(255,255,255,0.1)' },
ticks: { color: '#94a3b8' }
}
}
}
});
// --- CHART 2: Color/Tone Analysis (Stacked Bar) ---
const colorCtx = document.getElementById('colorChart').getContext('2d');
const sceneLabels = [
"猪笼城寨 (Pig Sty Alley)",
"斧头帮总部 (Axe Gang HQ)",
"精神病院 (Asylum)",
"最后决战 (Final Battle)"
].map(wrapLabels);
new Chart(colorCtx, {
type: 'bar',
data: {
labels: sceneLabels,
datasets: [
{
label: '暖色/土黄 (Warm/Earth)',
data: [80, 10, 20, 60], // Pig Sty is mostly warm
backgroundColor: '#fbbf24',
},
{
label: '冷色/黑白 (Cold/Dark)',
data: [15, 80, 50, 20], // Axe gang is dark
backgroundColor: '#1e293b',
borderColor: '#475569',
borderWidth: 1
},
{
label: '特殊/诡异绿 (Eerie Green)',
data: [5, 10, 30, 20], // Asylum has green tint
backgroundColor: '#2dd4bf',
}
]
},
options: {
maintainAspectRatio: false,
responsive: true,
scales: {
x: { stacked: true, ticks: { color: '#fef3c7' } },
y: { stacked: true, grid: { color: 'rgba(255,255,255,0.1)' }, ticks: { color: '#94a3b8' } }
},
plugins: {
legend: { labels: { color: '#fef3c7' } },
tooltip: commonTooltipOptions
}
}
});
// --- CHART 3: Style Distribution (Doughnut) ---
const styleCtx = document.getElementById('styleChart').getContext('2d');
const styleLabels = [
"硬桥硬马 (Traditional Styles)",
"CG特效流 (CGI Enhanced)",
"音波/魔法 (Sonic/Magic)",
"街头斗殴 (Street Brawling)"
].map(wrapLabels);
new Chart(styleCtx, {
type: 'doughnut',
data: {
labels: styleLabels,
datasets: [{
data: [30, 35, 20, 15],
backgroundColor: [
'#fbbf24', // Gold
'#dc2626', // Red
'#2dd4bf', // Teal
'#94a3b8' // Grey
],
borderColor: '#0f172a',
borderWidth: 2
}]
},
options: {
maintainAspectRatio: false,
responsive: true,
plugins: {
legend: { position: 'right', labels: { color: '#fef3c7' } },
tooltip: commonTooltipOptions
}
}
});
// --- CHART 4: Character Stats (Radar) ---
const radarCtx = document.getElementById('radarChart').getContext('2d');
const radarLabels = ["攻击力 (Power)", "速度 (Speed)", "防御 (Defense)", "技巧 (Skill)", "范围 (Range)", "恢复力 (Regen)"].map(wrapLabels);
new Chart(radarCtx, {
type: 'radar',
data: {
labels: radarLabels,
datasets: [
{
label: '阿星-觉醒 (Sing)',
data: [100, 95, 100, 90, 100, 100],
fill: true,
backgroundColor: 'rgba(251, 191, 36, 0.2)', // Gold low opacity
borderColor: '#fbbf24',
pointBackgroundColor: '#fbbf24',
pointBorderColor: '#fff',
},
{
label: '火云邪神 (The Beast)',
data: [90, 100, 85, 95, 70, 80],
fill: true,
backgroundColor: 'rgba(220, 38, 38, 0.2)', // Red low opacity
borderColor: '#dc2626',
pointBackgroundColor: '#dc2626',
pointBorderColor: '#fff',
},
{
label: '包租婆 (Landlady)',
data: [80, 75, 80, 85, 90, 60],
fill: true,
backgroundColor: 'rgba(45, 212, 191, 0.2)', // Teal low opacity
borderColor: '#2dd4bf',
pointBackgroundColor: '#2dd4bf',
pointBorderColor: '#fff',
}
]
},
options: {
maintainAspectRatio: false,
responsive: true,
scales: {
r: {
angleLines: { color: 'rgba(255, 255, 255, 0.1)' },
grid: { color: 'rgba(255, 255, 255, 0.1)' },
pointLabels: { color: '#fef3c7', font: { size: 12 } },
ticks: { backdropColor: 'transparent', color: 'transparent' } // Hide numbers
}
},
plugins: {
legend: { labels: { color: '#fef3c7' } },
tooltip: commonTooltipOptions
}
}
});
</script>
</body>
</html>
