手指百米衝刺大賽 | Programming Project | OrangeApple Learning Platform

{"id":90378,"student_id":10,"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    \u003cimg id=\\\"img_stay\\\" src=\\\"./stay.jpg\\\"/\u003e\\n    \u003cimg id=\\\"img_run\\\" src=\\\"./run.gif\\\"/\u003e\\n    \u003ch1 id=\\\"steps\\\"\u003e0m\u003c/h1\u003e\\n    \u003cbutton id=\\\"left\\\" class=\\\"gold\\\"\u003e左鍵\u003c/button\u003e\\n    \u003cbutton id=\\\"right\\\"\u003e右鍵\u003c/button\u003e\\n    \u003ch2 id=\\\"result\\\"\u003e\u003c/h2\u003e\\n    \u003col\u003e\\n        \u003cli\u003e8.014 sec (小明)\u003c/li\u003e\\n        \u003cli\u003e8.344 sec (子佳)\u003c/li\u003e\\n        \u003cli\u003e8.454 sec (育瑋)\u003c/li\u003e\\n        \u003cli\u003e8.965 sec (凱文)\u003c/li\u003e\\n        \u003cli\u003e9.025 sec (綠茶)\u003c/li\u003e\\n    \u003c/ol\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\",\"css\":\"body {\\n    text-align: center;\\n    padding: 30px;\\n}\\n\\n.gold {\\n    background-color: gold;\\n    color: #fff;\\n}\\n\\nbutton {\\n    padding: 10px 15px;\\n    font-size: 1.2rem;\\n    border: none;\\n    background-color: gray;\\n    color: white;\\n}\\n\\nol {\\n    width: 200px;\\n    display: block;\\n    margin: auto;\\n}\\n\\n/* 實作1 */\\n#img_run {\\n    display: none;\\n}\\n\\n\",\"js\":\"var record = DB.table('record'); // 資料庫中用來紀錄遊戲分數的資料表\\nvar name = USER_NAME; // 遊戲玩家的名字\\nvar startTime; // 遊戲開始時間\\nvar count = 0; // 紀錄玩家步數(按下次數)\\nvar current = 'left'; // 'right' \u0026 'left' 兩種狀態切換，用來記錄這次按下的按鍵\\n\\n$('#right').click(rightStep);\\n$('#left').click(leftStep);\\n$('body').keydown(keydown);\\n\\n\\nfunction keydown (event) {\\n    // 使用 alert 來介紹按鍵對應的 keyCode\\n    // alert(event.witch)\\n    if (event.which == 37 \u0026\u0026 count == 0) {\\n        startGame();\\n    }\\n    if (event.which == 37) {\\n        leftStep();\\n    }\\n    if (event.which == 39) {\\n        rightStep();\\n    }\\n    if (count == 100) {\\n        gameover();\\n    }\\n}\\n\\nfunction startGame () {\\n    startTime = Date.now();\\n    $('#img_stay').hide();\\n    $('#img_run').show();\\n}\\n\\n// 右鍵被按下時\\nfunction rightStep () {\\n    if (current == 'right') {\\n        $('#right').removeClass('gold');\\n        $('#left').addClass('gold');\\n        count++;\\n        $('#steps').text(count + 'm');    \\n        current = 'left';\\n    }\\n}\\n\\n// 右鍵被按下時\\nfunction leftStep () {\\n    if (current == 'left') {\\n        $('#left').removeClass('gold');\\n        $('#right').addClass('gold');\\n        count++;\\n        $('#steps').text(count + 'm');\\n        current = 'right';\\n    }\\n}\\n\\n// 遊戲結束\\nfunction gameover () {\\n    var time = Date.now() - startTime;\\n    $('#result').text(time/1000 + 'sec');\\n    $('#img_stay').show();\\n    $('#img_run').hide();\\n    \\n    record.create({ name: name, time: time });\\n    record.read({}, {\\n        $orderBy: { time: 1 },\\n        $limit: 10, // 顯示排名前 10 名\\n    }, showRank);\\n}\\n\\n// 顯示排行榜\\nfunction showRank (data) {\\n    data.forEach(function (d) {\\n        $('ol').append(`\u003cli\u003e${d.time/1000} sec (${d.name})\u003c/li\u003e`);\\n    });\\n}\\n\"}","created_at":"2019-08-23T15:04:16.316+08:00","updated_at":"2019-11-05T10:23:24.950+08:00","name":"手指百米衝刺大賽","language":"web","screenshot":{"url":"/uploads/project/screenshot/90378/ee2659c8a3578cefcf44cec15664bea3.jpg"},"parent_id":3,"plugin":"$(window).focus();","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":457,"hashid":"jzmsdvgv","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}