Why JS libraries or frameworks?

Why p5.js?

p5.js 執行的基本原理

• "function setup()" 在網頁 load 進來的一開始執行一次，用來設定頁面的背景、一些元素的初始值等

• "function draw()" 之後 1/60 每秒執行一次 (頻率可調)，你可以把一些動畫的邏輯設計在這裡

• 一些內建的 event listeners, 像是 keyPressed(), mouseDragged()… 等，讓你可以直接把 event 對應的動作寫在這邊

練習畫一個三角形

• 完整的 reference: https://p5js.org/reference/

• Online editor: https://editor.p5js.org/

• 畫一個三角形：triangle(x1, y1, x2, y2, x3, y3)

  • Note: 左上角為 (0, 0) 原點
  • 如何畫在正中間？ (hint: 內建變數 width, height)
  • No show? Try: fill(), color()

讓它移動！

• Constant horizontal move: x += vx;

• 自由落體： vy += ay, y += vy;

• 學鳥飛：When key/mouse is pressed, vy = -upY;

  • Note: keypressed(), keyCode, mouseClicked();

掛上網頁！

• 下載 p5-practice.tgz, 解壓縮後打開 index.html 看看！

• 把前面練習的 code copy 過來～

• 讓它旋轉：rotate(radian)

  • 為什麼不 work!!!
  • "Objects are always rotated around their relative position to the origin…"

translate(x, y), push(), pop()

• translate(x, y): 把原點移至 (x, y)

• The push() function saves the current drawing style settings and transformations, while pop() restores these settings.

Flappy Bird 的背景

• 再來載入背景：

let bgImg = loadImage("assets/sprites/background-day.png");
let baseImg = loadImage("assets/sprites/base.png");
image(bgImg, x, y);
image(baseImg, x, y);

為什麼不 WORK!!!

Cross-Origin Resource Sharing (CORS)

• 基於安全性考量，程式碼所發出的跨來源 HTTP 請求會受到限制，因此，如 XMLHttpRequest 及 Fetch 都必須要遵守同源政策（same-origin policy）。

• 當網頁 (i.e. HTTP protocol) 試著存取電腦中的檔案 (i.e. FILE protocol) 時，會被視為是「跨來源」需求，而必須要有一個支援 CORS 的伺服器服務才行

SimpleHTTPServer

• ./run.sh // 開啟 server, default port: 80

• 打開瀏覽器 (為了避免開發時錯誤留下後遺症，建議開無痕)，鍵入 "localhost"

  • In case you mess up with port 80, just edit the file "server/py[23]_server.py" and change port 80 to others, like 8080.

• (hint) 圖太小/太大？

  • 設定 scale: e.g. width/img.width

讓背景可以橫向移動～

把 bird load 進來

• 總共有 9 個檔案 (e.g. bluebird-downflap.png)，如何能夠隨機選擇鳥的顏色，並且可以有飛行的動畫呢？
  • (hint) 使用 "template literal"，如："`\({color}bird-\){flap}.png`", where ${color} = ['red', 'blue', 'yellow'], and ${flap} = ['downflap', 'midflap', 'upflap']

讓 bird 可以揮動翅膀！！

模擬 bird 飛行

• 沒有按 space 時，bird 自由落體向下 (頭也會往下旋轉)
  • x 不變
  • vy += ay, y += vy
  • rotAngle += someValue;
• 當 space 被按下時，bird 要「抬頭」、「向上飛行」
  • rotAngle = -someValue;
  • vy = -someValue;

加入聲音

// Do this in preload()
var soundObj = loadSound(url);

// Do this on the event!
soundObj.play();

Modulize your code!

• In "draw()" –-
  • paint background
  • update "backgroud", "bird"
  • render image

That's it for the baseline requirements

加入柱子

• 亂數產生高度

• 跟背景一起橫向移動

判斷 bird 是否撞到柱子、天花板、地面

記錄 & 更新分數

其他

• Game over

• Restart game

• Any of YOUR IDEAS are very welcome!