## Homework02: Flappy Bird in p5.js Due: 9pm, Tuesday, 03/19 --- ### Introducing [p5.js](https://p5js.org/)  ---- ### 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](https://github.com/ric2k1/ric2k1.github.io/blob/master/W4_0313/p5-practice.tgz), 解壓縮後打開 index.html 看看！ * 把前面練習的 code copy 過來～ * 讓它旋轉：**rotate(radian)** * 為什麼不 work!!!!!!! * <em>"Objects are always rotated around their relative position to the origin..."</em> ---- ### 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. --- ### Start the Flappy Bird Project!! * 下載 flappy-bird-boilerplate [link](https://github.com/ric2k1/ric2k1.github.io/blob/master/W4_0313/flappy-bird-boilerplate.tgz) * 先進行設定： * **preload()**: <em>"Called directly before setup(), the preload() function is used to handle asynchronous loading of external files in a blocking way... Nothing besides load calls (loadImage, loadJSON, loadFont, loadStrings, etc.) should be inside the preload function. "</em> * **loadImage(url[, callback])**: 把圖檔載入到 p5 的變數 * **image(img, x, y[, w, h])**: 把 img 畫到指定的地方 ---- ### Flappy Bird 的背景 * 再來載入背景： ```javascript 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; ---- ### 加入聲音 ```javascript // 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 --- ### Let's create the game! ---- ### 加入柱子 * 亂數產生高度 * 跟背景一起橫向移動 ---- ### 判斷 bird 是否撞到柱子、天花板、地面 ---- ### 記錄 & 更新分數 ---- ### 其他 * Game over * Restart game * Any of YOUR IDEAS are very welcome! --- ### That's it! Enjoy the game~