Skip to content

Update index.html #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
HuaLuonb wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Update index.html #3

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
270 changes: 143 additions & 127 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>