弹力球游戏

下载代码

html

css

分享到微信朋友圈

html

css

@import url('https://fonts.googleapis.com/css?family=Montserrat');

html, body {
  background: white;
  width: 100vw;
  height: 100vh;
  position: relative;
  margin: 0;
  padding: 0;
  overflow: hidden;
  display: flex;
  font-family: 'Montserrat', sans-serif;

}

.pong {
  background: white;
  width: 99vw;
  height: 90vh;
  position: relative;
  margin: auto;
  padding: 0;
  box-sizing: border-box;
}

.player{
  background: #35B0E9;
  width: 15%;
  height: 10px;
  position: absolute;
  bottom: -10px;
  left: 42.5%;
  border-radius: 4px;
  box-shadow: 0 0 20px rgba(0,0,0,0.25);
}

.ball{
  background: #35B0E9;
  width: 15px;
  height: 15px;
  position: absolute;
  border-radius: 100%;
  transform: translate(-7px, -7px);
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  z-index: 3000;
}

.predict{
  border: 1px solid red;
  width: 15px;
  height: 15px;
  position: absolute;
  top: 0px;
  left: 50px;
  border-radius: 100%;
  transform: translate(-7px, -7px);
  opacity: 0;
}

.ai{
  background: white;
  width: 15%;
  height: 10px;
  position: absolute;
  top: -10px;
  left: 42.5%;
  border-radius: 4px;
  box-shadow: 0 0 20px rgba(0,0,0,0.25);
}

.message {
  position: absolute;
  top: 20%;
  left: 10%;
  font-weight: 100;
}

.score {
  position: absolute;
  top: 80%;
  left: 10%;
  .title {
    opacity: .4;
    font-size: 12px;
    margin-bottom: 5px;
  }
  .number {
    font-weight: 100;
    margin-right: 10px;
  }
  .name {
    font-weight: 100;
  }
}

.time {
  position: absolute;
  top: 50%;
  left: 10%;
  .title {
    opacity: .4;
    font-size: 12px;
    margin-bottom: 5px;
  }
  .left {
    font-weight: 100;
  }
}

.ui-infos {
  position: absolute;
  font-size: 300px;
  opacity: 0.1;
  top: 50%;
  left: 50%;
  display: block;
  transform: translate(-50%, -50%);
  transition: .3s .3s ease all;
  &.invisible {
    opacity: 0;
  }
}

JavaScript

Pong.prototype = {
    start: function() {
      console.clear();
      console.log('pong start');
      this.player();
      this.ai();
      this.addpredict();
      this.ball();
      loop();
      var self = this;
      var go = setInterval(function() {
        document.querySelector('.ui-infos').innerHTML = self.reset;
        document.querySelector('.ui-infos').classList.remove('invisible');
        self.reset--;
        if (self.reset < 0) {
          self.reset = 'GO!';
          document.querySelector('.ui-infos').innerHTML = self.reset;
          document.querySelector('.ui-infos').classList.add('invisible');
          self.reset = 3;
          self.setchrono();
          self.x = 10;
          self.y = 10;
          self.started = true;
          clearInterval(go);
        }
      }, 1000);
    },

resize: function() {
      this.size = this.container.getBoundingClientRect();
      this.bottom = this.size.bottom;
      this.top = this.size.top;
      this.left = this.size.left;
      this.right = this.size.right;
      this.playerleft = this.player.getBoundingClientRect().left;
      this.ballleft = this.ball.getBoundingClientRect().left;
      this.balltop = this.ball.getBoundingClientRect().top;
      this.aileft = this.ai.getBoundingClientRect().left;
      this.airight = this.ai.getBoundingClientRect().right;
      this.predictleft = this.predict.getBoundingClientRect().left;
      this.predicttop = this.predict.getBoundingClientRect().top;
      this.playerwidth = this.player.clientWidth;
    },

setchrono: function() {
      var self = this;
      this.clock = setInterval(function() {
        self.time = self.time - 10;
        var ms = self.time;
        var minutes = Math.floor((ms / 1000 / 60) % 60);
        var seconds = Math.floor((ms / 1000) % 60);
        var ds = Math.floor((ms / 10) % 100);
        if (minutes < 10) {
          minutes = '0' + minutes;
        }
        if (seconds < 10) {
          seconds = '0' + seconds;
        }
        if (ds < 10) {
          ds = '0' + ds;
        }
        document.querySelector('.left').innerHTML = minutes + ':' + seconds + ':' + ds;
      }, 10);
    },

player: function() {
      var player = document.createElement('div');
      player.classList.add('player');
      this.container.appendChild(player);
      this.player = document.querySelector('.player');
      this.playerwidth = this.player.clientWidth;
      this.playerleft = this.player.getBoundingClientRect().left;
    },

keypress: function(type, keycode) {
      var i, isPress = (type === 'keydown');
      if (keycode === this.controler.left) {
        this.controls.left = isPress;
      } else if (keycode === this.controler.right) {
        this.controls.right = isPress;
      }

if (type == 'keyup') {
        var self = this;
        setTimeout(function() {
          self.leftinertia = 0;
          self.rightinertia = 0;
          self.aileftinertia = 0;
          self.airightinertia = 0;
        }, 200);
      }
    },

playermove: function() {
      if (this.controls.left != false && this.playerleft >= 0) {
        this.rightinertia = 0;
        this.playerleft = this.playerleft - this.speed;
        this.player.style.left = this.playerleft + 'px';
        if (this.started == false) {
          this.ballleft = this.ballleft - this.speed;
          this.ball.style.left = this.ballleft + 'px';
        }
        this.leftinertia++;
      } else if (this.controls.right != false && this.playerleft + this.player.clientWidth <= this.container.clientWidth) {
        this.leftinertia = 0;
        this.playerleft = this.playerleft + this.speed;
        this.player.style.left = this.playerleft + 'px';
        if (this.started == false) {
          this.ballleft = this.ballleft + this.speed;
          this.ball.style.left = this.ballleft + 'px';
        }
        this.rightinertia++;
      }
    },

ai: function() {
      var ai = document.createElement('div');
      ai.classList.add('ai');
      this.container.appendChild(ai);
      this.ai = document.querySelector('.ai');
      this.aileft = this.ai.getBoundingClientRect().left;
      this.airight = this.ai.getBoundingClientRect().right;
    },

aimove: function() {
      if (this.canmove == true) {
        var decale = this.errormarge();
        var y = this.predictleft + decale;
        var actual = this.aileft;
        if (actual < y - this.playerwidth / 2.2) {
          this.aileftinertia = 0;
          this.aileft = this.aileft + this.speed;
          this.ai.style.left = this.aileft + 'px';
          this.airightinertia++;
          if (actual < y - this.playerwidth / 2.4 && actual + this.playerwidth > y + this.playerwidth / 2.4) {
            this.canmove = false;
          }
        } else if (actual > y - this.playerwidth / 2.2) {
          this.airightinertia = 0;
          this.aileft = this.aileft - this.speed;
          this.ai.style.left = this.aileft + 'px';
          this.aileftinertia++;
          if (actual > y - this.playerwidth / 2.4 && actual + this.playerwidth < y + this.playerwidth / 2.4) {
            this.canmove = false;
          }
        }
      }
    },

errormarge: function() {
      return Math.round(Math.random() * (this.playerwidth) * 1.1) - ((this.playerwidth * 1.1) / 2);
    },

ball: function() {
      var ball = document.createElement('div');
      ball.classList.add('ball');
      this.container.appendChild(ball);
      this.ball = document.querySelector('.ball');
      this.ball.style.top = this.size.bottom - (this.size.top * 2) - 5 + 'px';
      this.ball.style.left = (this.size.left + this.size.right) / 2 + 'px';
      this.ballleft = this.ball.getBoundingClientRect().left;
      this.balltop = this.ball.getBoundingClientRect().top;
      this.predictleft = this.predict.getBoundingClientRect().left;
      this.predicttop = this.predict.getBoundingClientRect().top;
    },

aistart: function() {
      this.ballleft = this.aileft + (this.playerwidth / 2);
      this.ball.style.left = this.ballleft + 'px';
      this.balltop = this.balltop + 17;
      this.ball.style.top = this.balltop + 'px';

var self = this;
      var go = setInterval(function() {
        document.querySelector('.ui-infos').innerHTML = self.reset;
        document.querySelector('.ui-infos').classList.remove('invisible');
        self.reset--;
        if (self.reset < 0) {
          self.reset = 'GO!';
          document.querySelector('.ui-infos').innerHTML = self.reset;
          document.querySelector('.ui-infos').classList.add('invisible');
          self.reset = 3;
          self.setchrono();
          self.x = 10;
          self.y = 10;
          self.started = true;
          clearInterval(go);
        }
      }, 1000);
    },

playerstart: function() {
      this.up = false;
      this.upp = false;
      console.log(this.up, this.upp, this.side, this.sidep);
      this.ballleft = this.playerleft + (this.playerwidth / 2);
      this.ball.style.left = this.ballleft + 'px';
      this.balltop = this.balltop - 8;
      this.ball.style.top = this.balltop + 'px';
      var self = this;
      var go = setInterval(function() {
        document.querySelector('.ui-infos').innerHTML = self.reset;
        document.querySelector('.ui-infos').classList.remove('invisible');
        self.reset--;
        if (self.reset < 0) {
          self.reset = 'GO!';
          document.querySelector('.ui-infos').innerHTML = self.reset;
          document.querySelector('.ui-infos').classList.add('invisible');
          self.reset = 3;
          self.setchrono();
          self.x = 10;
          self.y = 10;
          self.started = true;
          clearInterval(go);
        }
      }, 1000);
    },

ballmove: function() {
      //ia
      if (this.up == true) {
        this.directiony(-(this.y));
        if (this.balltop < 0) {
          this.up = false;
          this.canmove = false;
          this.directiony(0);
          if (this.ballleft >= this.aileft - 10 && this.ballleft + 15 <= this.aileft + 10 + this.playerwidth) {
            if (this.airightinertia != 0) {
              if (this.side == true) {
                this.x = this.x - (this.airightinertia / 20);
              } else {
                this.x = this.x + (this.airightinertia / 20);
              }
            }
            if (this.aileftinertia != 0) {
              if (this.side == true) {
                this.x = this.x + (this.aileftinertia / 20);
              } else {
                this.x = this.x - (this.aileftinertia / 20);
              }
            }
            if (this.x < 2) {
              this.x = 2;
            } else if (this.x > 18) {
              this.x = 18;
            }
          } else {
            this.playerscore++;
            document.querySelector('.user-score .number').innerHTML = this.playerscore;
            var self = this;
            clearInterval(self.clock);
            this.x = 0;
            this.y = 0;
            this.canmove = false;
            this.aistart();
          }
        }
      }

//user
      if (this.up == false) {
        this.directiony(this.y);
        if (this.balltop > this.bottom - this.top - 10) {
          this.up = true;
          this.directiony(0);
          if (this.ballleft >= this.playerleft - 10 && this.ballleft + 15 <= this.playerleft + 10 + this.playerwidth) {
            if (this.rightinertia != 0) {
              if (this.side == true) {
                this.x = this.x + (this.rightinertia / 20);
              } else {
                this.x = this.x - (this.rightinertia / 20);
              }
            }
            if (this.leftinertia != 0) {
              if (this.side == true) {
                this.x = this.x - (this.leftinertia / 20);
              } else {
                this.x = this.x + (this.leftinertia / 20);
              }
            }
            if (this.x < 2) {
              this.x = 2;
            } else if (this.x > 18) {
              this.x = 18;
            }
            this.setpredict(this.ballleft, this.balltop, this.up);
          } else {
            this.aiscore++;
            document.querySelector('.ai-score .number').innerHTML = this.aiscore;
            var self = this;
            clearInterval(self.clock);
            this.x = 0;
            this.y = 0;
            this.started = false;
            this.playerstart();
          }
        }
      }

if (this.side == true) {
        this.directionx(-(this.x));
        if (this.ballleft < 0) {
          this.side = false;
          this.directionx(0);
        }
      }

if (this.side == false) {
        this.directionx(this.x);
        if (this.ballleft > this.right - this.left - 10) {
          this.side = true;
          this.directionx(0);
        }
      }
    },

directiony: function(y) {
      this.balltop = this.balltop + (y);
      this.ball.style.top = this.balltop + 'px';
    },

directionx: function(x) {
      this.ballleft = this.ballleft + (x);
      this.ball.style.left = this.ballleft + 'px';
    },

predictiony: function(y) {
      this.predicttop = this.predicttop + (y);
      this.predict.style.top = this.predicttop + 'px';
    },

predictionx: function(x) {
      this.predictleft = this.predictleft + (x);
      this.predict.style.left = this.predictleft + 'px';
    },

addpredict: function() {
      var predict = document.createElement('div');
      predict.classList.add('predict');
      this.container.appendChild(predict);
      this.predict = document.querySelector('.predict');
      this.predictleft = this.predict.getBoundingClientRect().left;
      this.predicttop = this.predict.getBoundingClientRect().top;
      this.predictright = this.predict.getBoundingClientRect().right;
      this.predictbottom = this.predict.getBoundingClientRect().bottom;
    },

setpredict: function(posx, posy, direction) {
      if (direction == true) {
        var self = this;
        //set predictball
        this.predictleft = posx;
        this.predict.style.left = this.predictleft + 'px';

this.predicttop = posy;
        this.predict.style.top = this.predicttop + 'px';

this.sidep = this.side;
        this.upp = this.up;

setTimeout(function() {
          self.canpredict = true;
          return self.canpredict;
        }, 10);

}
    },

predictmove: function() {
      if (this.canpredict == true) {
        this.predictiony(-(this.y * 4));
        if (this.sidep == false) {
          this.predictionx(this.x * 4);
          if (this.predictleft > this.right - this.left - 10) {
            this.sidep = true;
            this.predictionx(0);
          }
        }

if (this.sidep == true) {
          this.predictionx(-(this.x * 4));
          if (this.predictleft < 0) {
            this.sidep = false;
            this.predictionx(0);
          }
        }

if (this.predicttop <= 0) {
          this.canpredict = false;
          this.canmove = true;
          return false;
        }
      }
    },

end: function(game) {
      var self = this;
      clearInterval(self.clock);
    }
  }
  return Pong;
})();

var game = new Pong();
game.start();
var raf;

function cancelLoop() {
  cancelAnimationFrame(raf);
}

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