【綜合練習】紅藍連線大 PK（二）：實作 3 - 解答 | 程式專案

{"id":576245,"student_id":2589,"content":"{\"html\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml\u003e\\n\u003chead\u003e\\n    \u003ctitle\u003eDocument\u003c/title\u003e\\n    \u003cscript src=\\\"https://code.jquery.com/jquery-3.2.1.min.js\\\"\u003e\u003c/script\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n    \u003cdiv id=\\\"cover\\\"\u003e\\n        \u003ch1\u003e紅藍連線大對決\u003c/h1\u003e\\n\\n        \u003cdiv class=\\\"button-group\\\"\u003e\\n            \u003cbutton id=\\\"setId\\\"\u003e創造房間\u003c/button\u003e\\n            \u003cbutton id=\\\"ready\\\"\u003e加入房間\u003c/button\u003e\\n            \u003cbutton id=\\\"restart\\\"\u003e重新開始\u003c/button\u003e\\n        \u003c/div\u003e\\n    \u003c/div\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\",\"css\":\"* {\\n    box-sizing: border-box;\\n}\\n\\nbody {\\n    width: 100vw;\\n    height: 100vh;\\n    background-image: url('bg.jpg');\\n    background-size: 500px;\\n    background-repeat: no-repeat;\\n    background-position: center;\\n    font-family: Arial;\\n}\\n\\n#cover {\\n    width: 100%;\\n    height: 100%;\\n    padding-top: 30px;\\n    color: #fff;\\n    background-color: #00000099;\\n    text-align: center;\\n}\\n\\nh1 {\\n    font-size: 45px;\\n    letter-spacing: 10px;\\n    padding-left: 10px;\\n}\\n\\nbutton {\\n    padding: 10px 20px;\\n    border: 2px solid #ccc;\\n    font-size: 16px;\\n    border-radius: 5px;\\n    margin-bottom: 10px;\\n    transition: 0.2s;\\n}\\n\\n.button-group {\\n    display: flex;\\n    justify-content: center;\\n}\\n\\n#setId {\\n    border-radius: 5px 0px 0px 5px;\\n    border-top: 4px solid #ccc;\\n    border-right: 2px solid #ccc;\\n    border-bottom: 4px solid #ccc;\\n    border-left: 4px solid #ccc;\\n}\\n\\nbutton:hover {\\n    background-color: #ccc;\\n    color: #fff;\\n}\\n\\n#ready {\\n    border-radius: 0px 5px 5px 0px;\\n    border-top: 4px solid #ccc;\\n    border-right: 4px solid #ccc;\\n    border-bottom: 4px solid #ccc;\\n    border-left: 2px solid #ccc;\\n}\\n\\n#restart {\\n    display: none;\\n}\\n\\n\\n\\n\\n\\n\",\"js\":\"\"}","created_at":"2023-07-28T10:32:23.015+08:00","updated_at":"2023-07-28T10:32:27.258+08:00","name":"【綜合練習】紅藍連線大 PK（二）：實作 3 - 解答","language":"web","screenshot":{"url":null},"parent_id":576244,"plugin":"var id; //房間id\nvar p1_count = 0; //自己的點擊次數\nvar p2_count = 0; //對方的點擊次數\nvar status = 0; //遊戲狀態 0: 等待, 1: 遊戲中, 2: 遊戲結束\n\n$('#setId').click(setId);\n$('#ready').click(ready);\n$('body').keyup(push);\n$('#restart').click(restart);\n\nsocket.on('ready', function (data) {\n    if (id == data) {\n        start();\n        socket.emit('start', id);\n    }\n});\n\nsocket.on('start', function (data) {\n    if (id == data) {\n        start();\n    }\n});\n\nsocket.on('update', function (data) {\n    if (id == data.id) {\n        p2_count = data.count;\n        update();\n    }\n});\n\nsocket.on('gameover', function (data) {\n    if (id == data) {\n        gameover();\n    }\n});\n\n//產生房間 ID\nfunction setId () {\n    id = Math.floor(Math.random()*10000);\n    $('h1').text('房間 ID: ' + id);\n    $('button').hide();\n}\n\n//輸入對方 ID\nfunction ready () {\n    id = Number(prompt('輸入對方 ID'));\n    $('h1').text('房間 ID: ' + id);\n    socket.emit('ready', id);\n}\n\n//開始遊戲\nfunction start () {\n    $('#cover').fadeOut();\n    status = 1;\n    p1_count = 0;\n    p2_count = 0;\n    $('body').css('background-image', 'url(\"bg.jpg\")');\n    update();\n}\n\n//推擠對方\nfunction push () {\n    if (status == 1) {\n        p1_count++;\n        update();\n        socket.emit('update', { id: id, count: p1_count });\n    }\n}\n\n//更新遊戲畫面\nfunction update () {\n    var diff = p1_count - p2_count;\n    $('body').css('background-position-x', `${50 + diff}%`);\n    if (diff \u003e= 10) {\n        gameover();\n        socket.emit('gameover', id);\n    }\n}\n\n//遊戲結束\nfunction gameover () {\n    status = 2;\n    if (p1_count \u003e p2_count) {\n        $('body').css('background-image', 'url(\"bg_win.jpg\")');\n        $('h1').text('You Win');\n    } else {\n        $('body').css('background-image', 'url(\"bg_lose.jpg\")');\n        $('h1').text('You Loss');\n    }\n    $('#cover').fadeIn();\n    $('button').hide();\n    $('#restart').show();\n}\n\n//重新開始\nfunction restart () {\n    socket.emit('ready', id);\n}","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":37,"hashid":"meys6rv8g","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}