html5牧羊犬小游戏

下载代码

html

css

分享到微信朋友圈

html

</section>

css

/*** CSS debug in progress ***/
body {
  margin: 0;
  padding: 0;
  background: radial-gradient(
    rgb(144 212 147) 0%,
    rgb(89 181 92) 35%,
    rgb(65 171 69) 50%,
    rgb(30 125 34) 100%
  );
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  font-family: Arial, Helvetica, serif;
}

.field {
  margin: 0 auto;
  height: 100vh;
  width: 100vw;
  position: relative;
}

.sheep-zone {
  padding: 5vmin;
  position: absolute;
  border-radius: 100%;
  background: #008e0630;
  transition: 0.5s;
  box-shadow: 0 0 15px 0 #008e0630, 0 0 0 0.25vmin #ffffff20 inset;
}

.sheep {
  width: 5vmin;
  height: 6vmin;
  border: 1px #f3f3f3 solid;
  right: 500px;
  background: #fff;
  transition: 0.5s;
  border-radius: 45%;
  filter: drop-shadow(1px 1px 5px #00000080);
  animation: sheep-eating 4s 0s infinite alternate;
}

.sheep:before {
  content: "";
  background: radial-gradient(
      circle at 1.95vmin 1.5vmin,
      #fff 0.5vmin,
      transparent 0.65vmin
    ),
    radial-gradient(circle at 4.5vmin 1.5vmin, #fff 0.55vmin, transparent 0.7vmin),
    radial-gradient(
      circle at 1.65vmin 2.15vmin,
      #fff 0.65vmin,
      transparent 0.8vmin
    ),
    radial-gradient(
      circle at 1.15vmin 2.75vmin,
      #fff 0.5vmin,
      transparent 0.65vmin
    ),
    radial-gradient(
      circle at 1.15vmin 3.35vmin,
      #fff 0.6vmin,
      transparent 0.75vmin
    ),
    radial-gradient(
      circle at 1.05vmin 4.35vmin,
      #fff 0.65vmin,
      transparent 0.8vmin
    ),
    radial-gradient(
      circle at 1.2vmin 5.35vmin,
      #fff 0.6vmin,
      transparent 0.75vmin
    ),
    radial-gradient(
      circle at 1.5vmin 6.15vmin,
      #fff 0.55vmin,
      transparent 0.7vmin
    ),
    radial-gradient(circle at 1.9vmin 6.8vmin, #fff 0.55vmin, transparent 0.7vmin),
    radial-gradient(
      circle at 2.5vmin 7.05vmin,
      #fff 0.4vmin,
      transparent 0.55vmin
    ),
    radial-gradient(
      circle at 2.95vmin 7.15vmin,
      #fff 0.45vmin,
      transparent 0.6vmin
    ),
    radial-gradient(
      circle at 3.65vmin 7.25vmin,
      #fff 0.25vmin,
      transparent 0.4vmin
    ),
    radial-gradient(
      circle at 4.25vmin 7.2vmin,
      #fff 0.35vmin,
      transparent 0.5vmin
    ),
    radial-gradient(
      circle at 4.85vmin 6.65vmin,
      #fff 0.55vmin,
      transparent 0.7vmin
    ),
    radial-gradient(
      circle at 5.25vmin 6.15vmin,
      #fff 0.35vmin,
      transparent 0.5vmin
    ),
    radial-gradient(
      circle at 5.25vmin 1.5vmin,
      #fff 0.45vmin,
      transparent 0.6vmin
    ),
    radial-gradient(
      circle at 5.5vmin 2.35vmin,
      #fff 0.5vmin,
      transparent 0.65vmin
    ),
    radial-gradient(
      circle at 6.05vmin 3.25vmin,
      #fff 0.45vmin,
      transparent 0.6vmin
    ),
    radial-gradient(
      circle at 5.95vmin 4.05vmin,
      #fff 0.4vmin,
      transparent 0.55vmin
    ),
    radial-gradient(
      circle at 5.75vmin 4.85vmin,
      #fff 0.5vmin,
      transparent 0.65vmin
    ),
    radial-gradient(
      circle at 5.65vmin 5.75vmin,
      #fff 0.55vmin,
      transparent 0.7vmin
    );
  width: calc(5vmin + 2vmin);
  height: calc(6vmin + 2vmin);
  position: absolute;
  border-radius: 25%;
  margin-left: -1vmin;
  margin-top: -1vmin;
}

.sheep:after {
  content: "";
  background: radial-gradient(
      circle at 70% 65%,
      #333 0.2vmin,
      transparent 0.275vmin
    ),
    radial-gradient(circle at 30% 65%, #333 0.2vmin, transparent 0.275vmin),
    #efe3d3;
  width: 2.35vmin;
  height: 2.75vmin;
  position: absolute;
  border-radius: 35% 35% 0 0;
  margin-left: 1.3vmin;
  margin-top: -2vmin;
  border-bottom: 1px dashed #fff;
  clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%);
}

.sheep-pen {
  position: absolute;
  background: radial-gradient(#d6bc97a3 50%, #59b55c 75%, #59b55c 80%);
  width: 45vmin;
  height: 45vmin;
  border-radius: 100%;
  left: calc(50% - 22.5vmin);
  top: calc(50% - 22.5vmin);
  border: 5vmin dotted #d6bc97a3;
  z-index: -1;
  filter: blur(5px);
  box-sizing: border-box;
}

@keyframes sheep-eating {
  0% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(45deg);
  }
  40% {
    transform: rotate(45eg);
  }
  60% {
    transform: rotate(80deg);
  }
  80% {
    transform: rotate(80deg);
  }
  100% {
    transform: rotate(130deg);
  }
}

.sheep-zone:nth-child(2) {
  transform: rotate(-40deg);
}
.sheep-zone:nth-child(3) {
  transform: rotate(-70deg);
}
.sheep-zone:nth-child(4) {
  transform: rotate(-110deg);
}
.sheep-zone:nth-child(5) {
  transform: rotate(-150deg);
}
.sheep-zone:nth-child(6) {
  transform: rotate(-180deg);
}
.sheep-zone:nth-child(7) {
  transform: rotate(-210deg);
}
.sheep-zone:nth-child(8) {
  transform: rotate(-250deg);
}
.sheep-zone:nth-child(9) {
  transform: rotate(-290deg);
}

.sheep-zone:nth-child(2) .sheep {
  animation-duration: 5s;
}
.sheep-zone:nth-child(3) .sheep {
  animation-duration: 4.5s;
}
.sheep-zone:nth-child(4) .sheep {
  animation-duration: 3.5s;
}
.sheep-zone:nth-child(5) .sheep {
  animation-duration: 5.5s;
}
.sheep-zone:nth-child(6) .sheep {
  animation-duration: 6s;
}
.sheep-zone:nth-child(7) .sheep {
  animation-duration: 6.5s;
}
.sheep-zone:nth-child(8) .sheep {
  animation-duration: 7s;
}
.sheep-zone:nth-child(9) .sheep {
  animation-duration: 7.5s;
}

#element {
  background: red;
  position: absolute;
  top: 30vmin;
  left: 30vmin;
  width: 20vmin;
  height: 20vmin;
}

#dog {
  width: 3.5vmin;
  height: 7vmin;
  background-color: #8e5541;
  border-radius: 70% 70% 100% 100%;
  transition-duration: 500ms;
  transition-timing-function: ease-out;
  position: fixed;
  transform-origin: center center;
  margin-left: -2vmin;
  margin-top: -3.5vmin;
  filter: drop-shadow(0px 0px 10px #00000040);
  left: 65%;
  top: 75%;
}

#dog:before {
  content: "";
  width: calc(100% - 0.35vmin);
  height: calc(100% - 0.35vmin);
  position: absolute;
  border-radius: 70% 70% 100% 100%;
  margin-left: -0.175vmin;
  margin-top: -0.175vmin;
  border: 0.35vmin dotted #8e5541;
}

#dog:after {
  content: "";
  background: radial-gradient(
      circle at 70% 65%,
      #333 0.2vmin,
      transparent 0.275vmin
    ),
    radial-gradient(circle at 30% 65%, #333 0.2vmin, transparent 0.275vmin),
    radial-gradient(circle at 50% 5%, #333 0.25vmin, transparent 0.35vmin),
    #8e5541;
  width: 2.35vmin;
  height: 2.75vmin;
  position: absolute;
  border-radius: 2vmin 2vmin 1.5vmin 1.5vmin;
  margin-left: 0.55vmin;
  margin-top: -2.5vmin;
  border-bottom: 0.35vmin dotted #ffffff;
  animation: pitching 1s 0s infinite alternate;
  transform-origin: center bottom;
  clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
}

@keyframes pitching {
  0% {
    transform: rotate(-25deg);
  }
  50% {
    transform: rotate(25deg);
  }
  100% {
    transform: rotate(-25deg);
  }
}

#dog > div {
  position: absolute;
  width: 0.5vmin;
  height: 3vmin;
  background-color: #8e5541;
  left: calc(50% - 0.3vmin);
  top: 90%;
  border-radius: 0 0 100% 0;
  animation: tail 0.65s 0s infinite alternate;
  transform-origin: center top;
}

@keyframes tail {
  0% {
    transform: rotate(-45deg);
  }
  50% {
    transform: rotate(45deg);
  }
  100% {
    transform: rotate(-45deg);
  }
}

#dog.sit > div,
#dog.sit:after {
  animation: none;
}

#dog.left {
  transform: rotate(-90deg);
}
#dog.right {
  transform: rotate(90deg);
}
#dog.top {
  transform: rotate(0deg);
}
#dog.bottom {
  transform: rotate(180deg);
}

#dog.top.left {
  transform: rotate(-45deg);
}
#dog.top.right {
  transform: rotate(45deg);
}
#dog.bottom.left {
  transform: rotate(-135deg);
}
#dog.bottom.right {
  transform: rotate(135deg);
}

/*** sheep pen ***/
.sheep-pen > span {
  background: red;
  height: 16vmin;
  width: 1vmin;
  position: absolute;
  top: 5vmin;
  transform: rotate(12deg);
  opacity: 0.5;
}

.sheep-pen > span:nth-child(2) {
  background: #673ab7;
  height: 16vmin;
  width: 1vmin;
  position: absolute;
  top: 19vmin;
  transform: rotate(-41deg);
  left: 4vmin;
}

.sheep-pen > span:nth-child(3) {
  background: #2196f3;
  height: 16vmin;
  width: 1vmin;
  position: absolute;
  top: 24.5vmin;
  transform: rotate(-93deg);
  left: 18vmin;
}

.sheep-pen > span:nth-child(4) {
  background: #ffeb3b;
  height: 16vmin;
  width: 1vmin;
  position: absolute;
  top: 18vmin;
  transform: rotate(37deg);
  left: 31vmin;
}

.sheep-pen > span:nth-child(5) {
  background: #ff5722;
  height: 16vmin;
  width: 1vmin;
  position: absolute;
  top: 4vmin;
  transform: rotate(-17deg);
  left: 33.5vmin;
}

.sheep-pen:before {
  content: "";
  border: 3vmin dotted #d6bc97a3;
  position: absolute;
  width: calc(100% + 0vmin);
  height: calc(100% + 0vmin);
  border-radius: 100%;
  left: -3vmin;
  top: -3vmin;
}
.sheep-pen:after {
  content: "";
  border: 4vmin dotted #d6bc97a3;
  border-radius: 100%;
  left: -5vmin;
  top: -5vmin;
  transform: rotate(45deg);
  filter: blur(5px);
}

.sheep-zone.scared {
  background: #ff000060;
  animation: scared 0.15s 0s infinite alternate;
}

@keyframes scared {
  0% {
    transform: rotate(10deg);
  }
  50% {
    transform: rotate(-10deg);
  }
  100% {
    transform: rotate(10deg);
  }
}

.sheep-zone.catched {
  box-shadow: none;
  background: radial-gradient(#2196f329 50%, transparent 60%);
}

.alone {
  /*background: orange ;*/
  margin-top: -2vmin;
  margin-left: 2vmin;
}

.sheep-zone.alone:nth-child(even) {
  margin-top: 3vmin;
}

.sheep-zone.alone:nth-child(3n + 1) {
  margin-left: 3vmin;
}

.sheep-zone.alone:nth-child(3n + 4) {
  margin-left: -3vmin;
}

.sheep-zone.alone:nth-child(5n) {
  margin-top: 2vmin;
}

#lost,
#trap {
  color: #ff000080;
  font-size: 3vmin;
  top: calc(50% + 0.5em);
  position: absolute;
  left: calc(50% - 10vmin);
  width: 20vmin;
  text-align: right;
}

#lost:before {
  color: #00000040;
  content: "LOSSES ";
  float: left;
}

#trap {
  color: #0000ff80;
  top: calc(50% - 1.5em);
}

#trap:before {
  color: #00000040;
  content: "TRAPPED ";
  float: left;
}

JavaScript

/*** A lot of debugging work... ***/

(function () {
  /** Random Position Sheep **/
  var allSheep = document.querySelectorAll(".sheep-zone");

for (var i = 0; i < allSheep.length; i++) {
    var posRight = window.innerWidth - 50 - 120;
    var posLeft = Math.random() * window.innerWidth - allSheep[i].offsetWidth;
    if (posLeft < 50) posLeft = 50;
    if (posLeft > posRight) posLeft = posRight - 120;

var posBottom = window.innerHeight - 50 - 120;
    var posTop = Math.random() * window.innerHeight - allSheep[i].offsetHeight;
    if (posTop < 50) posTop = 50;
    if (posTop > posBottom) posTop = posBottom - 120;

allSheep[i].style.left = posLeft + "px";
    allSheep[i].style.top = posTop + "px";
  }

/*** CSS Tricks - Chris Coyier - Calculate Distance ***/
  // https://css-tricks.com/snippets/jquery/calculate-distance-between-mouse-and-element/

var mX,
    mY,
    distance,
    fencedistance,
    sheepdistance,
    //distances = document.querySelectorAll('.distance span'),
    sheep = document.querySelectorAll(".sheep-zone"),
    fence = document.querySelector(".sheep-pen");

function calculateDistance(elem, mouseX, mouseY) {
    return Math.floor(
      Math.sqrt(
        Math.pow(mouseX - (elem.offsetLeft + elem.offsetWidth / 2), 2) +
          Math.pow(mouseY - (elem.offsetTop + elem.offsetHeight / 2), 2)
      )
    );
  }

/*** Mouse Listener ***/
  document.addEventListener("mousemove", function (e) {
    for (var i = 0; i < sheep.length; i++) {
      mX = e.pageX;
      mY = e.pageY;

distance = calculateDistance(sheep[i], mX, mY);

//sheep distance
      for (var x = 0; x < sheep.length; x++) {
        sheepdistance = calculateDistance(
          sheep[i],
          Math.round(
            sheep[x].getBoundingClientRect().left + sheep[x].offsetWidth / 2
          ),
          Math.round(
            sheep[x].getBoundingClientRect().top + sheep[x].offsetHeight / 2
          )
        );

if (sheep[i] != sheep[x]) {
          if (sheepdistance < 100) sheep[i].classList.add("alone");
          else sheep[i].classList.remove("alone");
        }
      }

//fence distance
      fencedistance = calculateDistance(
        sheep[i],
        Math.round(fence.getBoundingClientRect().left + fence.offsetWidth / 2),
        Math.round(fence.getBoundingClientRect().top + fence.offsetHeight / 2)
      );
      if (fencedistance < 100) sheep[i].classList.add("catched");
      else sheep[i].classList.remove("catched");

//add/remove class for scared sheep
      if (distance < 50) sheep[i].classList.add("scared");
      else sheep[i].classList.remove("scared");

//if the sheep is near dog
      if (distance < 100) {
        centerSheepX = sheep[i].offsetWidth / 2;
        centerSheepY = sheep[i].offsetHeight / 2;

posSheepX = Math.round(sheep[i].style.left.slice(0, -2)) + centerSheepX;
        posSheepY = Math.round(sheep[i].style.top.slice(0, -2)) + centerSheepY;

//sheep pos X
        if (mX < posSheepX) sheep[i].style.left = mX + 60 + "px";
        if (mX > posSheepX) sheep[i].style.left = mX - 180 + "px";

//sheep pos Y
        if (mY < posSheepY) sheep[i].style.top = mY + 60 + "px";
        if (mY > posSheepY) sheep[i].style.top = mY - 180 + "px";
      }
    }
  });
})(); // end function

/*** DOG MOVEMENT ***/

var timer;
var dog = document.getElementById("dog");

function dogStopped() {
  setTimeout(function () {
    dog.classList.add("sit");
  }, 1000);
}

document.addEventListener("mousemove", function (e) {
  dog.style.left = e.clientX + "px";
  dog.style.top = e.clientY + "px";
  clearTimeout(timer);
  timer = setTimeout(dogStopped, 300);
});

/*** DOG DIRECTION ***/
/*** Detect Mouse Direction - Stackoverflow ***/
/*https://stackoverflow.com/questions/24294452/detect-mouse-direction-javascript*/
var direction = "",
  oldx = (oldy = 0),
  mousemovemethod = function (e) {
    if (e.pageY < oldy) {
      directionY = "top";
    } else if (e.pageY > oldy) {
      directionY = "bottom";
    }

if (e.pageX < oldx) {
      directionX = "left";
    } else if (e.pageX > oldx) {
      directionX = "right";
    }

dog.className = directionY + " " + directionX;

oldx = e.pageX;
    oldy = e.pageY;
  };

document.addEventListener("mousemove", mousemovemethod);

/**  Count Losses and Trapped **/
setInterval(function () {
  var lostSheep = 0,
    allSheep = document.querySelectorAll(".sheep-zone");

for (var i = 0; i < allSheep.length; i++) {
    if (allSheep[i].style.left.slice(0, -2) < -100) {
      allSheep[i].style.left = -200 + "px";
      lostSheep++;
    } else if (allSheep[i].style.top.slice(0, -2) < -100) {
      allSheep[i].style.top = -200 + "px";
      lostSheep++;
    } else if (allSheep[i].style.left.slice(0, -2) > window.innerWidth) {
      allSheep[i].style.left = window.innerWidth + 200 + "px";
      lostSheep++;
    } else if (allSheep[i].style.top.slice(0, -2) > window.innerHeight) {
      allSheep[i].style.top = window.innerWidth + 200 + "px";
      lostSheep++;
    }
  }

document.getElementById("lost").innerText = lostSheep;

document.getElementById("trap").innerText = document.querySelectorAll(
    ".catched"
  ).length;
}, 1000);

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg