源码系列 --- 五分钟撸个小游戏【小小乒乓球】

前置条件：官网下载jQuery或者直接link一波jQuery。

逻辑部分：

每30毫秒小球判断方向并位移一次。

处理了多按键同时按下的情况。

编写了边界处理：触碰到边界就改变方向，并记录得分。

编写了碰撞事件：触碰到挡板就会改变方向。

样式部分：

没啥特色。简单的渐变色。

 

 

HTML源码如下：

  
  
  
  


  

    
Ping Pong
  
 
  

    This is a n example of creating a Ping Pong Game.
  
  

    

      

      

      

      

      

      

      

    
  
  
  
  

JS源码如下：

var KEY = {
  UP: 38,
  DOWN: 40,
  w: 87,
  s: 83
}
var pingpong = {
}
pingpong.pressedKeys = [];

pingpong.ball = {
  speed: 5,
  x: 150,
  y: 100,
  directionX: 1,
  directionY: 1
}

$(() => {
  pingpong.timer = setInterval(gameLoop, 30);
  $(document).keydown((e) => {
    pingpong.pressedKeys[e.which] = true;
  })
  $(document).keyup((e) => {
    pingpong.pressedKeys[e.which] = false;
  })
})

function gameLoop() {
  movePaddles();
  moveBall();
}

function movePaddles() {
  let topB = parseInt($('#paddleB').css('top'));
  let topA = parseInt($('#paddleA').css('top'));
  if (pingpong.pressedKeys[KEY.UP]) {
    $('#paddleB').css('top', topB - 5);
  }
  if (pingpong.pressedKeys[KEY.DOWN]) {
    $('#paddleB').css('top', topB + 5);
  }
  if (pingpong.pressedKeys[KEY.w]) {
    $('#paddleA').css('top', topA - 5);
  }
  if (pingpong.pressedKeys[KEY.s]) {
    $('#paddleA').css('top', topA + 5);
  }
}

function moveBall() {
  var playgroundHeight = parseInt($('#playground').height());
  var playgroundWidth = parseInt($('#playground').width());
  var ball = pingpong.ball;

  if (ball.y + ball.speed * ball.directionY > playgroundHeight) {
    ball.directionY = -1
  }
  if (ball.y + ball.speed * ball.directionY < 0) {
    ball.directionY = 1;
  }

  if (ball.x + ball.speed * ball.directionX > playgroundWidth) {
    ball.x = 250;
    ball.y = 100;
    $('#ball').css({
      'top': ball.y,
      'left': ball.x
    })
    console.log('Aヾ(￣ー￣)X(^▽^)ゞ胜利')
    alert('Aヾ(￣ー￣)X(^▽^)ゞ胜利')
    ball.directionX = -1
  }
  if (ball.x + ball.speed * ball.directionX < 0) {
    ball.x = 250;
    ball.y = 100;
    $('#ball').css({
      'top': ball.y,
      'left': ball.x
    })
    console.log('Bヾ(￣ー￣)X(^▽^)ゞ胜利')
    alert('Bヾ(￣ー￣)X(^▽^)ゞ胜利')
    ball.directionX = 1
  }

  var paddleAX = parseInt($('#paddleA').css('left')) + parseInt($('#paddleA').css('width'))
  var paddleAYBottom = parseInt($('#paddleA').css('top')) + parseInt($('#paddleA').css('height'))
  var paddleAYTop = parseInt($('#paddleA').css('top'))

  if (ball.x + ball.speed * ball.directionX <= paddleAX) {
    if (ball.y + ball.speed * ball.directionY <= paddleAYBottom
      && ball.y + ball.speed * ball.directionY >= paddleAYTop) {
        ball.directionX = 1
      }
  }

  var paddleBX = parseInt($('#paddleB').css('left'))
  var paddleBYBottom = parseInt($('#paddleB').css('top')) + parseInt($('#paddleB').css('height'))
  var paddleBYTop = parseInt($('#paddleB').css('top'))

  if (ball.x + ball.speed * ball.directionX >= paddleBX) {
    if (ball.y + ball.speed * ball.directionY <= paddleBYBottom
      && ball.y + ball.speed * ball.directionY >= paddleBYTop) {
        ball.directionX = -1
      }
  }
  ball.x += ball.speed * ball.directionX
  ball.y += ball.speed * ball.directionY

  $('#ball').css({
    'left': ball.x,
    'top': ball.y
  })
}

CSS源码如下：

#playground {
  position: relative;
  background: #e0ffe0;
  width: 400px;
  height: 200px;
  overflow: hidden;
}
#ball {
  position: absolute;
  left: 150px;
  top: 100px;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background-color: #fbb;
}
.paddle {
  position: absolute;
  left: 50px;
  top: 70px;
  width: 10px;
  height: 70px;
  border-radius: 10px;
  background: linear-gradient(245deg,#fdef25,#9dbaec);
}
#paddleB {
  left: 320px;
}
.line-row {
  position: absolute;
  top: 100px;
  left: 0;
  right: 0;
  height: 1px;
  background-color: #aaa;
}
.line-column {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: #aaa;
}
.left100 {
  left: 100px;
}
.left200 {
  left: 200px;
}
.left300 {
  left: 300px;
}

源码相关GitHub仓库https://github.com/xmx134/game-h5-base