🎉 添加工具类的说明文档
This commit is contained in:
parent
be91c65c89
commit
fd5bcd163b
266
src/main/java/demo/1.html
Normal file
266
src/main/java/demo/1.html
Normal file
@ -0,0 +1,266 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="author" content="Vasanth.V" />
|
||||
<meta name="theme-color" content="#FFFFFF" />
|
||||
|
||||
<title>xxxx</title>
|
||||
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
|
||||
|
||||
<style>
|
||||
html,
|
||||
body {
|
||||
overscroll-behavior: none;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
background: #fbf9f6;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
display: none;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
max-width: 640px;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
margin: auto;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#canvas svg {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#about {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
line-height: 1.75;
|
||||
padding: 0rem 2rem 1rem;
|
||||
color: #2c3d51;
|
||||
}
|
||||
|
||||
#about a {
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
#ball {
|
||||
transform: translateZ(0);
|
||||
animation: rot 2000ms infinite linear;
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
#ball.started {
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
#play {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#finalscore,
|
||||
#best {
|
||||
font-size: 70%;
|
||||
fill: #34495e;
|
||||
}
|
||||
|
||||
#best {
|
||||
font-style: italic;
|
||||
font-size: 50%;
|
||||
}
|
||||
|
||||
#tip {
|
||||
font-weight: 300;
|
||||
font-size: 18%;
|
||||
font-style: italic;
|
||||
padding: 0.5rem 2rem 0rem;
|
||||
}
|
||||
|
||||
#shareBtn {
|
||||
background: #1d9bf0;
|
||||
color: #fff;
|
||||
width: 150px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
border-radius: 2rem;
|
||||
padding: 0.3rem 1.5rem;
|
||||
margin: 1rem auto 0px;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
#shareBtn.hide {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
@keyframes rot {
|
||||
from {
|
||||
transform: rotate(0deg) translate(40%) rotate(0deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: rotate(360deg) translate(40%) rotate(-360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<section id="canvas" v-bind:style="'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">
|
||||
点击 ▶️ 开始 / 点击任何地方停止
|
||||
</text>
|
||||
<text x="50" y="74" text-anchor="middle" class="tip">
|
||||
让球停在有颜色的区域就行！
|
||||
</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 * 40) + '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>
|
||||
</section>
|
||||
</body>
|
||||
<script>
|
||||
const loopTapApp = new Vue({
|
||||
el: "#canvas",
|
||||
data: {
|
||||
arc: [180, 270],
|
||||
taps: 0,
|
||||
score: 0,
|
||||
best: window.localStorage.best || 0,
|
||||
state: "init",
|
||||
prevTapTime: 0,
|
||||
colors: [
|
||||
'#F26D22',
|
||||
'#F1B21D',
|
||||
'#ECE82F',
|
||||
'#AED136',
|
||||
'#7EC242',
|
||||
'#63BC46',
|
||||
'#65BD5D',
|
||||
'#64C29A',
|
||||
'#61C8D2',
|
||||
'#2DAAE1',
|
||||
'#456EB5',
|
||||
'#4451A3',
|
||||
'#6151A2'
|
||||
]
|
||||
},
|
||||
computed: {
|
||||
arcDValue: function () {
|
||||
return this.describeArc(50, 50, 40, this.arc[0], this.arc[1]);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
polarToCartesian: function (centerX, centerY, radius, angleInDegrees) {
|
||||
const angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180.0;
|
||||
return {
|
||||
x: centerX + radius * Math.cos(angleInRadians),
|
||||
y: centerY + radius * Math.sin(angleInRadians),
|
||||
};
|
||||
},
|
||||
|
||||
describeArc: function (x, y, radius, startAngle, endAngle) {
|
||||
const start = this.polarToCartesian(x, y, radius, endAngle);
|
||||
const end = this.polarToCartesian(x, y, radius, startAngle);
|
||||
const arcFlag = endAngle - startAngle <= 180 ? "0" : "1";
|
||||
const d = ["M", start.x, start.y, "A", radius, radius, 0, arcFlag, 0, end.x, end.y].join(" ");
|
||||
return d;
|
||||
},
|
||||
|
||||
getAngle: function (cx, cy, ex, ey) {
|
||||
const dy = ey - cy;
|
||||
const dx = ex - cx;
|
||||
let theta = Math.atan2(dx, -dy);
|
||||
theta *= 180 / Math.PI;
|
||||
theta = theta < 0 ? theta + 360 : theta;
|
||||
return theta;
|
||||
},
|
||||
|
||||
getBallAngle: function () {
|
||||
const bg = document.getElementById("bg").getBoundingClientRect();
|
||||
const bgCenter = { x: bg.left + bg.width / 2, y: bg.top + bg.height / 2 };
|
||||
const ball = document.getElementById("ball").getBoundingClientRect();
|
||||
const ballCenter = { x: ball.left + ball.width / 2, y: ball.top + ball.height / 2 };
|
||||
return this.getAngle(bgCenter.x, bgCenter.y, ballCenter.x, ballCenter.y);
|
||||
},
|
||||
|
||||
setArc: function () {
|
||||
const random = (i, j) => Math.floor(Math.random() * (j - i)) + i;
|
||||
arc = [];
|
||||
arc.push(random(0, 300));
|
||||
arc.push(random(arc[0] + 10, arc[0] + 110));
|
||||
arc[1] = arc[1] > 360 ? 360 : arc[1];
|
||||
this.arc = arc;
|
||||
},
|
||||
|
||||
startPlay: function () {
|
||||
this.state = "started";
|
||||
this.taps = 0;
|
||||
this.score = 0;
|
||||
this.prevTapTime = Date.now();
|
||||
},
|
||||
stopPlay: function () {
|
||||
if (this.state === "started") {
|
||||
this.state = "stopped";
|
||||
if (this.score > this.best) window.localStorage.best = this.best = this.score;
|
||||
}
|
||||
},
|
||||
|
||||
tap: function (e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (this.state === "started") {
|
||||
const ballAngle = this.getBallAngle();
|
||||
// adding a 6 for better accuracy as the arc stroke extends beyond the angle.
|
||||
if (ballAngle + 6 > this.arc[0] && ballAngle - 6 < this.arc[1]) {
|
||||
const currentTapTime = Date.now();
|
||||
const tapInterval = currentTapTime - this.prevTapTime;
|
||||
this.taps++;
|
||||
if (this.taps >= 28){this.taps = 28;}
|
||||
this.score = this.score + (tapInterval < 500 ? 5 : tapInterval < 1000 ? 2 : 1);
|
||||
this.prevTapTime = currentTapTime;
|
||||
this.setArc();
|
||||
} else this.stopPlay();
|
||||
}
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
if ("ontouchstart" in window) {
|
||||
window.addEventListener("touchstart", loopTapApp.tap);
|
||||
} else {
|
||||
window.addEventListener("mousedown", loopTapApp.tap);
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user