div+css实现史上最难拖拽的开关效果代码-html代码-BFW代码库

div+css实现史上最难拖拽的开关效果代码

代码语言：html

所属分类：拖放

代码描述：div+css实现史上最难拖拽的开关效果代码，拖动白球在弯曲的通道内，不能越过通道边缘，否则就是失败。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">


<style>
*, *::before, *::after {
  font-family: inherit;
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

html {
  box-sizing: border-box;
  font-family: 'Nunito Sans', sans-serif;
  font-size: 62.5%;
}

html body {
  font-size: 1.6rem;
  margin: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

ul {
  list-style: none;
}

a, a:link, a:visited {
  text-decoration: none;
}
</style>
  
  
  
<style>
svg {
  width: 240px;
  height: 200px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
svg #path {
  stroke: tan;
  stroke-width: 40px;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  stroke-dasharray: 800;
  stroke-dashoffset: 760;
  transition: stroke-dashoffset 1s, stroke 1s;
}
svg #player {
  fill: white;
  cursor: move;
}
svg #goal {
  fill: steelblue;
  r: 0;
  transition: r 0.5s;
  transition-delay: 0s;
}
svg #text {
  fill: white;
  text-anchor: middle;
  dominant-baseline: middle;
  font-size: 10px;
}
svg.dragging:not(.win) {
  cursor: move;
}
svg.dragging #path {
  stroke-dashoffset: 0;
}
svg.dragging #goal {
  transition-delay: 0.3s;
  r: 16;
}
svg.game-over #path {
  stroke: firebrick;
  transition: stroke-dashoffset 1s, stroke 0.1s;
}
svg.win #path {
  stroke: mediumseagreen;
  cursor: pointer;
}
svg.win #player {
  cursor: pointer;
}
</style>


  
</head>

<body>
  <svg>
	<polyline id="path" />
	<circle id="goal" />
	<text id="text">GOAL</text>
	<circle id="player" r="16" />
</svg>

  
      <script >
const points = [
[100, 100],
[180, 100],
[180, 180],
[20, 180],
[20, 20],
[180, 20]];


const dist = (() => {
  const subtractPoints = (pointA, pointB) => {
    return [pointA[0] - pointB[0], pointA[1] - pointB[1]];
  };

  const addPoints = (pointA, pointB) => {
    return [pointA[0] + pointB[0], pointA[1] + pointB[1]];
  };

  const multiplyPointScalar = (point, scalar) => {
    return [point[0] * scalar, point[1] * scalar];
  };

  const dotProduct = (pointA, pointB) => {
    return pointA[0] * pointB[0] + pointA[1] * pointB[1];
  };

  const distanceBetweenPoints = (pointA, pointB) => {
    let dx = pointB[0] - pointA[0];
    let dy = pointB[1] - pointA[1];
    return Math.sqrt(dx * dx + dy * dy);
  };

  return (point, segmentStart, segmentEnd) => {
    if (!segmentEnd) {
      return distanceBetweenPoints(point, segmentStart);
    }

    let v = subtractPoints(segmentEnd, segmentStart);
    let w = .........完整代码请登录后点击上方下载按钮下载查看