Pong，使用 P5.js 建構的復古遊戲

螢幕快照 2016-03-20 上午1.23.09.png

一句話摘要：使用 P5.js 這個 JavaScript 繪圖框架，重建 Pong 這個復古遊戲，並重新開動 100sites 專案

因為一直很忙加上懶惰加上拖延，已經快一個月沒有持續我的 100sites 專案了，然現在我終於忙完了，是時候該重拾行囊，繼續走完這段成為專業全端工程師的修行之路了！

這次的#007 成品是 Pong，一個很經典遊戲，左右兩位玩家操縱著各自的棒棒將球反彈給對方，漏球最多的一方輸。

前些日子在 SITCON 年有講者分享P5.js這個框架，他算是我在#006 Snack 裡面使用的Processing.js的兄弟，Processing.js 使用 Processing 語言，但 P5.js 使用 JavaScript 來達到相同的功能，對於現在 JS 大熱門的趨勢來看，P5.js 也是一個很值得學起來的框架之一呀！

以下附上本次的程式碼：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Pong!</title>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.23/p5.js"></script>
    <script src="pong.js"></script>
    <style>
      body {
        padding: 0;
        margin: 0;
        overflow: hidden;
      }
    </style>
  </head>

  <body></body>
</html>

var BAR_MOVE_SPEED = 15
var BALL_SIZE = 20
var BALL_SPEED = 10

var MAP_WIDTH = 800
var MAP_HEIGHT = 500

var BAR_WIDTH = 10
var BAR_HEIGHT = 120

var p1_y
var p2_y
var p1_score
var p2_score

var ball_x
var ball_y
var ball_velocity_x
var ball_velocity_y

var gamePaused = false
var gameStarted = false

function setup() {
  MAP_WIDTH = windowWidth
  MAP_HEIGHT = windowHeight
  createCanvas(MAP_WIDTH, MAP_HEIGHT)

  ellipseMode(CENTER)
  rectMode(CENTER)

  p1_y = MAP_HEIGHT / 2
  p2_y = MAP_HEIGHT / 2
  p1_score = 0
  p2_score = 0
  ball_x = MAP_WIDTH / 2
  ball_y = MAP_HEIGHT / 2
  ball_velocity_x = BALL_SPEED
  ball_velocity_y = BALL_SPEED
}

function draw() {
  if (!gamePaused && gameStarted) {
    pleyerControl()
    ballMove()
    ballCollide()
    checkBallOutside()
  }
  displayGame()
  displayGUI()
}

function keyPressed() {
  if (keyCode === ENTER) {
    if (!gameStarted) {
      gameStarted = true
    } else {
      gamePaused = !gamePaused
    }
  }
}

function pleyerControl() {
  if (keyIsDown(87) || keyIsDown(119)) {
    // W
    if (p1_y - BAR_HEIGHT / 2 > 0) {
      p1_y -= BAR_MOVE_SPEED
    }
  } else if (keyIsDown(83) || keyIsDown(115)) {
    // S
    if (p1_y + BAR_HEIGHT / 2 < MAP_HEIGHT) {
      p1_y += BAR_MOVE_SPEED
    }
  }

  if (keyIsDown(UP_ARROW)) {
    // UP
    if (p2_y - BAR_HEIGHT / 2 > 0) {
      p2_y -= BAR_MOVE_SPEED
    }
  } else if (keyIsDown(DOWN_ARROW)) {
    // DOWN
    if (p2_y + BAR_HEIGHT / 2 < MAP_HEIGHT) {
      p2_y += BAR_MOVE_SPEED
    }
  }
}

function ballMove() {
  ball_x += ball_velocity_x
  ball_y += ball_velocity_y
}

function ballCollide() {
  if (ball_y + BALL_SIZE / 2 > MAP_HEIGHT || ball_y - BALL_SIZE / 2 < 0) {
    // collide with upper and lower walls
    ball_velocity_y = -ball_velocity_y
  }

  if (
    ball_x <= 30 + BAR_WIDTH / 2 && // collide with player1
    ball_x >= 30 - BAR_WIDTH / 2 &&
    ball_y >= p1_y - BAR_HEIGHT / 2 &&
    ball_y <= p1_y + BAR_HEIGHT / 2
  ) {
    ball_velocity_x = -ball_velocity_x
    // slightly change ball y speed according to the position ball hit on the bar
    ball_velocity_y += ((ball_y - p1_y) * 10) / (BAR_HEIGHT / 2)
    if (ball_velocity_y > BALL_SPEED)
      // strict the ball speed not exceed max speed
      ball_velocity_y = BALL_SPEED
    else if (ball_velocity_y < -BALL_SPEED) ball_velocity_y = -BALL_SPEED
  }

  if (
    ball_x >= MAP_WIDTH - 30 - BAR_WIDTH / 2 && // collide with player2
    ball_x <= MAP_WIDTH - 30 + BAR_WIDTH / 2 &&
    ball_y >= p2_y - BAR_HEIGHT / 2 &&
    ball_y <= p2_y + BAR_HEIGHT / 2
  ) {
    ball_velocity_x = -ball_velocity_x
    // slightly change ball y speed according to the position ball hit on the bar
    ball_velocity_y += ((ball_y - p2_y) * 10) / (BAR_HEIGHT / 2)
    if (ball_velocity_y > BALL_SPEED)
      // strict the ball speed not exceed max speed
      ball_velocity_y = BALL_SPEED
    else if (ball_velocity_y < -BALL_SPEED) ball_velocity_y = -BALL_SPEED
  }
}

function checkBallOutside() {
  if (ball_x > MAP_WIDTH) {
    ball_x = MAP_WIDTH / 2
    ball_y = MAP_HEIGHT / 2
    ++p1_score
  } else if (ball_x < 0) {
    ball_x = MAP_WIDTH / 2
    ball_y = MAP_HEIGHT / 2
    ++p2_score
  }
}

function displayGame() {
  background(0)
  fill(255) // white
  rect(30, p1_y, BAR_WIDTH, BAR_HEIGHT) // player1 bar
  rect(MAP_WIDTH - 30, p2_y, BAR_WIDTH, BAR_HEIGHT) // player2 bar
  fill(0, 255, 255)
  ellipse(ball_x, ball_y, BALL_SIZE, BALL_SIZE) // ball
}

function displayGUI() {
  if (gamePaused) {
    textSize(100)
    fill(255)
    textAlign(CENTER)
    text('PAUSED', MAP_WIDTH / 2, MAP_HEIGHT / 2)
  }
  if (!gameStarted) {
    textAlign(CENTER)
    textSize(100)
    fill(0, 255, 255)
    text('Pong!', MAP_WIDTH / 2, 150)
    fill(255)
    textSize(80)
    text('Press ENTER to Start', MAP_WIDTH / 2, MAP_HEIGHT / 2)
    textSize(40)
    text(
      'Left player: W, S to move\nRight player: UP, DOWN to move\nPress ENTER to pause',
      MAP_WIDTH / 2,
      MAP_HEIGHT / 2 + 150
    )
  }
  textSize(30)
  textAlign(LEFT)
  text(p1_score, 30, 30)
  textAlign(RIGHT)
  text(p2_score, MAP_WIDTH - 30, 30)
}

​Pong，使用 P5.js 建構的復古遊戲

Pong，使用 P5.js 建構的復古遊戲