天才小釣手（完整版） (2) | JavaScript 程式專案

{"id":434962,"student_id":10,"content":"setBackdrop('bg.png'); //設定背景圖\nlet boat = createSprite('p_0.png', 'p_1.png', 'p_2.png'); //火鍋船\nlet hook = createSprite('h_0.png', 'h_1.png', 'h_2.png', 'h_3.png', 'h_4.png', 'h_5.png', 'h_6.png', 'h_7.png', 'h_8.png'); //魚鉤\nlet board = createSprite('board.png'); //能量條框\nlet info = createSprite('info.png'); //遊戲說明\nlet vx = 0; //魚鉤的水平移動速度\nlet vy = 0; //魚鉤的垂直移動速度\nlet score = 0; //玩家得分\nvar power = 1200; //能量條\n\nlet fish = []; //存放海中角色的陣列\nlet scoreTable = [100, 100, 200, 300, 400, -200, -200, -200]; //角色分數對應表\nlet speedTable = [2, 2, 4, 6, 8, 3, 2, 3]; //角色速度對應表\n\ncreateSound('bgm.mp3'); // 播放背景音樂\nboat.rotationStyle = 'flipped';\nboat.moveTo(300, 300);\nhook.moveTo(400, 600);\nhook.costumeId = 8; // 設定為空鉤造型\ninfo.layer = 1;\n// info.hidden = true; //直接隱藏遊戲說明\n\n// 初始化海中的角色\nfor (let i = 0; i \u003c 15; i++) {\n    let f = createSprite('f_0.png', 'f_1.png', 'f_2.png', 'f_3.png', 'f_4.png', 'f_5.png', 'f_6.png', 'f_7.png'); //創造海中角色\n    f.x = Math.random() * 1800 - 300; //隨機水平位置\n    f.y = Math.random() * 500 + 400; //隨機垂直位置\n    f.costumeId = Math.floor(Math.random()*8);\n    f.rotationStyle = 'flipped'; //設定水平翻轉屬性\n    if (Math.random() \u003e 0.5) f.direction += 180; //隨機向左或向右\n    fish.push(f);\n}\n\n// 遊戲主迴圈\nfunction gameloop () {\n    if (info.hidden) { // 如果遊戲說明隱藏\n        updateHook(); //更新魚鉤\n        updateBoat(); //移動火鍋船\n        updatePower(); //更新能量條\n        hookTouchBoat(); //偵測魚鉤與船的碰撞\n        for (let i = 0; i \u003c fish.length; i++) {\n            updateFish(fish[i]);\n        } \n    }\n    if (key.space) info.hidden = true; //按下空白按鍵開始遊戲\n}\n\n// 更新移動魚鉤\nfunction updateHook () {\n    hook.x += vx; //改變水平位置\n    hook.y += vy; //改變垂直位置\n\n    if (hook.x \u003c 0 \u0026\u0026 vx \u003c 0) vx = -vx; //碰到左邊邊界反彈\n    if (hook.x \u003e 1200 \u0026\u0026 vx \u003e 0) vx = -vx; //碰到右邊邊界反彈\n    if (hook.y \u003c 0 \u0026\u0026 vy \u003c 0) vy = -vy; //碰到上面邊界反彈\n    if (hook.y \u003e 900 \u0026\u0026 vy \u003e 0) vy = -vy; //碰到下面邊界反彈\n\n    if (key.right) vx += 0.2; //按下右鍵向右加速\n    if (key.left) vx -= 0.2;  //按下左鍵向左加速\n    if (key.up \u0026\u0026 hook.y \u003e 400) vy = -10;  //按下上鍵且沒有超出海面\n    if (key.down) vy += 0.2; //按下下鍵向下加速\n    if (hook.y \u003c 300) vy += 0.2; \n    \n    vy += hook.y \u003c 300 ? 0.1 : -0.02; //水面之上就下墜水面之下就上飄\n    vx += boat.x \u003e hook.x ? 0.02: -0.02; //魚鉤飄向船的位置\n    \n    vx *= 0.99; //速度衰減\n    vy *= 0.99; //速度衰減\n}\n\n//更新海中角色\nfunction updateFish (f) {\n    \n    let speed = speedTable[f.costumeId];\n    f.stepForward(speed);\n    \n    // 碰到邊界轉向\n    if (f.x \u003c -600 || f.x \u003e 1800) {\n        f.direction += 180;\n        f.hidden = false;\n        f.y = Math.random() * 500 + 400;\n        f.stepForward(Math.random() * 150);\n        f.costumeId = Math.floor(Math.random()*8);\n    }\n\n    if (vy \u003c -4 \u0026\u0026 hook.costumeId == 8 \u0026\u0026 hook.touched(f)) {\n        hook.costumeId = f.costumeId;\n        f.hidden = true;\n    }\n}\n\n// 偵測魚鉤是否碰撞到船\nfunction hookTouchBoat () {\n    // 魚鉤碰到船而且魚鉤上有東西而且速度向下放\n    if (hook.touched(boat) \u0026\u0026 hook.costumeId != 8 \u0026\u0026 vy \u003e 0) {\n        score += scoreTable[hook.costumeId];\n        power += scoreTable[hook.costumeId];\n        hook.costumeId = 8;\n    }\n    \n    // 魚鉤在海中而且向下放\n    if (hook.y \u003e 300 \u0026\u0026 vy \u003e 0) {\n        hook.costumeId = 8; //恢復魚鉤造型放下正在掛著的魚\n    }\n}\n\n// 更新能量條\nfunction updatePower () {\n    power -= 0.75; //能量不斷減少\n    drawText('score: ' + score, 20, 60, 'black', 40); //顯示分數\n    pen.fillColor = 'red'; //畫筆設定為紅色\n    pen.drawRect(0, 0, power, 50); //繪製紅色能量條\n    if (power \u003e 1200) power = 1200; //限制能量條上限 1200\n    if (power \u003c 0) boat.costumeId = 2; // 如果能量條用完火鍋蓋上蓋子\n}\n\n//更新火鍋船\nfunction updateBoat () {\n    \n    // 如果火鍋蓋住蓋子\n    if (boat.costumeId == 2) {\n        boat.y += 3; //向下沈\n        hook.hidden = true; //隱藏鉤子\n    } else {\n        boat.stepForward(2); //向前移動\n        boat.costumeId = Math.floor((boat.x + 2) / 50) % 2; //來回切換造型\n        pen.color = 'black';\n        pen.drawLine(boat.x, boat.y - 150, hook.x, hook.y);\n    }\n    \n    // 船碰到左右邊界就反轉方向\n    if (boat.x \u003c 100 || boat.x \u003e 1100) boat.direction += 180;\n    \n    // 如果船沈到底，根據分數顯示完成度\n    if (boat.y \u003e 1300) {\n        if (score \u003c 0) createSprite('r_0.png');\n        else if (score \u003c 1000) createSprite('r_1.png');\n        else if (score \u003c 2000) createSprite('r_2.png');\n        else if (score \u003c 3000) createSprite('r_3.png');\n        else if (score \u003c 4000) createSprite('r_4.png');\n        else createSprite('r_5.png');\n        stop(); //停止遊戲\n    }\n}\n\nforever(gameloop) //不斷執行遊戲迴圈\n\n","created_at":"2022-09-15T10:24:31.786+08:00","updated_at":"2022-09-15T11:13:01.180+08:00","name":"天才小釣手（完整版） (2)","language":"javascript","screenshot":{"url":"https://cdn1.koding.school/uploads/project/screenshot/434962/15fc570a7dedc41bc037895d47960096.jpg"},"parent_id":2,"plugin":"Game.set({width: 1200, height: 900})","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":127,"hashid":"5j3s38gre","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}