玩命牛的成长记录
登陆
2068次阅读
整个游戏全部实现

其实最后两个知识点是很简单的，只是自己没想到而已。

第三个场景的出现用一个end的自定义动画就能搞定，延迟15s播放而已。然后再给body来个黑色背景，再多加几个地鼠，增加点难度，游戏就可以玩起了。

html：

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>打地鼠</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
  <div class="container">
    <input id="startFlag" type="checkbox">
    <div id="start" class="window">
      <h1>打呀打地鼠</h1>
      <p>不许笑，一个严肃的 CSS 游戏</p>
      <div class="btn-group">
        <div class="susliks not-button"></div>
        <label for="startFlag">开始</label>
      </div>
    </div>
    <div id="end" class="window">
      <h2>Game Over</h2>
      <p>壮士欢迎从头再来</p>
      <p class="meta">按 F5/Command R 重来</p>
      <div class="susliks not-button"></div>
    </div>
    <div class="time-wrapper">
      <p>游戏时间：</p>
      <div class="time">
        <div class="progress"></div>
      </div>
    </div>
    <div id="map">
      <div class="map"></div>
      <div class="map"></div>
      <div class="map"></div>
      <div class="map"></div>
      <div class="map"></div>
      <div class="map"></div>
      <div class="map"></div>
      <div class="map"></div>
      <div class="map"></div>
      <div class="map"></div>
      <div class="map"></div>
      <div class="map"></div>
      <div class="map"></div>
      <div class="map"></div>
      <div class="map"></div>
      <div class="map"></div>
      <div class="map"></div>
      <div class="map"></div>
      <div class="map"></div>
    </div>
    <div>
      <div class="group">
        <input type="radio" name="score1" checked/>
        <label for="score1" class="susliks susliks1"></label>
        <input type="radio" name="score2" checked/>
        <label for="score2" class="susliks susliks2"></label>
        <div class="hole"></div>
      </div>
      <div class="group">
        <input type="radio" name="score3" checked/>
        <label for="score3" class="susliks susliks3"></label>
        <div class="hole"></div>
      </div>
      <div class="group">
        <input type="radio" name="score4" checked/>
        <label for="score4" class="susliks susliks4"></label>
        <input type="radio" name="score5" checked/>
        <label for="score5" class="susliks susliks5"></label>
        <input type="radio" name="score6" checked/>
        <label for="score6" class="susliks susliks6"></label>
        <div class="hole"></div>
      </div>
      <div class="group">
        <input type="radio" name="score7" checked/>
        <label for="score7" class="susliks susliks7"></label>
        <input type="radio" name="score8" checked/>
        <label for="score8" class="susliks susliks8"></label>
        <div class="hole"></div>
      </div>
      <div class="group">
        <input type="radio" name="score9" checked/>
        <label for="score9" class="susliks susliks9"></label>
        <input type="radio" name="score10" checked/>
        <label for="score10" class="susliks susliks10"></label>
        <div class="hole"></div>
      </div>
      <div class="group">
        <input type="radio" name="score11" checked/>
        <label for="score11" class="susliks susliks11"></label>
        <input type="radio" name="score12" checked/>
        <label for="score12" class="susliks susliks12"></label>
        <div class="hole"></div>
      </div>
    </div>
    <div class="points">
      <div class="points-viewport">
        <div class="points-list">
          <input type="radio" name="score1" id="score1"/><div class="block"></div>
          <input type="radio" name="score2" id="score2"/><div class="block"></div>
          <input type="radio" name="score3" id="score3"/><div class="block"></div>
          <input type="radio" name="score4" id="score4"/><div class="block"></div>
          <input type="radio" name="score5" id="score5"/><div class="block"></div>
          <input type="radio" name="score6" id="score6"/><div class="block"></div>
          <input type="radio" name="score7" id="score7"/><div class="block"></div>
          <input type="radio" name="score8" id="score8"/><div class="block"></div>
          <input type="radio" name="score9" id="score9"/><div class="block"></div>
          <input type="radio" name="score10" id="score10"/><div class="block"></div>
          <input type="radio" name="score11" id="score11"/><div class="block"></div>
          <input type="radio" name="score12" id="score12"/><div class="block"></div>
        </div>
        <div>
          <div class="point">0</div>
          <div class="point">1</div>
          <div class="point">2</div>
          <div class="point">3</div>
          <div class="point">4</div>
          <div class="point">5</div>
          <div class="point">6</div>
          <div class="point">7</div>
          <div class="point">8</div>
          <div class="point">9</div>
          <div class="point">10</div>
          <div class="point">11</div>
          <div class="point">12</div>
        </div>
      </div>
    </div>
  </div>
</body>
check the result

css：

* {
  padding : 0px;
  margin : 0px;
  box-sizing: border-box;
}
body {
  background-color : black;
}
.container {
  position : absolute;
  left : 50%;
  top : 50%;
  width : 600px;
  height : 600px;
  margin-left : -300px;
  margin-top : -300px;
  border : 1px solid black;
  overflow : hidden;
  background: -webkit-linear-gradient(top, #8adcf7 0%, #bbe8fd 100%);
  background: linear-gradient(to bottom, #8adcf7 0%, #bbe8fd 100%);
}
.window  {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 9;
  -webkit-transition: opacity 0.6s;
  transition: opacity 0.6s;
}
.window .susliks {
  position: relative;
  top: 6px;
  left: 0;
  margin: 0 auto;
}
.susliks {
  position : absolute;
  top: 70px;
  left: 7px;
  width : 56px;
  height : 100px;
  border-radius : 20px;
  background : #e3c498;
  cursor : pointer;
  background-image : -webkit-radial-gradient(20px 23px, circle, #000000 5%, rgba(255, 255, 255, 0) 5%),
             -webkit-radial-gradient(17px 20px, circle, #ffffff 10%, rgba(255, 255, 255, 0) 10%),
             -webkit-radial-gradient(36px 23px, circle, #000000 5%, rgba(255, 255, 255, 0) 5%),
             -webkit-radial-gradient(39px 20px, circle, #ffffff 10%, rgba(255, 255, 255, 0) 10%),
             -webkit-radial-gradient(center 36px, circle, #000000 8%, rgba(255, 255, 255, 0) 8%),
             -webkit-radial-gradient(center 48px, circle, #ffffff 20%, rgba(255, 255, 255, 0) 20%);
  background-image : radial-gradient(circle at 20px 23px, #000000 5%, rgba(255, 255, 255, 0) 5%),
             radial-gradient(circle at 17px 20px, #ffffff 10%, rgba(255, 255, 255, 0) 10%),
             radial-gradient(circle at 36px 23px, #000000 5%, rgba(255, 255, 255, 0) 5%),
             radial-gradient(circle at 39px 20px, #ffffff 10%, rgba(255, 255, 255, 0) 10%),
             radial-gradient(circle at center 36px, #000000 8%, rgba(255, 255, 255, 0) 8%),
             radial-gradient(circle at center 48px, #ffffff 20%, rgba(255, 255, 255, 0) 20%);
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}
.susliks:before, .susliks:after {
  content : '';
  left : -5px;
  top : -5px;
  width : 20px;
  height : 20px;
  position : absolute;
  background : #e3c498;
  border-radius : 50%;
  background-image : -webkit-radial-gradient(center, circle, #000000 40%, rgba(255, 255, 255, 0) 40%);
  background-image : radial-gradient(circle at center, #000000 40%, rgba(255, 255, 255, 0) 40%);
}
.susliks:after {
  left : auto;
  right : -5px;
}
.not-button {
  cursor : default;
}
.group input[type="radio"] + .susliks {
  opacity : 0;
}
.group input[type="radio"]:checked + .susliks {
  opacity : 1;
}
h1, h2, p {
  color: #fff;
  text-align: center;
}
h1 {
  line-height: 50px;
}
h2 {
  margin-top: 100px;
  margin-bottom: 10px;
}
.meta {
  margin-top: 50px;
  opacity: 0.6;
}
#end {
  top: -800px;
  opacity: 1;
  display: block;
  border-bottom: 2px solid #fff;
}
#end .susliks {
  position: absolute;
  left: 50%;
  top: auto;
  margin-left: -30px;
  bottom: -54px;
}
#startFlag:checked ~ #end {
  -webkit-animation: end 1s linear 15s forwards;
  animation: end 1s linear 15s forwards;
}
@-webkit-keyframes end {
  from {
    top: -800px;
  }
  to {
    top: 0;
  }
}
@keyframes end {
  from {
    top: -800px;
  }
  to {
    top: 0;
  }
}
.btn-group  {
  margin: 80px auto;
  width: 100px;
  height: 90px;
  overflow: hidden;
  position: relative;
}
.btn-group label {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
  background: #51a70d;
  color: #fff;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
  border-bottom: 4px solid #62b210;
  border-radius: 4px;
}
.hole {
  position : absolute;
  left : 0px;
  top : 70px;
  width : 68px;
  height : 100px;
  background-image : -webkit-linear-gradient(left, #2a7d2f 0%, #78fc73 25%, #78fc73 35%, #113e15 95%);
  background-image : linear-gradient(to right, #2a7d2f 0%, #78fc73 25%, #78fc73 35%, #113e15 95%);
  border-left : 1px solid #236d22;
  box-shadow : 0px 2px 5px 0px rgba(0, 0, 0, 0.6);
}
.hole:before {
  display : block;
  content : '';
  position : absolute;
  width : 84px;
  height : 24px;
  margin-left : -8px;
  top : -24px;
  background-image : -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.3) 2px,
                         rgba(255, 255, 255, 0.3) 3px, rgba(255, 255, 255, 0) 4px ),
          -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.4) 3px, rgba(255, 255, 255, 0.2) 5px,
                         rgba(255, 255, 255, 0) 6px ),
          -webkit-linear-gradient(left, #2a7d2f 0%, #78fc73 25%, #78fc73 35%, #113e15 95%);
  background-image : linear-gradient(to bottom, rgba(255, 255, 255, 0) 1px, rgba(255, 255, 255, 0.3) 2px,
                         rgba(255, 255, 255, 0.3) 3px, rgba(255, 255, 255, 0) 4px ),
          linear-gradient(to top, rgba(0, 0, 0, 0.4) 3px, rgba(255, 255, 255, 0.2) 5px,
                         rgba(255, 255, 255, 0) 6px ),
          linear-gradient(to right, #2a7d2f 0%, #78fc73 25%, #78fc73 35%, #113e15 95%);
}
.time-wrapper  {
  position: absolute;
  left: -150px;
  top: 20px;
  -webkit-transition: 1s;
  transition: 1s;
}
#startFlag:checked ~ .time-wrapper {
  left: 20px;
}
#startFlag:checked ~ .time-wrapper .progress {
  -webkit-animation: progress 15s linear 0s forwards;
  animation: progress 15s linear 0s forwards;
}
@-webkit-keyframes progress {
  from {
    width: 0;
    background: #00ff00;
  }
  to {
    width: 136px;
    background: #ff0000;
  }
}
@keyframes progress {
  from {
    width: 0;
    background: #00ff00;
  }
  to {
    width: 136px;
    background: #ff0000;
  }
}
.time-wrapper p {
  color: #fff;
  line-height: 24px;
}
.time {
  border: 2px solid #fff;
  width: 140px;
  height: 20px;
}
.time .progress {
  height: 16px;
  width: 0;
}
#map {
  position: absolute;
  bottom: 0;
  left: -600px;
  width: 1800px;
  height: 800px;
  -webkit-transform: perspective(600px) rotateX(45deg);
  transform: perspective(600px) rotateX(45deg);
  -webkit-transform-origin: center bottom;
  -ms-transform-origin: center bottom;
  transform-origin: center bottom;
}
.map  {
  width: 5%;
  height: 100%;
  float: left;
}
.map:nth-child(2n) {
  background: #62b210;
}
.map:nth-child(2n+1) {
  background: #51a70d;
}
.group {
  position: absolute;
  width : 68px;
}
.group:nth-child(1) {
  left: 45px;
  top: 210px;
}
.group:nth-child(2) {
  left: 165px;
  top: 270px;
}
.group:nth-child(3) {
  left: 345px;
  top: 250px;
}
.group:nth-child(4) {
  left: 80px;
  top: 370px;
}
.group:nth-child(5) {
  left: 400px;
  top: 410px;
}
.group:nth-child(6)  {
  left: 470px;
  top: 230px;
}
.group input[type="radio"] {
  position : absolute;
  top : -1000px;
  left : 0px
}
.points {
  position: absolute;
  top: -100px;
  left: 50%;
  width: 100px;
  height: 48px;
  margin-left: -50px;
  background: rgba(0, 0, 0, 0.2);
  border: 4px solid #ffffff;
  border-radius: 4px;
  color: #fff;
  -webkit-transition: top 1s;
  transition: top 1s;
}
#startFlag:checked ~ .points {
  top: 20px;
}
.points .points-viewport {
  overflow: hidden;
  height: 40px;
  width: 100%;
}
.points-list {
  margin-top : -480px;
}
.points-list input[type="radio"] {
  position : absolute;
  top : -1000px;
  left : 0px;
}
.points-list .block {
  width : 100px;
  height : 40px;
  transition : all 1s linear 0s;
  -webkit-transition : all 1s linear 0s;
}
.points-list input[type="radio"]:checked + .block{
  height : 0px;
}
.point {
  display: block;
  height: 40px;
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  cursor: default;
}
#startFlag  {
  position: absolute;
  top: -20px;
  left: -20px;
  z-index: 999;
}
#startFlag:checked + #start {
  opacity: 0;
  pointer-events: none;
  -webkit-pointer-events: none;
}
.group input[type="radio"]:checked + .susliks1 {
  -webkit-animation-name: susliks1;
  animation-name: susliks1;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
  -webkit-animation-duration: 10s;
  animation-duration: 10s;
}
@-webkit-keyframes susliks1 {
  0% {
    top: 70px;
  }
  10% {
    top: 0;
  }
  15% {
    top: 0;
  }
  20% {
    top: 70px;
  }
  100% {
    top: 70px;
  }
}
@keyframes susliks1 {
  0% {
    top: 70px;
  }
  10% {
    top: 0;
  }
  15% {
    top: 0;
  }
  20% {
    top: 70px;
  }
  100% {
    top: 70px;
  }
}
.group input[type="radio"]:checked + .susliks2 {
  -webkit-animation-name: susliks2;
  animation-name: susliks2;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
  -webkit-animation-duration: 10s;
  animation-duration: 10s;
}
@-webkit-keyframes susliks2 {
  0% {
    top: 70px;
  }
  30% {
    top: 70px;
  }
  60% {
    top: 0;
  }
  70% {
    top: 0;
  }
  90% {
    top: 0;
  }
}
@keyframes susliks2 {
  0% {
    top: 70px;
  }
  30% {
    top: 70px;
  }
  60% {
    top: 0;
  }
  70% {
    top: 0;
  }
  90% {
    top: 0;
  }
}
.group input[type="radio"]:checked + .susliks3 {
  -webkit-animation-name: susliks3;
  animation-name: susliks3;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  -webkit-animation-duration: 5s;
  animation-duration: 5s;
}
@-webkit-keyframes susliks3 {
  0% {
    top: 70px;
  }
  30% {
    top: 70px;
  }
  60% {
    top: 0;
  }
  70% {
    top: 0;
  }
  90% {
    top: 70px;
  }
}
@keyframes susliks3 {
  0% {
    top: 70px;
  }
  30% {
    top: 70px;
  }
  60% {
    top: 0;
  }
  70% {
    top: 0;
  }
  90% {
    top: 70px;
  }
}
.group input[type="radio"]:checked + .susliks4 {
  -webkit-animation-name: susliks4;
  animation-name: susliks4;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
  -webkit-animation-duration: 8s;
  animation-duration: 8s;
}
@-webkit-keyframes susliks4 {
  0% {
    top: 70px;
  }
  10% {
    top: 70px;
  }
  15% {
    top: 0;
  }
  30% {
    top: 70px;
  }
}
@keyframes susliks4 {
  0% {
    top: 70px;
  }
  10% {
    top: 70px;
  }
  15% {
    top: 0;
  }
  30% {
    top: 70px;
  }
}
.group input[type="radio"]:checked + .susliks5 {
  -webkit-animation-name: susliks5;
  animation-name: susliks5;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  -webkit-animation-duration: 10s;
  animation-duration: 10s;
}
@-webkit-keyframes susliks5 {
  0% {
    top: 70px;
  }
  70% {
    top: 70px;
  }
  80% {
    top: 0;
  }
  90% {
    top: 70px;
  }
}
@keyframes susliks5 {
  0% {
    top: 70px;
  }
  70% {
    top: 70px;
  }
  80% {
    top: 0;
  }
  90% {
    top: 70px;
  }
}
.group input[type="radio"]:checked + .susliks6 {
  -webkit-animation-name: susliks6;
  animation-name: susliks6;
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
  -webkit-animation-duration: 6s;
  animation-duration: 6s;
}
@-webkit-keyframes susliks6 {
  0% {
    top: 70px;
  }
  70% {
    top: 70px;
  }
  90% {
    top: 0;
  }
  100% {
    top: 70px;
  }
}
@keyframes susliks6 {
  0% {
    top: 70px;
  }
  70% {
    top: 70px;
  }
  90% {
    top: 0;
  }
  100% {
    top: 70px;
  }
}
.group input[type="radio"]:checked + .susliks7 {
  -webkit-animation-name: susliks7;
  animation-name: susliks7;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
  -webkit-animation-duration: 6s;
  animation-duration: 6s;
}
@-webkit-keyframes susliks7 {
  0% {
    top: 70px;
  }
  20% {
    top: 70px;
  }
  25% {
    top: 0;
  }
  35% {
    top: 70px;
  }
}
@keyframes susliks7 {
  0% {
    top: 70px;
  }
  20% {
    top: 70px;
  }
  25% {
    top: 0;
  }
  35% {
    top: 70px;
  }
}
.group input[type="radio"]:checked + .susliks8 {
  -webkit-animation-name: susliks8;
  animation-name: susliks8;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  -webkit-animation-duration: 8s;
  animation-duration: 8s;
}
@-webkit-keyframes susliks8 {
  0% {
    top: 70px;
  }
  50% {
    top: 70px;
  }
  60% {
    top: 0;
  }
  70% {
    top: 70px;
  }
}
@keyframes susliks8 {
  0% {
    top: 70px;
  }
  50% {
    top: 70px;
  }
  60% {
    top: 0;
  }
  70% {
    top: 70px;
  }
}
.group input[type="radio"]:checked + .susliks9 {
  -webkit-animation-name: susliks9;
  animation-name: susliks9;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  -webkit-animation-duration: 10s;
  animation-duration: 10s;
}
@-webkit-keyframes susliks9 {
  0% {
    top: 70px;
  }
  10% {
    top: 70px;
  }
  20% {
    top: 0;
  }
  40% {
    top: 70px;
  }
}
@keyframes susliks9 {
  0% {
    top: 70px;
  }
  10% {
    top: 70px;
  }
  20% {
    top: 0;
  }
  40% {
    top: 70px;
  }
}
.group input[type="radio"]:checked + .susliks10 {
  -webkit-animation-name: susliks10;
  animation-name: susliks10;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
  -webkit-animation-duration: 8s;
  animation-duration: 8s;
}
@-webkit-keyframes susliks10 {
  0% {
    top: 70px;
  }
  40% {
    top: 70px;
  }
  55% {
    top: 0;
  }
  65% {
    top: 70px;
  }
}
@keyframes susliks10 {
  0% {
    top: 70px;
  }
  40% {
    top: 70px;
  }
  55% {
    top: 0;
  }
  65% {
    top: 70px;
  }
}
.group input[type="radio"]:checked + .susliks11 {
  -webkit-animation-name: susliks11;
  animation-name: susliks11;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  -webkit-animation-duration: 10s;
  animation-duration: 10s;
}
@-webkit-keyframes susliks11 {
  0% {
    top: 70px;
  }
  40% {
    top: 70px;
  }
  50% {
    top: 0;
  }
  60% {
    top: 70px;
  }
}
@keyframes susliks11 {
  0% {
    top: 70px;
  }
  40% {
    top: 70px;
  }
  50% {
    top: 0;
  }
  60% {
    top: 70px;
  }
}
.group input[type="radio"]:checked + .susliks12 {
  -webkit-animation-name: susliks12;
  animation-name: susliks12;
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
  -webkit-animation-duration: 6s;
  animation-duration: 6s;
}
@-webkit-keyframes susliks12 {
  0% {
    top: 70px;
  }
  30% {
    top: 70px;
  }
  50% {
    top: 0;
  }
  55% {
    top: 70px;
  }
}
@keyframes susliks12 {
  0% {
    top: 70px;
  }
  30% {
    top: 70px;
  }
  50% {
    top: 0;
  }
  55% {
    top: 70px;
  }
}

虽然用了比较绕的方法实现了游戏，但是里面的知识点是可以在实际中用上的，而且很多css的技巧也在里面了，收获颇丰。

经过测试，在safari里面有一个不小的bug，点击地鼠后，地鼠不会钻下去，而是停在原位，这严重影响了游戏的运行，我们用了一个hack技巧，在uncheck的时候我们设置地鼠透明度为0，只有在checked的时候透明度是1，这样就解决了safari中的问题，也不会影响在其他浏览器的运行情况。

如果您觉得此教程不错，想支持一下，您可以通过支付宝扫码给我们一点，不要超过100元哦！
评论请先登录

联系人：李先生     联系电话：13581641192     电子邮件：channingbreeze@163.com     QQ：396417401     微信号：xin874058

友情链接：欣欣网站制作

Copyright © 2015 calfnote.com All Rights Reserved | 京ICP备15008048号-1