JS 獺獺大戰 | JavaScript 程式專案

{"id":616107,"student_id":3760,"content":"// 初始化需要的音樂、背景與角色\ncreateSound('bgm.mp3');                              // 背景音樂\nsetBackdrop(\"bg.jpg\");                               // 遊戲背景\ncreateSprite(\"board.png\");                           // 血量表\nlet p1 = createSprite(\n    \"otter_0.png\", \"otter_1.png\", \n    \"otter_2.png\", \"otter_3.png\", \"otter_4.png\");    // 左邊玩家角色\nlet p2 = createSprite(\n    \"koding_0.png\", \"koding_1.png\", \n    \"koding_2.png\", \"koding_3.png\", \"koding_4.png\"); // 右邊玩家角色\nlet weapon = createSprite(\"twig.png\", \"shell.png\");  // 武器角色\nlet hint = createSprite(\"tutorial.jpg\");             // 遊戲提示角色\n\n// 初始化需要的變數\nlet p1_hp = 400;    // 左邊玩家血量值\nlet p2_hp = 400;    // 右邊玩家血量值\nlet p1_power = 0;   // 左邊玩家蓄力值\nlet p2_power = 0;   // 右邊玩家蓄力值\nlet vx = 0;         // 武器水平移動速度值\nlet vy = 0;         // 武器垂直移動速度值\nlet wind = 0;       // 風速值\nlet gameStatus = 0; // 遊戲狀態，初始狀態為 0\n\n/*【學習】gameStatus 遊戲狀態表\n\n| gameStatus 遊戲狀態 |       意義       |\n| ------------------- | ---------------- |\n|         0           |   遊戲尚未開始   |\n| ------------------- | ---------------- |\n|         1           |   左邊玩家待命   |\n|         2           |   左邊玩家蓄力   |\n|         3           |   左邊玩家投出   |\n| ------------------- | ---------------- |\n|         4           |   右邊玩家待命   |\n|         5           |   右邊玩家蓄力   |\n|         6           |   右邊玩家投出   |\n| ------------------- | ---------------- |\n\n*/\n\n// 初始化左邊玩家的位置\np1.x = 200;\np1.y = 700;\n// 初始化右邊邊玩家的位置\np2.x = 1000;\np2.y = 700;\n\n// 遊戲一開始先移動武器到左邊玩家位置\nweapon.x = p1.x;\nweapon.y = p1.y;\n// 隱藏武器\nweapon.hidden = true;\n// 顯示遊戲提示\nhint.hidden = false;\n\n// 【學習】按下滑鼠時執行 mousedown 函式\non(\"mousedown\", mouseDown); \n// 【學習】放開滑鼠時執行 mouseup 函式\non(\"mouseup\", mouseUp);\n\n// 【學習】按下滑鼠後要執行的事項\nfunction mouseDown () {\n    // 【學習】如果遊戲狀態為「左邊玩家待命」\n    if (gameStatus === 1) {\n        // 【學習】設定遊戲狀態為「左邊玩家蓄力」\n        gameStatus = 2;\n    }\n    // 如果遊戲狀態為「右邊玩家待命」\n    if (gameStatus === 4) {\n        // 設定遊戲狀態為「右邊玩家蓄力」\n        gameStatus = 5;\n    }\n}\n\n// 【學習】放開滑鼠後要執行的事項\nfunction mouseUp () {\n    // 【學習】如果遊戲狀態為「左邊玩家蓄力」\n    if (gameStatus === 2) {\n        // 【學習】設定遊戲狀態為「左邊玩家投出」\n        gameStatus = 3;\n        \n        // 設定目前武器垂直移動速度值為左邊玩家蓄力值*-1\n        vy = -p1_power;\n        // 設定目前武器水平移動速度值為左邊玩家蓄力值\n        vx = p1_power;\n        // 隱藏武器\n        weapon.hidden = false;\n        // 播放投擲音效\n        createSound('throw.wav');\n    }\n    \n    // 如果遊戲狀態為「右邊玩家蓄力」\n    if (gameStatus === 5) {\n        // 設定遊戲狀態為「右邊玩家投出」\n        gameStatus = 6;\n        // 設定目前武器垂直移動速度值為右邊玩家蓄力值*-1\n        vy = -p2_power;\n        // 設定目前武器水平移動速度值為左邊玩家蓄力值*-1\n        vx = -p2_power;\n        // 隱藏武器\n        weapon.hidden = false;\n        // 播放投擲音效\n        createSound('throw.wav');\n    }\n}\n\n// 【學習】執行遊戲各動作功能的主迴圈函式\nfunction loop () {\n    // 【學習】如果遊戲狀態為「遊戲尚未開始」\n    if (gameStatus === 0) {\n        // 顯示遊戲開始提示\n        drawText(\"按下空白鍵開始遊戲\", 277, 755, \"grey\", 70);\n        drawText(\"按下空白鍵開始遊戲\", 275, 753, \"black\", 70);\n        \n        // 【學習】如果鍵盤空白鍵被按下\n        if (key.space) {\n            // 【學習】設定遊戲狀態為「左邊玩家待命」\n            gameStatus = 1;\n            \n            // 隱藏遊戲提示角色\n            hint.hidden = true;\n        }\n    }\n    \n    // 【學習】如果遊戲狀態為「左邊玩家蓄力」\n    if (gameStatus === 2) {\n        // 【學習】設定左邊玩家的造型至準備投擲造型\n        p1.costumeId = 1;\n    }\n    // 【學習】如果遊戲狀態為「左邊玩家蓄力」，而且左邊玩家蓄力值小於 40\n    if (gameStatus === 2 \u0026\u0026 p1_power \u003c 40) {\n        // 增加 1 至左邊玩家蓄力值\n        p1_power += 1;\n    }\n    \n    // 【學習】如果遊戲狀態為「左邊玩家投出」\n    if (gameStatus === 3) {\n        // 【學習】設定左邊玩家的造型至投出造型\n        p1.costumeId = 2;\n    }\n    \n    // 如果遊戲狀態為「右邊玩家蓄力」\n    if (gameStatus === 5) {\n        // 設定右邊玩家的造型至準備投擲造型\n        p2.costumeId = 1;\n    }\n    // 如果遊戲狀態為「右邊玩家蓄力」，而且右邊玩家蓄力值小於 40\n    if (gameStatus === 5 \u0026\u0026 p2_power \u003c 40) {\n        // 增加 1 至右邊玩家蓄力值\n        p2_power += 1;\n    }\n    // 如果遊戲狀態為「右邊玩家投出」\n    if (gameStatus === 6) {\n        // 設定右邊玩家的造型至投出造型\n        p2.costumeId = 2;\n    }\n    \n\n    // 【學習】如果遊戲狀態為「左邊玩家投出」或「右邊玩家投出」\n    if (gameStatus === 3 || gameStatus === 6) {\n        // 增加 1 至武器垂直移動速度值\n        vy += 1;\n        // 以 vx、wind、vy 更新武器的 x 與 y 值\n        weapon.x += vx + wind;\n        weapon.y += vy;\n    }\n    \n    // 如果武器位置超出遊戲畫面下方則重新設定武器狀態\n    if (weapon.y \u003e 1500) reset();\n\n    // 【學習】如果遊戲狀態為「左邊玩家投出」，而且武器碰到右邊玩家\n    if (gameStatus === 3 \u0026\u0026 weapon.touched(p2)) {\n        // 【學習】設定右邊玩家的造型至被打中造型\n        p2.costumeId = 3;\n        \n        // 減少 100 右邊玩家血量值\n        p2_hp -= 100;\n        // 隱藏武器\n        weapon.hidden = true;\n        // 播放被打中音效\n        createSound('hit.wav');\n    }\n    // 如果遊戲狀態為「右邊玩家投出」，而且武器碰到左邊玩家\n    if (gameStatus === 6 \u0026\u0026 weapon.touched(p1)) {\n        // 設定左邊玩家的造型至被打中造型\n        p1.costumeId = 3;\n        // 減少 100 左邊玩家血量值\n        p1_hp -= 100;\n        // 隱藏武器\n        weapon.hidden = true;\n        // 播放被打中音效\n        createSound('hit.wav');\n    }\n}\n\n// 重新設定武器的函式\nfunction reset () {\n    // 歸零左邊玩家蓄力值\n    p1_power = 0;\n    // 設定左邊玩家的造型至站立造型\n    p1.costumeId = 0;\n    // 如果遊戲狀態為「左邊玩家投出」\n    if (gameStatus === 3) {\n        // 設定遊戲狀態為「右邊玩家待命」\n        gameStatus = 4;\n        // 移動武器到右邊玩家位置\n        weapon.x = p2.x;\n        weapon.y = p2.y;\n        // 設定武器的造型至貝殼造型\n        weapon.costumeId = 1;\n    }\n    \n    // 歸零右邊玩家蓄力值\n    p2_power = 0;\n    // 設定右邊玩家的造型至站立造型\n    p2.costumeId = 0;\n    // 如果遊戲狀態為「右邊玩家投出」\n    if (gameStatus === 6) {\n        // 設定遊戲狀態為「左邊玩家待命」\n        gameStatus = 1;\n        // 移動武器到左邊玩家位置\n        weapon.x = p1.x;\n        weapon.y = p1.y;\n        // 設定武器的造型至樹枝造型\n        weapon.costumeId = 0;\n    }\n    \n    // 隱藏武器\n    weapon.hidden = true;\n    // 設定風速值至一隨機值\n    wind = Math.random()*20 - 10;\n}\n\n// 【學習】檢查遊戲是否結束的函式\nfunction checkGameOver () {\n    // 【學習】如果左邊玩家血量值小於等於 0\n    if (p1_hp \u003c= 0) {\n        // 顯示「Koding 獲勝！」字樣\n        drawText(\"Koding 獲勝！\", 350, 400, \"white\", 100);\n        // 【學習】設定右邊玩家的造型至勝利造型\n        p2.costumeId = 4;\n        \n        // 停止遊戲\n        stop();\n    }\n    // 如果右邊玩家血量值小於等於 0\n    if (p2_hp \u003c= 0) {\n        // 顯示「Otter 獲勝！！」字樣\n        drawText(\"Otter 獲勝！\", 350, 400, \"white\", 100);\n        // 設定左邊玩家的造型至勝利造型\n        p1.costumeId = 4;\n        // 停止遊戲\n        stop();\n    }\n}\n\n// 【學習】繪製血量與力量的函式\nfunction drawBars() {\n    // 繪製左右邊玩家血量條\n    pen.fillColor = \"red\";\n    pen.drawRect(500, 40, -p1_hp, 20);\n    pen.drawRect(700, 40, +p2_hp, 20);\n    // 繪製風速值\n    pen.fillColor = \"blue\";\n    pen.drawRect(580 + wind * 10, 120, 40, 20);\n    \n    // 【學習】如果遊戲狀態為「左邊玩家待命」或「左邊玩家蓄力」\n    if (gameStatus === 1 || gameStatus === 2) {\n        // 繪製出左邊玩家的蓄力槽\n        pen.fillColor = \"white\";\n        pen.drawRect(50, 600, 40, 200);\n        // 依照目前左邊玩家蓄力值繪製出左邊玩家的蓄力條\n        pen.fillColor = \"red\";\n        pen.drawRect(50, 800, 40, -p1_power * 5);\n    }\n    // 如果遊戲狀態為「右邊玩家待命」或「右邊玩家蓄力」\n    if (gameStatus === 4 || gameStatus === 5) {\n        // 繪製出右邊玩家的蓄力槽\n        pen.fillColor = \"white\";\n        pen.drawRect(1110, 600, 40, 200);\n        // 依照目前右邊玩家蓄力值繪製出右邊玩家的蓄力條\n        pen.fillColor = \"red\";\n        pen.drawRect(1110, 800, 40, -p2_power * 5);\n    }\n}\n\n// 使用 forever() 重複不斷執行遊戲各動作的功能\nforever(function(){\n    // 執行 loop 函式。\n    loop();\n    // 執行 checkGameOver 函式。\n    checkGameOver();\n    // 執行 drawBars 函式。\n    drawBars();\n});","created_at":"2023-09-23T20:22:57.961+08:00","updated_at":"2023-11-29T17:16:31.401+08:00","name":"JS 獺獺大戰","language":"javascript","screenshot":{"url":"https://cdn4.koding.school/uploads/project/screenshot/616107/1095267f2b98db3cd9cd605eac9c56f9.jpg"},"parent_id":208678,"plugin":"Game.set({width: 1200, height: 900});","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":17,"hashid":"4y3skk5g2","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}

[{"id":13860025,"file_name":"bgm.mp3","project_id":616107,"asset_id":289605,"created_at":"2023-09-23T20:22:57.967+08:00","updated_at":"2023-09-23T20:22:57.967+08:00"},{"id":13860026,"file_name":"board.png","project_id":616107,"asset_id":289606,"created_at":"2023-09-23T20:22:57.969+08:00","updated_at":"2023-09-23T20:22:57.969+08:00"},{"id":13860027,"file_name":"throw.wav","project_id":616107,"asset_id":289607,"created_at":"2023-09-23T20:22:57.970+08:00","updated_at":"2023-09-23T20:22:57.970+08:00"},{"id":13860028,"file_name":"twig.png","project_id":616107,"asset_id":289608,"created_at":"2023-09-23T20:22:57.971+08:00","updated_at":"2023-09-23T20:22:57.971+08:00"},{"id":13860029,"file_name":"otter_4.png","project_id":616107,"asset_id":289609,"created_at":"2023-09-23T20:22:57.972+08:00","updated_at":"2023-09-23T20:22:57.972+08:00"},{"id":13860030,"file_name":"otter_3.png","project_id":616107,"asset_id":289610,"created_at":"2023-09-23T20:22:57.973+08:00","updated_at":"2023-09-23T20:22:57.973+08:00"},{"id":13860031,"file_name":"otter_2.png","project_id":616107,"asset_id":289611,"created_at":"2023-09-23T20:22:57.974+08:00","updated_at":"2023-09-23T20:22:57.974+08:00"},{"id":13860032,"file_name":"otter_1.png","project_id":616107,"asset_id":289612,"created_at":"2023-09-23T20:22:57.975+08:00","updated_at":"2023-09-23T20:22:57.975+08:00"},{"id":13860033,"file_name":"otter_0.png","project_id":616107,"asset_id":289613,"created_at":"2023-09-23T20:22:57.976+08:00","updated_at":"2023-09-23T20:22:57.976+08:00"},{"id":13860034,"file_name":"koding_4.png","project_id":616107,"asset_id":289614,"created_at":"2023-09-23T20:22:57.977+08:00","updated_at":"2023-09-23T20:22:57.977+08:00"},{"id":13860035,"file_name":"koding_3.png","project_id":616107,"asset_id":289615,"created_at":"2023-09-23T20:22:57.978+08:00","updated_at":"2023-09-23T20:22:57.978+08:00"},{"id":13860036,"file_name":"koding_2.png","project_id":616107,"asset_id":289616,"created_at":"2023-09-23T20:22:57.979+08:00","updated_at":"2023-09-23T20:22:57.979+08:00"},{"id":13860037,"file_name":"koding_1.png","project_id":616107,"asset_id":289617,"created_at":"2023-09-23T20:22:57.979+08:00","updated_at":"2023-09-23T20:22:57.979+08:00"},{"id":13860038,"file_name":"koding_0.png","project_id":616107,"asset_id":289618,"created_at":"2023-09-23T20:22:57.980+08:00","updated_at":"2023-09-23T20:22:57.980+08:00"},{"id":13860039,"file_name":"hit.wav","project_id":616107,"asset_id":289619,"created_at":"2023-09-23T20:22:57.981+08:00","updated_at":"2023-09-23T20:22:57.981+08:00"},{"id":13860041,"file_name":"shell.png","project_id":616107,"asset_id":289621,"created_at":"2023-09-23T20:22:57.983+08:00","updated_at":"2023-09-23T20:22:57.983+08:00"},{"id":13860042,"file_name":"pk.png","project_id":616107,"asset_id":289622,"created_at":"2023-09-23T20:22:57.984+08:00","updated_at":"2023-09-23T20:22:57.984+08:00"},{"id":13860043,"file_name":"bg.jpg","project_id":616107,"asset_id":289623,"created_at":"2023-09-23T20:22:57.987+08:00","updated_at":"2023-09-23T20:22:57.987+08:00"},{"id":14502086,"file_name":"tutorial.jpg","project_id":616107,"asset_id":699586,"created_at":"2023-11-20T17:20:39.799+08:00","updated_at":"2023-11-20T17:20:39.799+08:00"}]