JS 啤酒推推樂 | JavaScript 程式專案

{"id":616110,"student_id":3760,"content":"// 初始化需要的背景、音樂、角色\nsound.play(\"bgm.mp3\");                         // 背景音樂（看看不同做法）\nsetBackdrop(\"bar.png\");                        // 背景圖\nlet table_red = createSprite(\"table_red.png\"); // 右邊桌子\nlet table_1 = createSprite(\"table_1.png\");     // 第一張桌子（左上）\nlet table_2 = createSprite(\"table_2.png\");     // 第二張桌子\nlet table_3 = createSprite(\"table_3.png\");     // 第三張桌子\nlet table_4 = createSprite(\"table_4.png\");     // 第四張桌子（左下）\n\n/*\n    第一排客人要在 table_1 後面，第二排客人要在 table_2 後面......\n    因此需要編排圖層，4 張桌子跟 4 排客人加起來有8層。\n*/\n\n// 初始化桌子圖層\ntable_1.layer = 7;\ntable_2.layer = 5;\ntable_3.layer = 3;\ntable_4.layer = 1;\n\n// 初始化需要的變數\nlet clock = 0;          // 計時器\nlet score = 0;          // 玩家得分\nlet level = 1;          // 遊戲關卡\nlet speed = 0.5;        // 客人移動速度\nlet interval = 200;     // 來客間隔\nlet customers = [];     // 客人陣列，用來存放當下的客人\nlet beerMugs = [];      // 啤酒陣列，用來存放當下的啤酒\nlet backCustomers = []; // 後退客人陣列，用來存放當下拿到啤酒的客人\n\n// 初始化酒保叩叮\nlet koding = createSprite(\n    \"koding.png\", \n    \"kodingWithBeer.png\", \n    \"kodingUpset.png\");\nkoding.x = 1000;\nkoding.y = 175;\n\n\n// 控制酒保叩叮往下一桌走的函式\nfunction kodingGoDown(){\n    if (koding.y \u003c 700) {\n        koding.y += 175;\n    }\n}\n\n// 控制酒保叩叮往上一桌走的函式\nfunction kodingGoUp(){\n    if (koding.y \u003e 175) {\n        koding.y -= 175;\n    }\n}\n\n//按上、下鍵操控酒保叩叮移動\non(\"keydown\", \"down\", kodingGoDown);\non(\"keydown\", \"up\", kodingGoUp);\n\n\n// 切換酒保叩叮拿啤酒造型的函式\nfunction kodingGetBeer(){\n    koding.costumeId = 1;\n}\n\n// 切換酒保叩叮推出啤酒的函式\nfunction kodingSendBeer(){\n    koding.costumeId = 0;\n    // 於酒保叩叮的 y 位置，創造出一杯新的啤酒。\n    createBeer(koding.y);\n}\n\n// 按下空白鍵時，酒保叩叮拿著啤酒\non(\"keydown\", \"space\", kodingGetBeer);\n// 放開空白鍵時，酒保叩叮推出啤酒\non(\"keyup\", \"space\", kodingSendBeer);\n\n\n// 產生啤酒的函式\nfunction createBeer(yLocation) {\n    // 創造出啤酒角色\n    let beer = createSprite(\"beer.png\", \"broken.png\");\n    // 設定啤酒角色的初始位置\n    beer.x = 900;\n    beer.y = yLocation + 20;\n    // 把啤酒角色的圖層設定至最上層\n    beer.layer = 10;\n    // 【學習】將目前啤酒角色放入啤酒陣列中\n    beerMugs.push(beer);\n\n    // 偵測目前的啤酒角色有無碰到任何一個顧客\n    beer.on(\"touch\", customers, function(target) {\n        // 將碰觸到的顧客造型修改成拿到啤酒的造型\n        target.costumeId = 1;\n        // 【學習】將拿到啤酒的客人放入後退客人陣列中\n        backCustomers.push(target);\n        // 將玩家得分加分\n        score += 1;\n        // 隱藏目前的啤酒\n        beer.hidden = true;\n        // 【學習】摧毀目前的啤酒\n        beer.destroy();\n    });\n}\n\n// 讓畫面中所有啤酒向左移動的函式\nfunction moveBeerMugs() {\n    // 【學習】直到 i 等於啤酒陣列的長度前，都要不斷執行的 for 迴圈\n    for (let i = 0; i \u003c beerMugs.length; i++) {\n        // 如果啤酒陣列中的第 i 項為有顯示出來\n        if (beerMugs[i].hidden === false){\n            // 【學習】透過更新啤酒陣列中第 i 項的 x，達成移動的效果\n            beerMugs[i].x -= 2 * speed;\n        }\n    }\n}\n\n// 根據來客間隔，在隨機位置創造客人的函式\nfunction createCustomer() {\n    // 若計時器為來客間隔的倍數\n    if (clock % interval === 0) {\n        // 創造客人角色\n        let customer = createSprite(\n            \"customer.png\", \n            \"customerWithBeer.png\", \n            \"customerAngry.png\");\n        // 隨機產生出 1~4 之間的整數數字，用來做為 table 的編號\n        table = Math.ceil(Math.random()*4);\n        // 初始化客人的 x 位置\n        customer.x = 200;\n        // 初始化客人的 y 位置（有可能為 175、350、525、700）\n        customer.y = 175 * table;\n        // 設定客人的圖層，客人要在桌子後面，所以客人的圖層編號 0, 2, 4, 6\n        customer.layer = 2 * (table-1);\n        // 【學習】將目前客人放入客人陣列\n        customers.push(customer);\n    }\n}\nconsole.log();\n\n// 讓畫面中所有客人向右移動的函式\nfunction moveCustomers() {\n    // 【學習】直到 i 等於客人陣列的長度前，都要不斷執行的 for 迴圈\n    for (let i = 0; i \u003c customers.length; i++) {\n        // 【學習】透過更新客人陣列中第 i 項的 x，達成移動的效果\n        customers[i].x += speed;\n    }\n    // 【學習】直到 i 等於後退客人陣列的長度前，都要不斷執行的 for 迴圈\n    for (let i = 0; i \u003c backCustomers.length; i++) {\n        // 【學習】透過後退更新客人陣列中第 i 項的 x，達成移動的效果\n        backCustomers[i].x -= 3 * speed;\n        // 如果後退客人陣列中第 i 項的 x 小於 200（我們自己定義的遊戲左邊界）\n        if (backCustomers[i].x \u003c 200) {\n            // 【學習】將後退客人陣列中第 i 項摧毀\n            backCustomers[i].destroy();\n        }\n    }\n}\n\n// 判斷遊戲是否結束的函式\nfunction checkGameOver() {\n    // 直到 i 等於啤酒陣列的長度前，都要不斷執行的 for 迴圈\n    for (let i = 0; i \u003c beerMugs.length; i++) {\n        // 如果啤酒陣列中第 i 項的 x 小於 100（我們自己定義的桌子左邊界）\n        if (beerMugs[i].x \u003c 100) {\n            // 停止遊戲\n            stop();\n            // 將啤酒陣列中第 i 項的造型設定為破裂造型\n            beerMugs[i].costumeId = 1;\n            // 播放瓶子破掉的音效\n            sound.play(\"bottleBreak.wav\");\n            // 執行 gameover 函式\n            gameOver();\n        }\n    }\n    // 直到 i 等於客人陣列的長度前，都要不斷執行的 for 迴圈\n    for(let i = 0; i \u003c customers.length; i++){\n        // 如果客人陣列中第 i 項的 x 大於 850（我們自己定義的桌子右邊界）\n        if (customers[i].x \u003e 850) {\n            // 停止遊戲\n            stop();\n            // 將客人陣列中第 i 項的造型設定為生氣造型\n            customers[i].costumeId = 2;\n            // 播放生氣的音效\n            sound.play(\"angry.mp3\");\n            // 執行 gameover 函式\n            gameOver();\n        }\n    }\n}\n\n// 處理遊戲結束後須執行事項的函式\nfunction gameOver() {\n    // 切換酒保叩叮至崩潰造型\n    koding.costumeId = 2;\n    // 顯示 GAME OVER 字樣\n    drawText(\"GAME OVER\", 300, 450, 'white', 100);\n}\n\n\n// 使用 forever() 重複不斷執行遊戲各動作的功能\nforever(function() {\n    // 創造客人\n    createCustomer();\n    // 移動所有出現的客人\n    moveCustomers();\n    // 移動所有出現的啤酒\n    moveBeerMugs();\n    // 檢查是否已經遊戲結束\n    checkGameOver();\n    \n    // 顯示遊戲中需展示的資訊\n    drawText(\"Score:\", 900, 50, 'white', 50);\n    drawText(score, 1080, 50, 'white', 50);\n    drawText(\"Level:\", 50, 50, 'white', 50);\n    drawText(level, 200, 50, 'white', 50);\n    drawText(\"Interval:\", 400, 50, 'white', 50);\n    drawText(interval, 600, 50, 'white', 50);\n    \n    // 增加計時器數值\n    clock += 1;\n    // 如果計時器數值為 500 的倍數\n    if (clock % 500 === 0) {\n        // 客人移動速度增加\n        speed += 0.2;\n        // 遊戲關卡提升\n        level += 1;\n        // 如果來客間隔大於 20\n        if (interval \u003e 20) {\n            // 則來客間隔減少 30\n            interval -= 30;\n        }\n    }\n});","created_at":"2023-09-23T20:23:30.552+08:00","updated_at":"2023-11-29T17:18:42.088+08:00","name":"JS 啤酒推推樂","language":"javascript","screenshot":{"url":"https://cdn7.koding.school/uploads/project/screenshot/616110/18e8a26c03e2bc111b8616a27a8fddc5.jpg"},"parent_id":169140,"plugin":"Game.set({width: 1200, height: 900})","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":20,"hashid":"9ygs558pe","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}

[{"id":13860075,"file_name":"bgm.mp3","project_id":616110,"asset_id":241195,"created_at":"2023-09-23T20:23:30.559+08:00","updated_at":"2023-09-23T20:23:30.559+08:00"},{"id":13860076,"file_name":"broken.png","project_id":616110,"asset_id":243284,"created_at":"2023-09-23T20:23:30.560+08:00","updated_at":"2023-09-23T20:23:30.560+08:00"},{"id":13860077,"file_name":"customer.png","project_id":616110,"asset_id":243285,"created_at":"2023-09-23T20:23:30.561+08:00","updated_at":"2023-09-23T20:23:30.561+08:00"},{"id":13860078,"file_name":"koding.png","project_id":616110,"asset_id":243288,"created_at":"2023-09-23T20:23:30.562+08:00","updated_at":"2023-09-23T20:23:30.562+08:00"},{"id":13860079,"file_name":"bar.png","project_id":616110,"asset_id":243282,"created_at":"2023-09-23T20:23:30.563+08:00","updated_at":"2023-09-23T20:23:30.563+08:00"},{"id":13860080,"file_name":"beer.png","project_id":616110,"asset_id":243283,"created_at":"2023-09-23T20:23:30.564+08:00","updated_at":"2023-09-23T20:23:30.564+08:00"},{"id":13860081,"file_name":"table_1.png","project_id":616110,"asset_id":243291,"created_at":"2023-09-23T20:23:30.565+08:00","updated_at":"2023-09-23T20:23:30.565+08:00"},{"id":13860082,"file_name":"kodingWithBeer.png","project_id":616110,"asset_id":243290,"created_at":"2023-09-23T20:23:30.566+08:00","updated_at":"2023-09-23T20:23:30.566+08:00"},{"id":13860083,"file_name":"customerAngry.png","project_id":616110,"asset_id":243286,"created_at":"2023-09-23T20:23:30.567+08:00","updated_at":"2023-09-23T20:23:30.567+08:00"},{"id":13860084,"file_name":"bottleBreak.wav","project_id":616110,"asset_id":243367,"created_at":"2023-09-23T20:23:30.568+08:00","updated_at":"2023-09-23T20:23:30.568+08:00"},{"id":13860085,"file_name":"table_2.png","project_id":616110,"asset_id":243292,"created_at":"2023-09-23T20:23:30.569+08:00","updated_at":"2023-09-23T20:23:30.569+08:00"},{"id":13860086,"file_name":"table_3.png","project_id":616110,"asset_id":243293,"created_at":"2023-09-23T20:23:30.570+08:00","updated_at":"2023-09-23T20:23:30.570+08:00"},{"id":13860087,"file_name":"table_4.png","project_id":616110,"asset_id":243294,"created_at":"2023-09-23T20:23:30.571+08:00","updated_at":"2023-09-23T20:23:30.571+08:00"},{"id":13860088,"file_name":"table_red.png","project_id":616110,"asset_id":243295,"created_at":"2023-09-23T20:23:30.572+08:00","updated_at":"2023-09-23T20:23:30.572+08:00"},{"id":13860089,"file_name":"angry.mp3","project_id":616110,"asset_id":243368,"created_at":"2023-09-23T20:23:30.573+08:00","updated_at":"2023-09-23T20:23:30.573+08:00"},{"id":13860090,"file_name":"kodingUpset.png","project_id":616110,"asset_id":243289,"created_at":"2023-09-23T20:23:30.574+08:00","updated_at":"2023-09-23T20:23:30.574+08:00"},{"id":13860091,"file_name":"customerWithBeer.png","project_id":616110,"asset_id":243287,"created_at":"2023-09-23T20:23:30.575+08:00","updated_at":"2023-09-23T20:23:30.575+08:00"}]