diff --git a/index.html b/index.html
index 3bb0aac..bdde561 100755
--- a/index.html
+++ b/index.html
@@ -1,134 +1,150 @@
 <!DOCTYPE html>
 <html lang="en">
-	<head>
-		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-		<meta http-equiv="Cache-control" content="public" />
-		<meta
-			name="viewport"
-			content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
-		/>
-		<meta name="description" content="A minimal game to waste your time." />
-		<meta name="keywords" content="minimal game, html5 game, svg game" />
-		<meta name="apple-mobile-web-app-capable" content="yes" />
-		<meta name="mobile-web-app-capable" content="yes" />
-		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
-		<meta name="apple-mobile-web-app-title" content="Looptap" />
-		<meta name="application-name" content="Looptap" />
-		<meta name="theme-color" content="#fbf9f6" />
-		<meta property="og:url" content="https://vasanthv.github.io/looptap" />
-		<meta property="og:image" content="https://vasanthv.github.io/looptap/banner.png" />
-		<meta property="og:title" content="Looptap" />
-		<meta property="og:description" content="A minimal game to waste your time." />
-		<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png" />
-		<link rel="icon" href="favicon.svg" />
-		<link rel="manifest" href="manifest.json" />
-		<link rel="mask-icon" href="safari-pinned-tab.svg" color="#2c3d51" />
-		<meta name="msapplication-TileColor" content="#fbf9f6" />
-		<meta name="theme-color" content="#fbf9f6" />
-		<title>Looptap - A minimal game to waste your time</title>
+    <head>
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+        <meta http-equiv="Cache-control" content="public" />
+        <meta
+            name="viewport"
+            content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
+        />
+        <meta name="description" content="A minimal game to waste your time." />
+        <meta name="keywords" content="minimal game, html5 game, svg game" />
+        <meta name="apple-mobile-web-app-capable" content="yes" />
+        <meta name="mobile-web-app-capable" content="yes" />
+        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+        <meta name="apple-mobile-web-app-title" content="Looptap" />
+        <meta name="application-name" content="Looptap" />
+        <meta name="theme-color" content="#fbf9f6" />
+        <meta property="og:url" content="https://vasanthv.github.io/looptap" />
+        <meta property="og:image" content="https://vasanthv.github.io/looptap/banner.png" />
+        <meta property="og:title" content="Looptap" />
+        <meta property="og:description" content="A minimal game to waste your time." />
+        <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png" />
+        <link rel="icon" href="favicon.svg" />
+        <link rel="manifest" href="manifest.json" />
+        <link rel="mask-icon" href="safari-pinned-tab.svg" color="#2c3d51" />
+        <meta name="msapplication-TileColor" content="#fbf9f6" />
+        <meta name="theme-color" content="#fbf9f6" />
+        <title>Looptap - A minimal game to waste your time</title>
 
-		<link href="style.css" rel="stylesheet" />
-		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
-		<script defer src="script.js"></script>
+        <link href="style.css" rel="stylesheet" />
+        <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+        <script defer src="script.js"></script>
 
-		<!-- ANALYTICS_SCRIPT: Please remove it for your use -->
-		<script async defer src="https://scripts.withcabin.com/hello.js"></script>
+        <!-- ANALYTICS_SCRIPT: Please remove it for your use -->
+        <script async defer src="https://scripts.withcabin.com/hello.js"></script>
+    </head>
 
-	</head>
+    <body>
+        <section id="canvas">
+            <div id="game" style="height: 80vh; display: flex">
+                <svg id="looptap" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+                    <rect id="bg" x="0" cy="0" height="100" width="100" fill="none" />
+                    <text
+                        x="50"
+                        y="50"
+                        dominant-baseline="middle"
+                        text-anchor="middle"
+                        class="score"
+                        id="score"
+                        v-if="state === 'started'"
+                        v-html="score"
+                    ></text>
+                    <text
+                        x="50"
+                        y="32"
+                        text-anchor="middle"
+                        class="score"
+                        id="finalscore"
+                        v-if="state === 'stopped'"
+                        v-html="score"
+                    ></text>
+                    <text
+                        x="50"
+                        y="70"
+                        text-anchor="middle"
+                        class="score"
+                        id="best"
+                        v-if="state === 'stopped'"
+                        v-html="'Best: '+best"
+                    ></text>
+                    <g id="tip" v-if="state === 'init'">
+                        <text x="50" y="68" text-anchor="middle" class="tip">Tap anywhere / press spacebar when</text>
+                        <text x="50" y="74" text-anchor="middle" class="tip">the ball is on the colored area.</text>
+                    </g>
+                    <path
+                        id="arc"
+                        fill="none"
+                        v-bind:stroke="colors[Math.floor(score / 10)] || colors[Math.floor((score - 270) / 10)] || '#bdc3c7'"
+                        stroke-width="10"
+                        stroke-linejoin="round"
+                        stroke-linecap="round"
+                        v-bind:d="arcDValue"
+                    />
+                    <circle
+                        id="ball"
+                        cx="50"
+                        cy="50"
+                        :r="debugMode ? debugSettings.ballSize : 4"
+                        fill="#2C3D51"
+                        v-bind:class="state"
+                        v-bind:style="'animation-duration: '+(debugMode ? debugSettings.rotationSpeed : 2000 - taps * 5) + 'ms'"
+                    />
+                    <polygon
+                        id="play"
+                        points="45,45 55,50 45,55"
+                        fill="#2C3D51"
+                        stroke="#2C3D51"
+                        stroke-width="5"
+                        stroke-linejoin="round"
+                        stroke-linecap="round"
+                        v-if="state !== 'started'"
+                        v-on:click="startPlay"
+                    />
+                </svg>
+            </div>
+            <a
+                id="shareBtn"
+                v-bind:href="'https://twitter.com/intent/tweet?url=https%3A%2F%2Fvasanthv.github.io%2Flooptap%2F&text=Beat%20my%20score%3A%20'+score+'%0aLooptap%20-%20a%20minimal%20game%20to%20waste%20your%20time.&hashtags=looptap'"
+                v-if="['stopped', 'started'].includes(state)"
+                target="_blank"
+                v-bind:class="state === 'started' ? 'hide' : ''"
+            >
+                Share your score
+            </a>
+            <div id="about" v-if="state === 'init'">
+                Looptap is made by
+                <a href="https://twitter.com/vsnthv" target="_blank">Vasanth</a>
+                <br />
+                <a
+                    href="https://twitter.com/share?ref_src=twsrc%5Etfw"
+                    class="twitter-share-button"
+                    data-text="Looptap - a minimal game to waste your time."
+                    data-url="https://vasanthv.github.io/looptap"
+                    data-via="vsnthv"
+                    data-hashtags="looptap"
+                    data-show-count="false"
+                    >Tweet</a
+                >
+                <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+            </div>
 
-	<body>
-		<section id="canvas">
-			<div id="game" style="height: 80vh; display: flex">
-				<svg id="looptap" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
-					<rect id="bg" x="0" cy="0" height="100" width="100" fill="none" />
-					<text
-						x="50"
-						y="50"
-						dominant-baseline="middle"
-						text-anchor="middle"
-						class="score"
-						id="score"
-						v-if="state === 'started'"
-						v-html="score"
-					></text>
-					<text
-						x="50"
-						y="32"
-						text-anchor="middle"
-						class="score"
-						id="finalscore"
-						v-if="state === 'stopped'"
-						v-html="score"
-					></text>
-					<text
-						x="50"
-						y="70"
-						text-anchor="middle"
-						class="score"
-						id="best"
-						v-if="state === 'stopped'"
-						v-html="'Best: '+best"
-					></text>
-					<g id="tip" v-if="state === 'init'">
-						<text x="50" y="68" text-anchor="middle" class="tip">Tap anywhere / press spacebar when</text>
-						<text x="50" y="74" text-anchor="middle" class="tip">the ball is on the colored area.</text>
-					</g>
-					<path
-						id="arc"
-						fill="none"
-						v-bind:stroke="colors[Math.floor(score / 10)] || colors[Math.floor((score - 270) / 10)] || '#bdc3c7'"
-						stroke-width="10"
-						stroke-linejoin="round"
-						stroke-linecap="round"
-						v-bind:d="arcDValue"
-					/>
-					<circle
-						id="ball"
-						cx="50"
-						cy="50"
-						r="4"
-						fill="#2C3D51"
-						v-bind:class="state"
-						v-bind:style="'animation-duration: '+(2000 - taps * 5) + 'ms'"
-					/>
-					<polygon
-						id="play"
-						points="45,45 55,50 45,55"
-						fill="#2C3D51"
-						stroke="#2C3D51"
-						stroke-width="5"
-						stroke-linejoin="round"
-						stroke-linecap="round"
-						v-if="state !== 'started'"
-						v-on:click="startPlay"
-					/>
-				</svg>
-			</div>
-			<a
-				id="shareBtn"
-				v-bind:href="'https://twitter.com/intent/tweet?url=https%3A%2F%2Fvasanthv.github.io%2Flooptap%2F&text=Beat%20my%20score%3A%20'+score+'%0aLooptap%20-%20a%20minimal%20game%20to%20waste%20your%20time.&hashtags=looptap'"
-				v-if="['stopped', 'started'].includes(state)"
-				target="_blank"
-				v-bind:class="state === 'started' ? 'hide' : ''"
-			>
-				Share your score
-			</a>
-			<div id="about" v-if="state === 'init'">
-				Looptap is made by
-				<a href="https://twitter.com/vsnthv" target="_blank">Vasanth</a>
-				<br />
-				<a
-					href="https://twitter.com/share?ref_src=twsrc%5Etfw"
-					class="twitter-share-button"
-					data-text="Looptap - a minimal game to waste your time."
-					data-url="https://vasanthv.github.io/looptap"
-					data-via="vsnthv"
-					data-hashtags="looptap"
-					data-show-count="false"
-					>Tweet</a
-				>
-				<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
-			</div>
-		</section>
-	</body>
+            <!-- Debug 面板 -->
+            <div id="debugPanel" v-if="debugMode" style="position: fixed; bottom: 0; left: 0; width: 100%; background: rgba(0,0,0,0.7); color: white; padding: 10px;">
+                <h3>Debug 设置</h3>
+                <div>
+                    <label>球大小: 
+                        <input type="number" :value="debugSettings.ballSize" @input="updateDebugSettings('ballSize', $event.target.value)" min="1" max="10">
+                    </label>
+                    <label>旋转速度: 
+                        <input type="number" :value="debugSettings.rotationSpeed" @input="updateDebugSettings('rotationSpeed', $event.target.value)" min="500" max="5000">
+                    </label>
+                    <label>自动播放: 
+                        <input type="checkbox" :checked="debugSettings.autoPlay" @change="debugSettings.autoPlay = !debugSettings.autoPlay">
+                    </label>
+                    <button @click="toggleThreeDMode">切换 3D 模式</button>
+                </div>
+            </div>
+        </section>
+    </body>
 </html>
