【綜合練習】手指百米衝刺大賽：實作 3 - 解答 | 程式專案

{"id":576174,"student_id":2589,"content":"{\"html\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml\u003e\\n\u003chead\u003e\\n\\t\u003ctitle\u003eDocument\u003c/title\u003e\\n\\t\u003cscript src=\\\"https://code.jquery.com/jquery-3.4.1.min.js\\\"\u003e\u003c/script\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n    \u003cdiv id=\\\"progress_bar\\\"\u003e\\n        \u003cdiv\u003e\u003c/div\u003e\\n    \u003c/div\u003e\\n    \u003cimg id=\\\"img_wait\\\" src=\\\"./wait.png\\\"/\u003e\\n    \u003cimg id=\\\"img_left\\\" src=\\\"./left.png\\\" class=\\\"hide\\\"/\u003e\\n    \u003cimg id=\\\"img_right\\\" src=\\\"./right.png\\\" class=\\\"hide\\\"/\u003e\\n    \u003cimg id=\\\"img_gameover\\\" src=\\\"./gameover.png\\\" class=\\\"hide\\\"/\u003e\\n    \u003cdiv id=\\\"text\\\"\u003e\\n        \u003cdiv id=\\\"steps\\\"\u003e0m\u003c/div\u003e\\n        \u003cdiv id=\\\"result\\\"\u003e\u003c/div\u003e\\n    \u003c/div\u003e\\n    \u003cbutton id=\\\"btn_left\\\"\u003eLeft\u003c/button\u003e\\n    \u003cbutton id=\\\"btn_right\\\" class=\\\"active\\\"\u003eRight\u003c/button\u003e\\n    \\n    \u003ctable class=\\\"hide\\\"\u003e\\n        \u003cthead\u003e\\n            \u003ctr\u003e\\n                \u003cth\u003eRank\u003c/th\u003e\\n                \u003cth\u003eName\u003c/th\u003e\\n                \u003cth\u003eTime\u003c/th\u003e\\n            \u003c/tr\u003e\\n        \u003c/thead\u003e\\n        \u003ctbody\u003e\\n            \u003ctr\u003e\\n                \u003ctd\u003e1\u003c/td\u003e\\n                \u003ctd\u003e子嘉\u003c/td\u003e\\n                \u003ctd\u003e11.912 sec\u003c/td\u003e\\n            \u003c/tr\u003e\\n            \u003ctr\u003e\\n                \u003ctd\u003e2\u003c/td\u003e\\n                \u003ctd\u003e小明\u003c/td\u003e\\n                \u003ctd\u003e12.115 sec\u003c/td\u003e\\n            \u003c/tr\u003e\\n            \u003ctr\u003e\\n                \u003ctd\u003e3\u003c/td\u003e\\n                \u003ctd\u003e凱文\u003c/td\u003e\\n                \u003ctd\u003e12.432 sec\u003c/td\u003e\\n            \u003c/tr\u003e\\n        \u003c/tbody\u003e\\n    \u003c/table\u003e\\n    \\n\u003c/body\u003e\\n\u003c/html\u003e\\n\\n\",\"css\":\"body {\\n    text-align: center;\\n    padding: 0px;\\n    position: relative;\\n    overflow: hidden;\\n}\\n\\n#text {\\n    margin-bottom: 15px;\\n}\\n\\n#text \u003e div {\\n    display: inline;\\n    font-size: 24px;\\n}\\n\\n#progress_bar {\\n    height: 10px;\\n    border-bottom: 1px solid #eee;\\n    box-sizing: border-box;\\n    text-align: left;\\n    position: relative;\\n}\\n\\n#progress_bar \u003e div {\\n    position: absolute;\\n    height: 100%;\\n    background-color: #f9d53e;\\n    display: inline-block;\\n} \\n\\nimg {\\n    max-width: 200px;\\n}\\n\\n.img_start {\\n    max-width: 50px;\\n    position: absolute;\\n    top: 10px;\\n    left: 0%;\\n    transform: translateX(-50%);\\n} \\n\\nbutton {\\n    width: 100px;\\n    outline: none;\\n    font-size: 1rem;\\n    padding: 10px 20px;\\n    border: 0;\\n    border-bottom: 6px solid #e6a772;\\n    border-radius: 5px;\\n    background-color: #f9d53e;\\n}\\n\\nbutton:active, .active {\\n    border-bottom-width: 3px;\\n    transform: translateY(3px);\\n    background-color: #aaa;\\n    border-bottom-color: #777;\\n}\\n\\n.hide {\\n    display: none;\\n}\\n\\ntable {\\n    border-collapse: collapse;\\n    width: 100%;\\n}\\n\\nth, td {\\n    border: 1px solid #eee;\\n    text-align: left;\\n    padding: 8px;\\n}\\n\\ntr:nth-child(even) {\\n    background-color: #f2f2f2;\\n}\",\"js\":\"let startOrNot = false;\\n$(\\\"body\\\").keydown(function(e){\\n    if (!startOrNot) {\\n        $(\\\"#text\\\").css(\\\"margin-top\\\", \\\"100px\\\");\\n        startOrNot = !startOrNot\\n        $(\\\"img\\\").addClass(\\\"img_start\\\");\\n    }\\n    let stepNum;\\n    stepNum= $(\\\"#steps\\\").text()\\n    stepNum = stepNum.replace(\\\"m\\\",\\\"\\\")\\n    stepNum = Number(stepNum)\\n    $(\\\"#progress_bar \u003e div\\\").css(\\\"width\\\", stepNum + \\\"%\\\");\\n    $(\\\"img\\\").css(\\\"left\\\", stepNum + \\\"%\\\");\\n    if(stepNum == 100){\\n        $(\\\"#progress_bar \u003e div\\\").remove()\\n        $(\\\"#btn_left\\\").remove()\\n        $(\\\"#btn_right\\\").remove()\\n        $(\\\"img\\\").removeClass(\\\"img_start\\\");\\n        $(\\\"#text\\\").css(\\\"margin-top\\\", \\\"15px\\\");\\n    }\\n})\"}","created_at":"2023-07-28T10:02:48.356+08:00","updated_at":"2023-07-28T10:02:53.466+08:00","name":"【綜合練習】手指百米衝刺大賽：實作 3 - 解答","language":"web","screenshot":{"url":null},"parent_id":576173,"plugin":"$(window).focus();\n\nvar record = DB.table('record'); //資料庫中用來紀錄遊戲分數的資料表\nvar userName = USER_NAME; //遊戲玩家的名字\nvar startTime; //遊戲開始時間\nvar count = 0; //紀錄玩家步數(按下次數)\nvar status = 'wait'; //wait、left、right、gameover 四種狀態\n\n$('body').keydown(keydownHandler); //任何按鍵被按下時執行 keydown 指令\n\n\nfunction keydownHandler (event) {\n    // 使用 alert 來示範按鍵對應的 keyCode\n    // alert(event.which)\n    if (event.which == 37 \u0026\u0026 (status == 'left' || status == 'wait')) {\n        leftStep();\n    } \n    if (event.which == 39 \u0026\u0026 status == 'right') {\n        rightStep();\n    }\n    if (count == 100 \u0026\u0026 status != 'gameover') {\n        gameover();\n    }\n}\n\n// 左鍵被按下時\nfunction leftStep () {\n    if (status == 'wait'){\n        $('#img_wait').hide();\n        startTime = Date.now();\n    }\n    $('#img_right').show();\n    $('#img_left').hide();\n    $('#btn_right').removeClass('active');\n    $('#btn_left').addClass('active');\n    count++;\n    $('#steps').text(count + 'm');\n    status = 'right';\n\n}\n\n// 右鍵被按下時\nfunction rightStep () {\n    $('#img_right').hide();\n    $('#img_left').show();\n    $('#btn_left').removeClass('active');\n    $('#btn_right').addClass('active');\n    count++;\n    $('#steps').text(count + 'm');\n    status = 'left';\n}\n\n// 遊戲結束\nfunction gameover () {\n    $('#img_left').hide();\n    $('#img_gameover').show();\n    status = 'gameover';\n    \n    var time = Date.now() - startTime;\n    $('#result').text(time/1000 + '秒');\n\n    record.create({ name: userName, time: time });\n    record.read({}, {\n        $orderBy: { time: 1 },\n        $limit: 5,\n    }, showRank);\n}\n\n// 顯示排行榜\nfunction showRank (data) {\n    $('table').show();\n    $('tbody').empty();\n    data.forEach(function (d, index) {\n        var row = `\n            \u003ctr\u003e\n                \u003ctd\u003e${index + 1}\u003c/td\u003e\n                \u003ctd\u003e${d.name}\u003c/td\u003e\n                \u003ctd\u003e${d.time/1000} 秒\u003c/td\u003e\n            \u003c/tr\u003e\n        `\n        $('tbody').append(row);\n    });\n}\n","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":42,"hashid":"4y3szj36n","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}